Overview of recording video in Playwright
Want to record video in Playwright to debug your test runs more effectively? You’re in the right place. Playwright makes it simple to capture full video recordings of your test executions, so you can see what happened when a test fails. This built-in feature is especially helpful when reviewing CI runs or automating tests across browsers.
In this step-by-step tutorial, you’ll learn exactly how to enable and configure Playwright to record videos and make your debugging process much more visual and efficient.
Why Record Videos in Playwright Tests?
There are several reasons why enabling video recording in Playwright is a smart move, especially when working with automated tests.
- First, it allows for visual debugging, so instead of guessing where your test broke, you can simply watch the video and spot the issue.
- Second, it’s great for documentation; you can record and showcase how a specific user flow behaves during a test.
- Third, it boosts team collaboration, since you can easily share the recordings with your QA or development team for review.
- And finally, video capture is incredibly useful in CI/CD pipelines, where headless test runs often fail without much context. With videos, you get the full picture.
Two Ways to Record Video in Playwright
There are two main ways to record test execution videos in Playwright when working in VS Code:
1. Record Video from the Test File (Test-Specific)
To start recording videos in Playwright, the first step is to set up your test to capture the video during execution. You can do this by configuring either browser.newContext() or launchPersistentContext() with the recordVideo option. This tells Playwright where to save the video and what resolution to use.
Here is the basic syntax to start recording your test runs with ease.
const context = await browser.newContext({
recordVideo: {
dir: 'videos/',
size: { width: 1280, height: 720 },
},
});Test Level Video Recording Example
Let’s walk through a simple example to see how you can use video recording in Playwright, step by step.
// tests/playwrightdemo.spec.js
import { test, expect } from '@playwright/test';
test('Record video example - visit site and click link', async ({ browser }) => {
const context = await browser.newContext({
recordVideo: {
dir: 'videos/',
size: { width: 1280, height: 720 },
},
});
const page = await context.newPage();
await page.goto('https://example.com');
await page.click('text=More information'); // This may fail if the text doesn't exist
await context.close(); // This is important to finalize the video recording
});This Playwright test opens a browser, records a video while visiting https://example.com, and tries to click the “More information” link. Once the test finishes, it closes the browser context to properly save the video file in the videos/ folder.
After the test run, your recorded videos will be saved inside the videos folder, just as shown in the image below.
Where Are Playwright Recorded Videos Saved?
Playwright saves your videos in the folder you set in the dir option under recordVideo. In our case, that’s the videos folder. So, if your Playwright project is located at D:\Playwright Automation, your test videos will be saved at D:\Playwright Automation\videos. Each video gets saved as a .webm file with a unique name, making it easy to trace specific test runs.
For example:
3b11e4b106d55c9b44e058d6978b901e.webmRename the Video File Name
Playwright doesn’t allow you to manually set the video file name during test execution. By default, it saves videos with long, random filenames that can be hard to read or track later.
But here’s a helpful trick. You can rename the video file after the test ends using a timestamp. This way, each recording has a unique and readable name based on the date and time it was captured. It makes it much easier to organize and review your test videos.
For example, instead of a file like 3b11e4b106d55c9b44e058d6978b901e.webm, you can rename it to something like video-2025-08-08T12-30-55.webm.
Below is a full working example of how to record Playwright test execution videos and rename the file name using the current date and time:
import { test, expect } from '@playwright/test';
import fs from 'fs';
import path from 'path';
test('Record and rename video with timestamp - All browsers', async ({ browserName, browser }) => {
const context = await browser.newContext({
recordVideo: {
dir: 'videos/',
size: { width: 1280, height: 720 },
},
});
const page = await context.newPage();
await page.goto('https://example.com');
await page.waitForTimeout(1000); // small delay
await context.close();
// Wait for video to be fully written.
await new Promise(resolve => setTimeout(resolve, 2000));
const videoPathPromise = page.video()?.path();
if (videoPathPromise) {
const videoPath = await videoPathPromise;
const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
const newFileName = `video-${timestamp}.webm`;
const newPath = path.join('videos', newFileName);
fs.renameSync(videoPath, newPath);
console.log(`Video saved as: ${newPath}`);
}
}, 60000); // ⏱ extended timeout to handle large video writesWhile recording videos is excellent for understanding the entire test flow, sometimes a single frame is all you need to debug a failure. That’s where screenshots come in handy. You can also take screenshots in Playwright during test execution for more precise visual verification or debugging.
2. Set Video Recording Globally in Config File
If you want to record videos for all your test cases automatically, you can configure it globally using the Playwright config file. This is the easiest way to ensure every test run gets a video without writing extra code inside your test files.
You just need to open your playwright.config.js (or .ts) file and add the following use property:
use: {
video: 'on' // or 'on-first-retry', 'retain-on-failure', 'off'
}
This tells Playwright to capture a video for every test and save it in the test-results/ folder.
Available Video Recording Options:
| Video Recording Option | Description |
| ‘on’ | Records video for every test, regardless of result |
| ‘retain-on-failure’ | Records video, but saves it only if the test fails |
| ‘on-first-retry’ | Records video only during the first retry of a failed test |
| ‘off’ | Disables video recording completely (default) |
Customize the Video Recording Settings
If you want to set the size of video recording, then you can set use the property as below.
use: {
video: {
mode: 'on',
size: { width: 1280, height: 720 } //set resolution of video recording.
}
}In this case:
- mode: ‘on’ ensures the video is always recorded.
- size lets you define the resolution of the recorded video.
Note: If you’re using a version of Playwright below 1.39, video: { mode, dir } might not be supported directly. Always refer to your version’s official docs for compatibility.
Where Are the Videos Saved?
By default, Playwright stores these videos in a folder named test-results/. Each test will have its own subfolder, and the video file will be named using a unique hash (not a readable name).
For example:
test-results/
├── example-1/
│ └── video.webm
├── example-2/
│ └── video.webm
If you want to rename these files for better readability (like adding date-time), you’ll need to manage that using test-specific logic, since Playwright doesn’t support custom video filenames at the config level.
Run Test and Check the Video
You can now run your tests as usual:
npx playwright testAfter execution, the recorded video will be saved in the defined folder (or default location).
To view the video:
npx playwright show-reportIt opens the HTML report. If your test failed and recording was enabled, you’ll see a video link in the report.
Important Notes
- Video recording increases disk usage and test execution time. Use ‘retain-on-failure’ or ‘on-first-retry’ in CI to optimize performance.
- Recording of video is only supported in headed browsers or when Playwright is run with video capabilities enabled (it still works in headless mode, but must be configured properly).
Conclusion: Choose the Right Way to Record Video in Playwright
Recording videos in Playwright is a powerful way to debug and analyze your automated tests. If you want full control over when videos are captured, the test-specific setup lets you record only where needed by customizing the context inside your test file. This method is great when you’re testing only critical workflows or debugging specific scenarios.
On the other hand, if you’re looking for a more streamlined approach, setting up global video recording in the playwright.config.js file ensures that all tests are automatically recorded based on your configuration. Options like ‘on’, ‘retain-on-failure’, or ‘on-first-retry’ give you flexibility to optimize storage while still capturing valuable insights.
Frequently Asked Questions
How do I record a video for a specific test in Playwright?
You can record video for a specific test in Playwright by creating a browser context inside your test file with the recordVideo option. This allows you to control where and when video recording happens.
How can I enable video recording globally in Playwright?
To enable video recording for all tests, set the video option under the use block in your playwright.config.js file. You can choose from options like 'on', 'retain-on-failure', or 'on-first-retry'.
Where are Playwright recorded videos saved?
By default, Playwright saves recorded videos in the test-results folder. Each test that triggers video recording will have its own subfolder containing a video.webm file.
Can I view the recorded video in the HTML test report?
Yes, if video recording is enabled, the HTML report generated by Playwright will include a link to the recorded video under each test result. You can open it using npx playwright show-report.
Hi, I’m Aravind — a seasoned Automation Test Engineer with over 17 years of hands-on experience in the software testing industry. I specialize in tech troubleshooting and tools like Selenium, Playwright, Appium, JMeter, and Excel automation. Through this blog, I share practical tutorials, expert tips, and real-world insights to help testers and developers improve their automation skills.In addition to software testing, I also explore tech trends and user-focused topics, including Snapchat guides, codeless test automation, and more.
