Record your Playwright browser with playwright-video

By Max Schmitt, Published on 6/1/2020

Introduction

Video recordings of your end-to-end test case execution can play a critical role. Not only would these help in debugging issues more efficiently, but you can use recorded videos to show test execution activities to your team and internal stakeholders. Additionally, these recorded videos can be added to your CI pipeline artifacts if a test is failing.

Currently, there is no native way of recording a session with Playwright's standards. But the QAWolf team has created for that a third party library to record Chromium based sessions. It's based on screencast feature which Chromium will expose over the Chrome DevTools Protocol.

Installation

To install it, you need the actual package and an available installation of ffmpeg. For most cases @ffmpeg-installer/ffmpeg should be enough which will download a precompiled binary of ffmpeg when you install your NPM dependencies:

npm i -D playwright-video @ffmpeg-installer/ffmpeg

Basic usage

It's implemented per Page level, that means you can have a recording for a single page which you start and stop as soon as you are done.

const { chromium } = require('playwright-chromium');
const { saveVideo } = require('playwright-video');
(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  const capture = await saveVideo(page, 'recording.mp4');
  await page.goto("https://google.com")
  await page.goto("https://apple.com")
  await page.goto("https://github.com")
  await capture.stop()
  await browser.close();
})();

Once you have called the saveVideo function by providing the page, the browser session will be recorded and stored on the given filepath until you call the stop function. In the example above Playwright visits a few websites and then closes the session. It will look like that in the end:

Usage with jest-playwright

To integrate jest-playwright with playwright-video you can use the available utility methods to hook into the startup and teardown of the Playwright session.

import { saveVideo } from 'playwright-video'
let capture
beforeAll(async () => {
  capture = await saveVideo(page, 'recording.mp4')
})
afterAll(async () => {
  await capture.stop()
})
describe('Profile Settings', () => {
  it('can visit a few web pages successfully', async () => {
    await page.goto("https://google.com")
    await page.goto("https://apple.com")
    await page.goto("https://github.com")
  })
})

The shown code does the same as the other implementation and navigates by that through three different websites. The recording will also be stored in the recording.mp4 file.

A complete working implementation of playwright-video with jest-playwright as a reference you also find in the official examples repository of jest-playwright project.

Integration in GitHub Actions

The big benefit of having recordings in place as mentioned is for example to debug failed or flaky tests easier. In most cases, you run the end-to-end tests in CI environments like GitHub Actions. Since we've already seen the integration with jest-playwright, we only have to adjust our CI pipeline configuration to upload the recording if the end-to-end tests are failing. For GitHub Actions a minimal example would look like that:

name: CI
on: push
jobs:
  e2e:
    runs-on: ubuntu-latest
    steps:
    - uses:
    - name: Use Node.js
      uses: actions/setup-node@v1
      with:
        node-version: 13.x
    - name: Install Node.js dependencies
      working-directory: frontend
      run: npm ci
    - name: Run e2e tests
      run: npm run test:e2e
    - uses: actions/upload-artifact@v2
      if: ${{ failure() || success() }}
      with:
        name: Chromium Recording
        path: recording.mp4

In this example after the general steps (checkout, install Node.js) are running the end-to-end tests as usual via jest-playwright (we call Jest in the package.json script section) will be triggered via npm run test:e2e. By adding the if condition to the action for uploading the artifacts, we instruct the CI provider to upload the recording also if the pipeline has failed. You then can download the file once you open the GitHub Action run on GitHub itself. For more information check out the official action to upload files actions/checkout on GitHub.

Playwright itself has on his roadmap for the next features in the upcoming few releases, that a native screencast implementation will follow. This will give us cross-browser support and probably a smoother video in the end.