Record your Playwright browser with playwright-video
Tags: playwright, javascript, testing, jest
Published: 2020-07-06 22:15:36

---
title: Record your Playwright browser with playwright-video
published: true
description: Deep dive into how you record a Chromium browser with playwright-video and upload the recording with GitHub Actions as an artifact.
tags: playwright, javascript, testing, jest
canonical_url: https://playwright.tech/blog/record-your-browser-tests-with-playwright
---

## 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](https://github.com/qawolf/qawolf) team has created for that a third party library to record Chromium based sessions. It's based on [screencast feature](https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-startScreencast) 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.

```js
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`](https://github.com/qawolf/playwright-video#api) 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.

## 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.

```js
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`](https://github.com/playwright-community/playwright-jest-examples) 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:

```yaml
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](https://github.com/actions/upload-artifact#where-does-the-upload-go) on GitHub.

---

Playwright itself has on his [roadmap](https://github.com/microsoft/playwright/issues/1914) 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.