Capturing Videos & Screenshots in Playwright: A Complete Guide
Posted by Tanvi Saraswat
Posted on 6th Apr 2026 3:03 PM
( 20 min Read & 30 min Implementation )

#playwright #playwright-screenshot #playwright-recording
Article Outline

When you're working on automation testing, debugging failures can sometimes feel like solving a mystery. This is where Playwright’s video recording and screenshot features become extremely powerful.

They help you see exactly what happened during test execution — making debugging faster, easier, and more efficient.


Why Use Screenshots & Videos?


Let’s first understand the importance of these features:

  1. Screenshots help capture the exact state of the application at a specific moment
  2. Videos record the entire test execution
  3. Useful for debugging failed test cases
  4. Helpful for reporting and sharing issues with teams


Let us first understand what exactly are these features:


Taking Screenshots in Playwright

Playwright provides a very simple API to capture screenshots.


Basic Screenshot


await page.screenshot({ path: 'screenshot.png' });

This captures the current page and saves it as an image.


Full Page Screenshot


await page.screenshot({ path: 'fullpage.png', fullPage: true });

This captures the entire scrollable page — not just the visible area.


Screenshot of a Specific Element


const element=awaitpage.locator('#login-button');
await element.screenshot({ path: 'element.png' });

This is useful when you only want to capture a specific part of the UI.


Screenshot on Test Failure (Best Practice)


test.afterEach(async ({ page }, testInfo) => {
if (testInfo.status !==testInfo.expectedStatus) {
await page.screenshot({ path: 'failure.png' });
}
});

This ensures screenshots are captured only when something goes wrong.



Recording Videos in Playwright


Playwright Test can record videos for your tests, controlled by the "video" option in your Playwright config. By default videos are off.

off - Do not record video.
on - Record video for each test.
retain-on-failure - Record video for each test, but remove all videos from successful test runs.
on-first-entry - Record video only when retrying a test for the first time.

Enable Video Recording

You can enable video recording in your test configuration:


use: {
video: 'on'
}


Other options include:


video: 'retain-on-failure'// saves video only for failed tests
video: 'off'// disables video


Custom Video Settings


use: {
video: {
mode: 'on',
size: { width: 1280, height: 720 }
}
}

This allows you to control video resolution.


Where Are Videos Stored?

By default, videos are saved in the test results folder.

You can access them after execution to review test behavior.


Real-World Use Case

Imagine your login test is failing randomly in CI but works fine locally.

With Playwright:

  1. Video shows the exact flow of actions
  2. Screenshot captures the error message
  3. You quickly identify timing or UI issues

This reduces debugging time significantly.


Conclusion

Playwright’s screenshot and video capabilities are not just “nice-to-have” features — they are essential tools for modern test automation.

They give you visibility, confidence, and faster debugging — all of which are critical in delivering high-quality applications.


All Comments ()
Do You want to add Comment in this Blog? Please Login ?