Capturing Screenshots and Videos with Playwright

When automating web testing, visual feedback plays a crucial role in debugging and verifying that your tests are executing correctly. Playwright provides built-in functionality to capture screenshots and record videos during test execution. This feature helps to easily identify UI glitches, track test progress, and investigate failures visually.

Read the previous Playwright Articles here.

Medium Free member can read it from here.

Photo by Luke Chesser on Unsplash

1. Capturing Screenshots

Screenshots provide a quick snapshot of the application’s state during a test. Playwright allows you to capture screenshots at different levels of granularity — whether it’s a full-page screenshot, an element-specific capture, or just the visible portion of the page (viewport).

1.1 Taking a Full-Page Screenshot

Capturing the entire webpage in a single screenshot is useful for testing long, scrollable pages. Here’s how you can capture a full-page screenshot:

import { chromium } from 'playwright';
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com');
  
  // Take a full-page screenshot
  await page.screenshot({ path: 'fullpage.png'…