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.
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.
Top comments (0)