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() {
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);
}
});