Screen recording with Playwright

#playwright #headless #automation #screencast

When you run headless tests with Playwright, the browser will run the test without showing any browser window (UI).

The advantage of headless testing is that it is much faster to run tests than for example with Selenium.
One disadvantage however is that it makes it harder to debug any problems, since you can not record the UI into a video file.

If you're looking to record videos of your browser sessions, then you can use a NPM package called playwright-video. This package uses the DevTools protocol (more specifically Page.startScreencast) to capture screencastFrame's and glue these together with ffmpeg.

Installation

To start, please install the necessary NPM packages:
npm i -D playwright-video ffmpeg-static

Running your first test

Now you can run your first test with video. The example below will open a remote browser session in the HeadlessTesting cloud and send the video frames back. playwright-video will then glue these frames together into a video file and save it on your disk.

const pw = require('playwright-core');
const { saveVideo } = require('playwright-video');

(async () => {
  const browser = await pw.chromium.connect({
    wsEndpoint: 'wss://chrome.headlesstesting.com?token=[YOUR-TOKEN]&browserVersion=dev',
  });
  const context = await browser.newContext();
  const page = await context.newPage();

  await saveVideo(page, '/tmp/video.mp4');

  await page.goto('https://headlesstesting.com/');
  await page.screenshot({ path: 'screenshot.png' });

  await browser.close();
})();

This basic example will open a Chrome browser in the HeadlessTesting.com cloud, open a tab and go to our webpage, and then finally take a screenshot. It will save a video recording of these actions in a file called /tmp/video.mp4 on your disk.

Integration with Jest and Mocha

This can be integrated in your favourite test runner as well. Simply add the logic to your before/after hooks to capture a video:

let capture
beforeEach(async function() {
    this.timeout(35000)
    browser = await pw.chromium.connect({
        wsEndpoint: 'wss://chrome.headlesstesting.com?token=[YOUR-TOKEN]&browserVersion=dev',
    })
    context = await browser.newContext()
    page = await context.newPage()
    capture = await saveVideo(page, `${this.currentTest.title.replace(/ +/g, '_')}.mp4`)
})
afterEach(async function() {
    await capture.stop()
})