Blog # 17:Lights, Camera, Test! 🎥 Using Video in Playwright

When it comes to ensuring our web applications function flawlessly, testing is indispensable. An incredibly helpful aspect of testing is video capture, which allows us to replay test runs and diagnose issues more effectively. Playwright, a fantastic end-to-end testing library, makes this process super easy.

In this blog, I’ll show you how to capture videos in Playwright, where they get stored, and how to customize the settings based on your project needs.

🧪 A Simple Login Test

Let’s kick things off with a simple Playwright test for a login flow. Here's a test script that logs in to a demo site:

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

test('capture video', async ({ page }) => {
    await page.goto('https://www.demoblaze.com/index.html');
    await page.getByRole('link', { name: 'Log in' }).click();
    await page.locator('#loginusername').fill('switch@example.com');
    await page.locator('#loginpassword').fill('password01');
    await page.getByRole('button', { name: 'Log in' }).click();
    await expect(page.locator('#logout2')).toBeVisible();
});

⚙️ Enabling Video Capture in Config File

To capture video, we only need to update the Playwright config file (typically playwright.config.js or .ts). Here’s the setup:

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

module.exports = defineConfig({
    use: {
        // Enable video capturing
        video: 'on', // Options include: 'on', 'off', 'retain-on-failure', 'on-first-retry'
    },
});

This automatically records videos of your test runs and stores them in the test-results folder.

🛠️ Video Capture Modes in Playwright

Playwright gives us flexible options to control when videos should be recorded. Here are the available modes:

'on' :  Records video for every test. Useful during development or when debugging tricky issues.

'off' : No video recording. Ideal when you want fast, clean test runs.
'retain-on-failure': Records video only if a test fails. Most commonly used for real-world test suites.
'retry-with-video': Captures video only on test retries. Helpful if you use retries for flaky tests.
'on-first-retry': Records video of the first retry attempt.

If you want to capture video only on failures (to save space), use this setting:

use: {
  video: 'retain-on-failure',
}

📺 Where to Find the Videos

Once tests are executed, Playwright automatically creates a folder named test-results. This is where your videos (and other artifacts) are stored.

Want to view everything nicely in a report? Just run:

npx playwright show-report

This will open a beautiful HTML report in your browser, showing test status, screenshots, and any captured video.

✅ Wrapping Up

Video capture in Playwright is a powerful feature for debugging, especially when you don’t want to keep rerunning failing tests manually. It gives you a clear view of what went wrong and helps you fix issues faster.
By tweaking the config file, you can strike the perfect balance between visibility and performance—whether you're capturing every run or just the failures.
So why not give it a try? 🎬

You might just find that little video clip that saves hours of debugging!
Happy testing! 🚀