From 68e6ab888c480e50cc013cb30bf1a866ff3fd612 Mon Sep 17 00:00:00 2001 From: Yury Semikhatsky Date: Thu, 13 Aug 2020 09:12:13 -0700 Subject: [PATCH] test(screencast): test that css animations are recorded (#3427) --- test/assets/rotate-z.html | 26 ++++++++++++++++++++++++++ test/screencast.spec.ts | 34 +++++++++++++++++++++++++++++----- 2 files changed, 55 insertions(+), 5 deletions(-) create mode 100644 test/assets/rotate-z.html diff --git a/test/assets/rotate-z.html b/test/assets/rotate-z.html new file mode 100644 index 0000000000..9a272dc807 --- /dev/null +++ b/test/assets/rotate-z.html @@ -0,0 +1,26 @@ + + + + + +
+ + diff --git a/test/screencast.spec.ts b/test/screencast.spec.ts index 2befa84174..9440fa8cfa 100644 --- a/test/screencast.spec.ts +++ b/test/screencast.spec.ts @@ -164,8 +164,8 @@ class VideoPlayer { } } - async pixels() { - const pixels = await this._page.$eval('video', (video:HTMLVideoElement) => { + async pixels(point = {x: 0, y: 0}) { + const pixels = await this._page.$eval('video', (video:HTMLVideoElement, point) => { let canvas = document.createElement("canvas"); if (!video.videoWidth || !video.videoHeight) throw new Error("Video element is empty"); @@ -173,9 +173,9 @@ class VideoPlayer { canvas.height = video.videoHeight; const context = canvas.getContext('2d'); context.drawImage(video, 0, 0); - const imgd = context.getImageData(0, 0, 10, 10); + const imgd = context.getImageData(point.x, point.y, 10, 10); return Array.from(imgd.data); - }); + }, point); return pixels; } } @@ -206,7 +206,6 @@ it.fail(CHROMIUM)('should capture static page', async({page, persistentDirectory expectAll(pixels, almostRed); }); -// TODO: the test fails in headful Firefox when running under xvfb. it.fail(CHROMIUM)('should capture navigation', async({page, persistentDirectory, server, videoPlayer, toImpl}) => { if (!toImpl) return; @@ -239,3 +238,28 @@ it.fail(CHROMIUM)('should capture navigation', async({page, persistentDirectory, expectAll(pixels, almostGrey); } }); + +it.fail(CHROMIUM)('should capture css transformation', async({page, persistentDirectory, server, videoPlayer, toImpl}) => { + if (!toImpl) + return; + const videoFile = path.join(persistentDirectory, 'v.webm'); + await page.goto(server.PREFIX + '/rotate-z.html'); + await toImpl(page)._delegate.startVideoRecording({outputFile: videoFile, width: 640, height: 480}); + // TODO: in WebKit figure out why video size is not reported correctly for + // static pictures. + if (HEADLESS && WEBKIT) + await page.setViewportSize({width: 1270, height: 950}); + await new Promise(r => setTimeout(r, 300)); + await toImpl(page)._delegate.stopVideoRecording(); + expect(fs.existsSync(videoFile)).toBe(true); + + await videoPlayer.load(videoFile); + const duration = await videoPlayer.duration(); + expect(duration).toBeGreaterThan(0); + + { + await videoPlayer.seekLastNonEmptyFrame(); + const pixels = await videoPlayer.pixels({x: 95, y: 45}); + expectAll(pixels, almostRed); + } +});