Record your Playwright sessions

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.

Usage

It's implemented per Context level, which means you will have a recording for all pages in this context, including popups, etc.

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    recordVideo: {
      dir: "./recordings"
    }
  });
  const page = await context.newPage();

  await page.goto("https://google.com", { waitUntil: "networkidle" })
  await page.goto("https://apple.com", { waitUntil: "networkidle" })
  await page.goto("https://github.com", { waitUntil: "networkidle" })

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

Once you have closed the context, which browser.close() will do internally for you, Playwright will save the video to the disk. You can also wait for the video event to get emitted and then call e.g. the path() method on the Video class to get the path during the execution of your Node.js script.

Usage with jest-playwright

To record your tests with jest-playwright you can set the corresponding option in the context options. This can be done in the jest-playwright.config.js:

// jest-playwright.config.js
// https://github.com/playwright-community/jest-playwright/#configuration
module.exports = {
  browsers: ["chromium"],
  launchType: "LAUNCH",
  launchOptions: {
    headless: true
  },
  contextOptions: {
    recordVideo: {
      dir: 'videos/'
    }
  }
}

// example.test.ts
describe('Visit websites', () => {
  it('can visit a few web pages successfully', async () => {
    await page.goto("https://google.com", { waitUntil: "networkidle" })
    await page.goto("https://apple.com", { waitUntil: "networkidle" })
    await page.goto("https://github.com", { waitUntil: "networkidle" })
  })
})

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 videos directory.

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: Recordings
        path: videos/

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 recordings 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 and the documentation on playwright.dev about video recording.