Free tools Windows power users keep installed
One-click scans. No signup required.
Use Playwright Test’s built-in toHaveScreenshot() assertion to compare rendered pages against checked-in image baselines, then run the same tests in CI with a consistent browser environment. The reliable workflow is to make the page state reproducible, inspect the first baseline, and review each later image diff before deciding whether to update a reference.
How Playwright screenshot tests work
Playwright Test can capture a page and compare it with a reference image using await expect(page).toHaveScreenshot(). On first use, the assertion creates a baseline; Playwright’s documented capture process waits until two consecutive screenshots match before saving the result. Later runs compare new captures with that reference. See the Playwright visual comparisons documentation.
A screenshot assertion checks rendered appearance, not application behavior. Keep functional assertions for things such as navigation, form submission, and expected content. A visual difference may be a regression, an intentional design update, or rendering noise; it needs review rather than automatic acceptance.
Make the page reproducible before capturing it
Visual tests are useful only when the input state and rendering conditions are controlled. Before adding a screenshot assertion, make navigation, viewport, test data, and page readiness deterministic.
#1 Best Overall
- Use a stable URL and seed or fixture data rather than content that changes between runs.
- Set a specific viewport and use the same browser and rendering environment when creating and checking references.
- Wait for a meaningful readiness condition, such as a page heading or a component being visible, rather than relying only on an arbitrary delay.
- Control animations or other transient states if they make captures inconsistent.
Add a screenshot assertion
In an existing Playwright Test project, add a test such as this, replacing the URL and selector with elements from your application:
import { test, expect } from '@playwright/test';
test('home page visual appearance', async ({ page }) => {
await page.setViewportSize({ width: 1280, height: 800 });
await page.goto('http://127.0.0.1:3000');
await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
await expect(page).toHaveScreenshot('home.png');
});Start the app using your project’s normal test setup before running the test. On the first run, inspect the generated reference image and confirm it represents the intended page; do not accept it blindly. Playwright stores snapshot references alongside the test according to its snapshot conventions. Check the resulting files into version control so subsequent runs have a reference to compare.
Run the tests in CI
The general Playwright CI sequence is to install project dependencies, install the required browsers and operating-system dependencies, and run the test command. The exact package-manager command depends on your project; the example below uses npm and GitHub Actions. Playwright’s provider-independent guidance and CI examples are in its Continuous Integration documentation.
Rank #2
name: Playwright tests
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 22
cache: npm
- run: npm ci
- run: npx playwright install --with-deps
- run: npx playwright test
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report/
retention-days: 14Use the Node version appropriate to your application; the version shown is an example, not a Playwright requirement. Keep the lockfile in the repository and use the package manager’s lockfile-respecting install command so CI resolves the same project dependencies. Install the browsers and OS dependencies needed by the Playwright version in your project. The report artifact can help with diagnosis; configure its path to match the reporter output you use.
Choose workers and keep baselines consistent
Start with one CI worker
Playwright recommends setting workers to 1 in CI to prioritize stability and reproducibility. Set this in your CI-specific Playwright configuration or command. Once runs are stable and the runner has suitable capacity, you can increase workers or shard tests across CI jobs. Sharding can reduce elapsed time, but plan how to collect and inspect reports across jobs.
Match the baseline environment
Rendering can vary with the operating system, browser version, fonts, and other dependencies. Create and review baselines in an environment aligned with CI, and avoid casually regenerating references on a different OS or browser version. A container can help provide a consistent environment across operating systems; use a Playwright-compatible image and keep its browser version aligned with the project.
Review image differences and update references deliberately
When a test fails, inspect the actual capture, expected reference, and diff produced by the test output. Decide whether the change is an intended design update or a defect before updating snapshots. A passing test after snapshot replacement proves only that the new capture matches the new reference; it does not prove the change was correct.
- Open the CI report or failure artifacts and identify the affected test and page state.
- Compare the expected image with the actual image and diff.
- Check whether the difference is explained by an intended UI change, unstable test data, environment drift, or a real regression.
- Fix the underlying cause, or update the reference only after approving the intended visual change.
Built-in snapshots or hosted review
Playwright’s built-in assertions keep screenshot tests and reference images in the Playwright workflow. Percy offers an optional hosted snapshot-review route: its integration repository describes sending Playwright snapshots through a token-based CLI workflow using percy exec. See the Percy Playwright integration.
| Choice | Baseline and review | Operational considerations |
|---|---|---|
| Playwright built-in | Reference images and test output stay in the Playwright project and CI workflow. | Manage and review snapshot files in your repository and CI artifacts. |
| Percy integration | Snapshots are sent to Percy for hosted review. | Requires an external account and token workflow. Check current plan terms, access controls, retention, and what image content is uploaded before adopting it; the integration source does not establish current pricing or policy terms. |
Choose based on the review workflow your team needs, environment consistency, test scale, and the implications of uploading screenshots. Neither route makes visual comparison a substitute for functional tests.
Or skip the browser setup
If your goal is to capture a URL from a script rather than maintain browser-based regression baselines, ScreenshotNeo offers a screenshot API and MCP server. One GET request can return an image or PDF; its capture flow accepts cookie/consent banners and removes supported consent platforms, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, with response headers indicating the page verdict and billing status. AI agents can use its MCP tools for screenshots, page information, and PDF capture. The free plan includes 1,000 screenshots monthly without a card; paid plans start at $5 for 3,000 screenshots. This is a capture service, not a replacement for Playwright’s baseline comparison workflow.
For example, save a screenshot response from a URL with cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for parameters and response details. Sign up for 1,000 free screenshots a month with no card.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchTroubleshooting common CI failures
Browser executable or system dependency is missing
Install the browsers and operating-system dependencies for the Playwright version used by the project, for example with npx playwright install --with-deps on a compatible Linux CI runner. If Playwright was upgraded, ensure CI installs the matching browser build.
Screenshots differ on CI but not locally
Check for differences in OS, browser version, fonts, viewport, test data, and page readiness. Align the baseline-generation environment with CI or use a consistent containerized setup; do not update references merely to silence environment-dependent failures.
Tests fail intermittently
Make the page state deterministic, wait for a meaningful readiness signal, and inspect whether animations or dynamic content are changing between captures. Start CI with one worker, as Playwright recommends, before trying more parallelism.
The report is unavailable after a failed job
Configure CI to upload reports and failure evidence even when a test command fails, using the provider’s equivalent of an always-run artifact step. Confirm the uploaded path matches the reporter configuration.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Hosted snapshot upload cannot authenticate
For a Percy workflow, verify that the project token is available to the job through the CI secret mechanism and that the CLI invocation follows the integration’s current instructions. Do not put the token directly into a committed workflow file.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
