Basic page screenshot
To capture a screenshot and save it to a file, use page.screenshot({ path: 'screenshot.png' }). This method is available on the Page object in JavaScript.
screenshots
21 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Full page screenshot
To capture a screenshot of a full scrollable page including content below the fold, use page.screenshot({ path: 'screenshot.png', fullPage: true }). This creates a screenshot as if you had a very tall screen and the page could fit entirely.
Screenshot as buffer
Rather than writing to a file, you can capture a screenshot as a buffer by calling page.screenshot() without a path parameter. The buffer can then be post-processed, encoded to base64, or passed to third-party tools for pixel comparison.
Element screenshot
To take a screenshot of a single element, use locator.screenshot({ path: 'screenshot.png' }). This method is called on a Locator object, such as page.locator('.header').screenshot({ path: 'screenshot.png' }).
Screenshot API parameters
The Screenshots API accepts many parameters for image format, clip area, quality, and other options. Refer to the Screenshots API documentation for a complete list of available parameters.
toHaveScreenshot basic usage
Playwright Test includes the ability to produce and visually compare screenshots using await expect(page).toHaveScreenshot(). On first execution, Playwright test generates reference screenshots. Subsequent runs compare against the reference.
Screenshot snapshot generation process
When toHaveScreenshot() is called for the first time, the test runner takes a bunch of screenshots until two consecutive screenshots matched, and saves the last screenshot to the file system. This generated file is then ready to be added to the repository.
Screenshot filename format and components
The snapshot name consists of auto-generated test name, browser name, and platform. Example: 'example-test-1-chromium-darwin.png'. The auto-generated name can be overridden by passing a custom name as the first argument to toHaveScreenshot(). Browser name and platform are included because screenshots differ between browsers and platforms due to different rendering, fonts and other factors. If multiple projects are configured, the project name is used instead of the browser name.
Screenshot snapshot directory structure
Snapshots are stored in a directory named after the test file with '-snapshots' suffix. For example, 'example.spec.ts' produces snapshots in 'example.spec.ts-snapshots' directory. This directory should be committed to version control and reviewed for any changes.
Custom snapshot name with toHaveScreenshot
You can specify a custom snapshot name as the first argument to toHaveScreenshot(): await expect(page).toHaveScreenshot('landing.png');
Screenshot format: PNG and WebP support
Snapshots are stored as PNG by default. To store a snapshot in WebP format (which is also lossless), give the snapshot a name with the .webp extension: await expect(page).toHaveScreenshot('landing.webp');
Screenshot path array argument
toHaveScreenshot() also accepts an array of path segments to the snapshot file such as expect().toHaveScreenshot(['relative', 'path', 'to', 'snapshot.png']). However, this path must stay within the snapshots directory for each test file (e.g. a.spec.js-snapshots), otherwise it will throw an error.
Update snapshots with --update-snapshots flag
To update reference screenshots when the page has changed, run: npx playwright test --update-snapshots
maxDiffPixels option for screenshot comparison
The maxDiffPixels option controls the maximum number of different pixels allowed when comparing screenshots using the pixelmatch library. Example: await expect(page).toHaveScreenshot({ maxDiffPixels: 100 });
Configure maxDiffPixels globally in playwright.config.ts
To set a default maxDiffPixels value for all tests in a project, configure it in playwright.config.ts: export default defineConfig({ expect: { toHaveScreenshot: { maxDiffPixels: 100 } } });
stylePath option for custom stylesheet during screenshot
You can apply a custom stylesheet to a page while taking a screenshot using the stylePath option. This allows filtering out dynamic or volatile elements to improve screenshot determinism. Example: await expect(page).toHaveScreenshot({ stylePath: path.join(__dirname, 'screenshot.css') });
Configure stylePath globally in playwright.config.ts
To set a default stylePath for all tests in a project, configure it in playwright.config.ts: export default defineConfig({ expect: { toHaveScreenshot: { stylePath: './screenshot.css' } } });
toMatchSnapshot for non-image snapshots
Apart from screenshots, you can use expect(value).toMatchSnapshot(snapshotName) to compare text or arbitrary binary data. Playwright Test auto-detects the content type and uses the appropriate comparison algorithm.
toMatchSnapshot example for text content
You can compare text content against a reference snapshot: expect(await page.textContent('.hero__title')).toMatchSnapshot('hero.txt');
Browser rendering variability warning
Browser rendering can vary based on the host OS, version, settings, hardware, power source (battery vs. power adapter), headless mode, and other factors. For consistent screenshots, run tests in the same environment where the baseline screenshots were generated.
screenshot recording option values
The screenshot option controls capture of screenshots. Supported values are 'off', 'on', and 'only-on-failure'. It is set in the use object of the Playwright config.