Playwright Record Video

Playwright Record Video

The playwright has the option to record videos for all pages in a browser context where it is specified. Videos are saved only if the context is closed entirely, so make sure to close the context using await context.close() in the end.

Let us see an example of it.

const {test, expect} = require('@playwright/test');

  test('testing1', async ({browser})=> 

const context = await browser.newContext({ recordVideo: { dir: 'videos/' } });
const page1 = await context.newPage();
await page1.goto('');
await page1.locator('.gv-icon-52').click();
await page1.locator('#edit-keys').type('Playwright');
await page1.locator('#edit-submit').click();
await page1.waitForLoadState('networkidle');
const titles = await page1.locator('h3 a').allTextContents();
await context.close()


playwright record video

  • We can see here that the videos are stored in a separately generated videos folder.
  • There are videos as we are running on three different browsers.

Video size can also be specified; the default video is scaled to 800x800.
The video of the viewport is placed in the top left corner of the video.
We can set the viewport to match desired video size.

const context = await browser.newContext({
  recordVideo: {
    dir: 'videos/',
    size: { width: 640, height: 480 },
Standard (Image)