Capturing Screenshots in Playwright

June 29, 2025

Playwright is a popular end-to-end testing framework developed by Microsoft that supports fast, reliable testing for modern web applications. One of its handy features is the ability to capture screenshots—useful for debugging, reporting, and visual regression testing.

Here’s how you can capture screenshots in Playwright:

✅ Install Playwright

First, make sure Playwright is installed:

npm init playwright@latest

Or if you just need to install it manually:

npm install -D @playwright/test

🖼️ 2. Capture a Full-Page Screenshot

const { chromium } = require('playwright');

(async () => {

const browser = await chromium.launch();

const page = await browser.newPage();

await page.goto('https://example.com');

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

await browser.close();

})();

🧩Capture a Screenshot of an Element

You can also capture just a specific element on the page:

const element = await page.$('h1'); // Select any element

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

⚙️ Capture Screenshot on Test Failure (Playwright Test Runner)

When using the built-in Playwright test runner, it automatically captures screenshots on failure if configured.

Enable in config file (playwright.config.ts or .js):

import { defineConfig } from '@playwright/test';

export default defineConfig({

use: {

screenshot: 'only-on-failure', // other options: 'on', 'off'

});

📂 Save with Dynamic Names

To avoid overwriting screenshots:

await page.screenshot({ path: `screenshot-${Date.now()}.png` });

🧪 6. Visual Comparison (Baseline Testing)

You can also use screenshots for visual regression testing:

import { test, expect } from '@playwright/test';

test('homepage visual snapshot', async ({ page }) => {

await page.goto('https://example.com');

expect(await page.screenshot()).toMatchSnapshot('homepage.png');

});

This compares the screenshot with a stored baseline image and highlights differences.

📝 Summary

Type Code Example

Full Page Screenshot page.screenshot({ path: 'file.png', fullPage: true })

Specific Element Screenshot elementHandle.screenshot({ path: 'file.png' })

On Test Failure Set screenshot: 'only-on-failure' in config

Visual Testing expect(await page.screenshot()).toMatchSnapshot()

🔚 Conclusion

Capturing screenshots in Playwright is simple and powerful. Whether you’re debugging a test failure or building visual regression tests, screenshots give you a clear view of what your application looked like during the test.

Learn Playwright Training in Hyderabad

Page Object Model in Playwright

How to Handle Dropdowns and Checkboxes

Parallel Testing with Playwright

Playwright CLI Commands You Should Know

Visit our IHub Talent Training Institute

Get Direction