Understanding Playwright’s Screen Capture

Understanding Playwright’s Screen Capture


Ensuring web applications’ visual consistency and functionality in web development is critical. This is where Playwright, a powerful node library for browser automation, stands out with its screen-capture capabilities.

This blog post delves into the intricacies of using Playwright for screen captures, offering a step-by-step guide to leverage this feature effectively.

The Significance of Screen Captures

Screen captures are vital for:

  • Visual testing: Ensuring UI elements appear as expected.
  • Debugging: Identifying issues in the UI.
  • Documentation: Providing visual references for development stages.

Setting Up Playwright

Before diving into screen captures, ensure that Playwright is set up in your development environment.


  1. Create a new project
  2. Initialize a Node.js project
  3. Install Playwright
mkdir playwright-screen-capture && cd playwright-screen-capture
npm init -y
npm i -D @playwright/test

Understanding Screen Capture in Playwright

Playwright offers two primary methods for screen capture:

  1. Screenshot: Captures an image of the entire page or a specific element.
  2. Video Recording: Records the browser session.

Capturing Screenshots

1. Full Page Screenshot

Use Case

Capture the entire webpage rendering, useful for visual comparisons or archiving.


const { test } = require('@playwright/test'); 
test('Full page screenshot'async ({ page }) =>
    await page.goto('https://example.com'); 
    await page.screenshot({ path: 'full-page.png'fullPage: true });

2. Element Screenshot

Use Case

Focus on a specific element, like a widget or a dialog box.


test('Element screenshot'async ({ page }) =>
    await page.goto('https://example.com');
    const elementawait page.$('#specific-element'); 
    await element.screenshot({ path: 'element.png' }); 

Video Recording

Use Case

Record actions and interactions within a browser session, valuable for UX analysis and reproducing bugs.


Configure video recording in the Playwright test script.

javascriptCopy code

const { test } = require('@playwright/test');
test.use({ video: 'on' }); 
test('Record video'async ({ page }) =>
    await page.goto('https://example.com'); 
    // Perform actions

Advanced Techniques

Multiple Resolutions

Capture screenshots or videos at different screen resolutions to test responsive designs.

test('Responsive screenshot'async ({ page }) =>
    await page.setViewportSize({ width: 1280height: 720 }); 
    await page.goto('https://example.com'); 
    await page.screenshot({ path: 'screenshot-desktop.png' }); 
    await page.setViewportSize({ width: 375height: 667}); 
    await page.screenshot({ path: 'screenshot-mobile.png' }); 

Customizing Screenshots

Playwright allows customization, such as omitting backgrounds or specifying quality.

await page.screenshot({ path: 'custom-screenshot.png'omitBackground: true });

Best Practices

  • Consistent Environment: Ensure a consistent testing environment for accurate visual comparisons.
  • Regular Updates: Regularly update reference images to match the evolving UI.
  • Selective Recording: Use video recording judiciously, as it can impact performance and consume significant storage.


Playwright’s screen capture functionality is an indispensable tool in the modern web developer’s arsenal. Whether you’re performing comprehensive visual testing, debugging UI issues, or documenting the development process, Playwright’s screenshot and video recording capabilities provide a great solution.

By mastering these features, you can ensure your web applications function flawlessly and visually align with user expectations and design specifications.

Remember, the effectiveness of screen captures lies in their strategic application, aligned with your testing and development workflows.


Hi, my name is Stephen Finchett. I have been a software engineer for over 30 years and worked on complex, business critical, multi-user systems for all of my career. For the last 15 years, I have been concentrating on web based solutions using the Microsoft Stack including ASP.Net, C#, TypeScript, SQL Server and running everything at scale within Kubernetes.