How to record video for Playwright tests

Playwright can save a WebM recording of a browser test run so a UI state can be reviewed after the command finishes. Recording every run is useful while building a new spec, investigating visual timing, or collecting a short artifact for review before switching to failure-only retention.

The video setting belongs in the Playwright Test use options. Setting it to on records one video for each test result, and the runner writes the files under the configured output directory, normally test-results.

Videos are saved when the browser context closes at the end of the test. Keep full video recording focused on a short local run or a narrow debug suite, because successful tests also keep their videos when video is set to on.

1. Open the Playwright Test config file.

   $ ls playwright.config.ts
   playwright.config.ts

2. Set video to on in the use options.

   import { defineConfig, devices } from '@playwright/test';
   
   export default defineConfig({
     testDir: 'tests',
     outputDir: 'test-results',
     use: {
       video: 'on'
     },
     projects: [
       {
         name: 'chromium',
         use: { ...devices['Desktop Chrome'] }
       }
     ]
   });

   Place video: 'on' inside an existing top-level use block when the project already has one. Put it inside a specific project use block only when that browser project should record video.

3. Create a short browser test when the project does not already have a safe test to record.

   import { expect, test } from '@playwright/test';
   
   test('records video', async ({ page }) => {
     await page.setContent(`
       <main style="font-family: system-ui, sans-serif; padding: 48px;">
         <h1>Playwright fixture ready</h1>
         <p>Video recording target</p>
       </main>
     `);
   
     await expect(page.getByRole('heading', { name: 'Playwright fixture ready' })).toBeVisible();
   });

   Save the sample as tests/video.spec.ts for a local proof run, or use an existing UI test that reaches the page state you need to review.

4. Run the test in the Chromium project.

   $ npx playwright test tests/video.spec.ts --project=chromium
   
   Running 1 test using 1 worker
   
     ✓  1 [chromium] › tests/video.spec.ts:3:5 › records video (286ms)
   
     1 passed (1.0s)

   Use the project name from playwright.config.ts when it is not chromium, or omit --project=chromium when the project has only one browser target.

5. Find the recorded video artifact.

   $ find test-results -name "*.webm" -print
   test-results/video-records-video-chromium/video.webm

6. Check that the video file has content.

   $ du -h test-results/video-records-video-chromium/video.webm
   4.0K	test-results/video-records-video-chromium/video.webm

   A larger real application usually produces a larger WebM file. A nonzero size confirms Playwright wrote the video after the browser context closed.

7. Remove the sample spec if it was only created for the proof run.

   $ rm tests/video.spec.ts