Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

test(screencast): test that css animations are recorded (#3427)

Browse source
This commit is contained in:
Yury Semikhatsky 2020-08-13 09:12:13 -07:00 committed by GitHub
parent 4bb2658e74
commit 68e6ab888c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 55 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
test/assets/rotate-z.html Normal file
View file

@ -0,0 +1,26 @@
<html>
<head>
<style type="text/css">
.square {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100px;
background-color: red;
animation-name: z-spin;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes z-spin {
0% { transform: rotateZ(0deg); }
100% { transform: rotateZ(360deg); }
}
</style>
</head>
<body >
<div class="square"></div>
</body>
</html>

34
test/screencast.spec.ts
View file

@ -164,8 +164,8 @@ class VideoPlayer {
} }
} }
async pixels() { async pixels(point = {x: 0, y: 0}) {
const pixels = await this._page.$eval('video', (video:HTMLVideoElement) => { const pixels = await this._page.$eval('video', (video:HTMLVideoElement, point) => {
let canvas = document.createElement("canvas"); let canvas = document.createElement("canvas");
if (!video.videoWidth || !video.videoHeight) if (!video.videoWidth || !video.videoHeight)
throw new Error("Video element is empty"); throw new Error("Video element is empty");
@ -173,9 +173,9 @@ class VideoPlayer {
canvas.height = video.videoHeight; canvas.height = video.videoHeight;
const context = canvas.getContext('2d'); const context = canvas.getContext('2d');
context.drawImage(video, 0, 0); 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); return Array.from(imgd.data);
}); }, point);
return pixels; return pixels;
} }
} }
@ -206,7 +206,6 @@ it.fail(CHROMIUM)('should capture static page', async({page, persistentDirectory
expectAll(pixels, almostRed); 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}) => { it.fail(CHROMIUM)('should capture navigation', async({page, persistentDirectory, server, videoPlayer, toImpl}) => {
if (!toImpl) if (!toImpl)
return; return;
@ -239,3 +238,28 @@ it.fail(CHROMIUM)('should capture navigation', async({page, persistentDirectory,
expectAll(pixels, almostGrey); 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);
}
});