Skip to content

Commit

Permalink
test(screencast): save video in test-results (#3876)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yury-s
yury-s authored Sep 14, 2020
1 parent 0a243c6 commit 1eb282d
Showing 1 changed file with 59 additions and 34 deletions.
93 changes: 59 additions & 34 deletions test/screencast.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,31 @@ import type { Page } from '..';
import fs from 'fs';
import path from 'path';
import { TestServer } from '../utils/testserver';
import { mkdirIfNeeded } from '../lib/utils/utils';

type WorkerState = {
videoDir: string;
};
type TestState = {
videoPlayer: VideoPlayer;
videoFile: string;
};
const fixtures = playwrightFixtures.declareTestFixtures<TestState>();
const { it, expect, describe, defineTestFixture } = fixtures;
const fixtures = playwrightFixtures.declareWorkerFixtures<WorkerState>().declareTestFixtures<TestState>();
const { it, expect, describe, defineTestFixture, defineWorkerFixture, overrideWorkerFixture } = fixtures;

defineWorkerFixture('videoDir', async ({}, test, config) => {
await test(path.join((config as any).config.outputDir, 'screencast'));
});

overrideWorkerFixture('browser', async ({browserType, defaultBrowserOptions, videoDir}, test) => {
const browser = await browserType.launch({
...defaultBrowserOptions,
// Make sure videos are stored on the same volume as the test output dir.
_videosPath: videoDir,
});
await test(browser);
await browser.close();
});

defineTestFixture('videoPlayer', async ({playwright, context, server}, test) => {
// WebKit on Mac & Windows cannot replay webm/vp8 video, is unrelyable
Expand All @@ -43,6 +62,14 @@ defineTestFixture('videoPlayer', async ({playwright, context, server}, test) =>
await page.close();
});

defineTestFixture('videoFile', async ({browserType, videoDir}, runTest, info) => {
const { test } = info;
const sanitizedTitle = test.title.replace(/[^\w\d]+/g, '_');
const videoFile = path.join(videoDir, `${browserType.name()}-${sanitizedTitle}-${test.results.length}_v.webm`);
await mkdirIfNeeded(videoFile);
await runTest(videoFile);
});

function almostRed(r, g, b, alpha) {
expect(r).toBeGreaterThan(240);
expect(g).toBeLessThan(50);
Expand Down Expand Up @@ -162,7 +189,7 @@ class VideoPlayer {
describe('screencast', suite => {
suite.slow();
}, () => {
it('should capture static page', async ({browser, videoPlayer}) => {
it('should capture static page', async ({browser, videoPlayer, videoFile}) => {
const context = await browser.newContext({ _recordVideos: true, _videoSize: { width: 320, height: 240 } });
const page = await context.newPage();
const video = await page.waitForEvent('_videostarted') as any;
Expand All @@ -171,8 +198,9 @@ describe('screencast', suite => {
await new Promise(r => setTimeout(r, 1000));
await page.close();

const videoFile = await video.path();
expect(fs.existsSync(videoFile)).toBe(true);
const tmpPath = await video.path();
expect(fs.existsSync(tmpPath)).toBe(true);
fs.renameSync(tmpPath, videoFile);

await videoPlayer.load(videoFile);
const duration = await videoPlayer.duration();
Expand All @@ -188,7 +216,7 @@ describe('screencast', suite => {

it('should capture navigation', (test, parameters) => {
test.flaky();
}, async ({browser, server, videoPlayer}) => {
}, async ({browser, server, videoPlayer, videoFile}) => {
const context = await browser.newContext({ _recordVideos: true, _videoSize: { width: 1280, height: 720 } });
const page = await context.newPage();
const video = await page.waitForEvent('_videostarted') as any;
Expand All @@ -199,8 +227,9 @@ describe('screencast', suite => {
await new Promise(r => setTimeout(r, 1000));
await page.close();

const videoFile = await video.path();
expect(fs.existsSync(videoFile)).toBe(true);
const tmpPath = await video.path();
expect(fs.existsSync(tmpPath)).toBe(true);
fs.renameSync(tmpPath, videoFile);

await videoPlayer.load(videoFile);
const duration = await videoPlayer.duration();
Expand All @@ -221,7 +250,7 @@ describe('screencast', suite => {

it('should capture css transformation', (test, parameters) => {
test.fail(options.WEBKIT(parameters) && WIN, 'Does not work on WebKit Windows');
}, async ({browser, server, videoPlayer}) => {
}, async ({browser, server, videoPlayer, videoFile}) => {
const size = {width: 320, height: 240};
// Set viewport equal to screencast frame size to avoid scaling.
const context = await browser.newContext({ _recordVideos: true, _videoSize: size, viewport: size });
Expand All @@ -232,8 +261,9 @@ describe('screencast', suite => {
await new Promise(r => setTimeout(r, 1000));
await page.close();

const videoFile = await video.path();
expect(fs.existsSync(videoFile)).toBe(true);
const tmpPath = await video.path();
expect(fs.existsSync(tmpPath)).toBe(true);
fs.renameSync(tmpPath, videoFile);

await videoPlayer.load(videoFile);
const duration = await videoPlayer.duration();
Expand All @@ -246,8 +276,7 @@ describe('screencast', suite => {
}
});

it('should automatically start/finish when new page is created/closed', async ({browserType, defaultBrowserOptions, tmpDir}) => {
const browser = await browserType.launch({ ...defaultBrowserOptions, _videosPath: tmpDir });
it('should automatically start/finish when new page is created/closed', async ({browser, videoDir}) => {
const context = await browser.newContext({ _recordVideos: true, _videoSize: { width: 320, height: 240 }});
const [screencast, newPage] = await Promise.all([
new Promise<any>(r => context.on('page', page => page.on('_videostarted', r))),
Expand All @@ -258,13 +287,11 @@ describe('screencast', suite => {
screencast.path(),
newPage.close(),
]);
expect(path.dirname(videoFile)).toBe(tmpDir);
expect(path.dirname(videoFile)).toBe(videoDir);
await context.close();
await browser.close();
});

it('should finish when contex closes', async ({browserType, defaultBrowserOptions, tmpDir}) => {
const browser = await browserType.launch({ ...defaultBrowserOptions, _videosPath: tmpDir });
it('should finish when contex closes', async ({browser, videoDir}) => {
const context = await browser.newContext({ _recordVideos: true, _videoSize: { width: 320, height: 240 } });

const [video] = await Promise.all([
Expand All @@ -276,9 +303,7 @@ describe('screencast', suite => {
video.path(),
context.close(),
]);
expect(path.dirname(videoFile)).toBe(tmpDir);

await browser.close();
expect(path.dirname(videoFile)).toBe(videoDir);
});

it('should fire striclty after context.newPage', async ({browser}) => {
Expand All @@ -289,8 +314,7 @@ describe('screencast', suite => {
await context.close();
});

it('should fire start event for popups', async ({browserType, defaultBrowserOptions, tmpDir, server}) => {
const browser = await browserType.launch({ ...defaultBrowserOptions, _videosPath: tmpDir });
it('should fire start event for popups', async ({browser, videoDir, server}) => {
const context = await browser.newContext({ _recordVideos: true, _videoSize: { width: 320, height: 240 } });

const [page] = await Promise.all([
Expand All @@ -307,12 +331,10 @@ describe('screencast', suite => {
video.path(),
popup.close()
]);
expect(path.dirname(videoFile)).toBe(tmpDir);

await browser.close();
expect(path.dirname(videoFile)).toBe(videoDir);
});

it('should scale frames down to the requested size ', async ({browser, videoPlayer, server}) => {
it('should scale frames down to the requested size ', async ({browser, videoPlayer, videoFile, server}) => {
const context = await browser.newContext({
viewport: {width: 640, height: 480},
// Set size to 1/2 of the viewport.
Expand All @@ -334,8 +356,9 @@ describe('screencast', suite => {
await new Promise(r => setTimeout(r, 1000));
await page.close();

const videoFile = await video.path();
expect(fs.existsSync(videoFile)).toBe(true);
const tmp = await video.path();
expect(fs.existsSync(tmp)).toBe(true);
fs.renameSync(tmp, videoFile);

await videoPlayer.load(videoFile);
const duration = await videoPlayer.duration();
Expand All @@ -360,7 +383,7 @@ describe('screencast', suite => {
}
});

it('should use viewport as default size', async ({browser, page, tmpDir, videoPlayer, toImpl}) => {
it('should use viewport as default size', async ({browser, videoPlayer, videoFile}) => {
const size = {width: 800, height: 600};
const context = await browser.newContext({_recordVideos: true, viewport: size});

Expand All @@ -369,31 +392,33 @@ describe('screencast', suite => {
context.newPage(),
]);
await new Promise(r => setTimeout(r, 1000));
const [videoFile] = await Promise.all([
const [tmpPath] = await Promise.all([
video.path(),
context.close(),
]);

expect(fs.existsSync(videoFile)).toBe(true);
expect(fs.existsSync(tmpPath)).toBe(true);
fs.renameSync(tmpPath, videoFile);
await videoPlayer.load(videoFile);
expect(await videoPlayer.videoWidth()).toBe(size.width);
expect(await videoPlayer.videoHeight()).toBe(size.height);
});

it('should be 1280x720 by default', async ({browser, page, tmpDir, videoPlayer, toImpl}) => {
it('should be 1280x720 by default', async ({browser, videoPlayer, videoFile}) => {
const context = await browser.newContext({_recordVideos: true});

const [video] = await Promise.all([
new Promise<any>(r => context.on('page', page => page.on('_videostarted', r))),
context.newPage(),
]);
await new Promise(r => setTimeout(r, 1000));
const [videoFile] = await Promise.all([
const [tmpPath] = await Promise.all([
video.path(),
context.close(),
]);

expect(fs.existsSync(videoFile)).toBe(true);
expect(fs.existsSync(tmpPath)).toBe(true);
fs.renameSync(tmpPath, videoFile);
await videoPlayer.load(videoFile);
expect(await videoPlayer.videoWidth()).toBe(1280);
expect(await videoPlayer.videoHeight()).toBe(720);
Expand Down

0 comments on commit 1eb282d

Please sign in to comment.