How to capture a screenshot with Playwright

Playwright screenshots turn a browser page state into a PNG artifact that can be reviewed after a test run. A saved PNG gives reviewers a fixed visual record for a ticket, release note, or debugging session without recording a full trace or video.

The page.screenshot() API captures the current Page object. Passing path writes the image to disk, and fullPage captures the whole scrollable document instead of only the current viewport.

Capture after the page reaches the state that matters, such as a visible heading, loaded table, completed form, or rendered dashboard. Store screenshots under a dedicated artifact directory and keep sensitive UI data out of files that might be uploaded to CI logs or shared reports.

1. Create a directory for screenshot artifacts.

   $ mkdir -p artifacts/screenshots

2. Create tests/screenshot.spec.ts with a stable page state and a screenshot path.

   import { expect, test } from '@playwright/test';
   
   test('capture screenshot artifact', async ({ page }, testInfo) => {
     await page.setContent(`
       <main style="font-family: system-ui, sans-serif; padding: 48px;">
         <h1>Playwright fixture ready</h1>
         <p>Screenshot capture target</p>
       </main>
     `);
   
     await expect(page.getByRole('heading', { name: 'Playwright fixture ready' })).toBeVisible();
     await page.screenshot({
       path: `artifacts/screenshots/${testInfo.project.name}-home-page.png`,
       fullPage: true
     });
   });

   Replace the page.setContent() block with page.goto('/route') or an existing setup sequence when the screenshot should come from a running app. The testInfo.project.name value keeps parallel browser projects from overwriting the same PNG.

3. Run the screenshot test in the Chromium project.

   $ npx playwright test tests/screenshot.spec.ts --project=chromium
   Running 1 test using 1 worker
   
     ✓  1 [chromium] › tests/screenshot.spec.ts:3:5 › capture screenshot artifact (387ms)
   
     1 passed (1.5s)

   Use the project name from playwright.config.ts when it is not chromium, or omit --project=chromium when the project has only one browser target.
   Related: How to run Playwright tests

4. Confirm that Playwright wrote a PNG file.

   $ file artifacts/screenshots/chromium-home-page.png
   artifacts/screenshots/chromium-home-page.png: PNG image data, 1280 x 720, 8-bit/color RGB, non-interlaced