Free tools Windows power users keep installed
One-click scans. No signup required.
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
For visual regression snapshots, use Playwright Test’s toHaveScreenshot() assertion: navigate to the page or locate a component, then call await expect(page).toHaveScreenshot('landing.png') or await expect(locator).toHaveScreenshot('button.png'). The first run creates a baseline; later runs compare the rendered result with it. Playwright also supports ordinary text or binary snapshots and accessibility-tree snapshots through separate assertions.
Generate a visual snapshot with Playwright Test
Visual snapshots are image baselines used to catch rendering changes. The API is part of @playwright/test, so use Playwright Test rather than assuming the same assertion is available from every Playwright setup.
- Import
testandexpectfrom@playwright/test. - Open the page and put it into the state you want to check.
- Call
toHaveScreenshot()on the whole page or a locator. - Run the test to create the initial expected image, inspect it, and commit it with the test.
- Run the test again after changes; Playwright compares the new rendering with the stored baseline.
import { test, expect } from '@playwright/test';
test('landing page visual baseline', async ({ page }) => {
await page.goto('https://example.com');
await expect(page).toHaveScreenshot('landing.png');
});The first execution creates the reference snapshot. Subsequent executions compare against it. Screenshot assertions wait for two consecutive screenshots to match before comparing, helping avoid capturing while the page is still changing. See the Playwright snapshot testing documentation.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Capture a component instead of the whole page
Use a locator assertion when only one region matters. This keeps unrelated page content out of the comparison and makes failures easier to diagnose.
#1 Best Overall
test('primary button appearance', async ({ page }) => {
await page.goto('https://example.com');
const button = page.getByRole('button', { name: 'Get started' });
await expect(button).toHaveScreenshot('get-started-button.png');
});The locator must resolve to the intended element. If the page has multiple matching elements, make the locator specific rather than accepting an ambiguous target.
Where Playwright stores snapshots
By default, Playwright puts image snapshots in a directory associated with the test file. The generated image is normally PNG; using a filename ending in .webp produces WebP. Include the snapshot directory in version control and review the image changes as test data.
You can pass a filename or an array of path segments. For example, ['marketing', 'landing.png'] organizes a snapshot below a subdirectory. Segments must stay inside the test file’s snapshot directory. To resolve a path Playwright expects for screenshots or other snapshots programmatically, use test.info().snapshotPath(). Details on paths are in the official snapshot guide and TestInfo API reference.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Centralize snapshot paths
For a repository with many tests, configure a shared template in playwright.config.ts. Tokens let the path reflect the test, project, platform, or snapshot argument.
import { defineConfig } from '@playwright/test';
export default defineConfig({
testDir: './tests',
snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}',
expect: {
toHaveScreenshot: {
pathTemplate: '{testDir}/__screenshots__/{projectName}/{testFilePath}/{arg}{ext}',
},
},
});Supported template tokens include {testDir}, {testFilePath}, {testFileName}, {testFileBaseName}, {testFileDir}, {arg}, {ext}, {platform}, {projectName}, {snapshotDir}, and {testName}. A global snapshotPathTemplate organizes snapshot files generally; the assertion-specific expect.toHaveScreenshot.pathTemplate controls screenshot assertion paths.
Update and review baselines safely
When a UI change is intentional, regenerate expected images with:
npx playwright test --update-snapshotsDo not treat a passing update command as visual approval. Inspect the expected image, actual image, and diff, then commit the new baseline only when the change is intended. Updating snapshots indiscriminately can turn a regression into the new expectation.
Pixel comparisons can vary across operating systems, browser versions, fonts, hardware, power source, headless mode, and related settings. Generate and compare baselines in a consistent environment. If your test matrix deliberately uses more than one browser or platform, separate baselines by project or platform rather than comparing unlike renderers as if they were identical.
Reduce flaky visual snapshots
Visual tests fail noisily when unrelated motion or changing content appears in the capture. First make the page state deterministic; then adjust tolerance only for differences your test is explicitly willing to accept.
Stabilize the page before capture
- Wait for the relevant application state, not merely navigation, before taking the snapshot.
- Keep the mouse away from hover-sensitive controls or move it to a neutral location so hover styles do not depend on pointer position.
- Animations are disabled by default for screenshot assertions. Set
animations: 'allow'only when the animation itself is what the test needs to capture. - Use a custom
stylePathstylesheet to hide volatile regions such as live iframes, if their contents are not part of the behavior being tested.
Set tolerances deliberately
Shared screenshot assertion behavior can be configured under expect.toHaveScreenshot. Individual assertions can also use options such as maxDiffPixels, maxDiffPixelRatio, and threshold. For example:
await expect(page).toHaveScreenshot('landing.png', {
maxDiffPixels: 20,
});This example permits up to 20 differing pixels; it is an example setting, not a universally appropriate limit. A looser tolerance can conceal small real regressions, while a strict comparison may report harmless rendering differences. Set values based on the regions and rendering variation your test can reasonably tolerate.
Recommended Free Tools
Choose the right kind of snapshot
| What to preserve | Playwright assertion | Typical use |
|---|---|---|
| Rendered page or element image | expect(pageOrLocator).toHaveScreenshot() |
Visual regression checking; baseline is PNG by default or WebP when named with that extension. |
| Text or arbitrary binary value | expect(value).toMatchSnapshot() |
Compare textual output or binary data stored as an ordinary snapshot. |
| Accessibility-tree representation | expect(locator).toMatchAriaSnapshot() |
Check a locator’s accessibility structure and ordering. |
ARIA snapshot comparisons are order-sensitive: the expected template must match the order of the page’s accessibility tree. They test a different representation from an image, so choose based on whether the concern is appearance, content/data, or accessibility structure. See the ARIA snapshots guide and snapshot documentation.
Common snapshot problems and fixes
The first run says the snapshot is missing
That is the baseline-creation step when the assertion has no expected image yet. Review the generated image and commit it as test data; later runs use it for comparison.
The test fails after a browser or operating-system change
Different browser versions, operating systems, fonts, hardware, power settings, and headless mode can alter rendered pixels. Run baseline generation and comparison in the same environment, or intentionally maintain separate project/platform baselines.
The test fails intermittently despite no intended UI change
Look for animation, hover-dependent styles, live iframe content, or application state that has not settled. Let the screenshot assertion’s consecutive-capture stabilization work, explicitly wait for the meaningful UI state, move the pointer away, and use stylePath to suppress irrelevant volatile regions. Avoid increasing tolerance before identifying the source of noise.
An updated snapshot hides an unexpected change
Re-run with --update-snapshots only after deciding the change is intentional. Compare actual, expected, and diff images before committing. If the difference is accidental, fix the page or test and keep the old baseline.
The snapshot is in an unexpected directory
Check the test file’s associated snapshot directory, any path segments passed to the assertion, and both global and screenshot-specific path templates. Template tokens such as {projectName} or {platform} can produce separate paths for different runs.
Or skip the browser setup
If you need a screenshot of a URL rather than an in-test regression baseline, ScreenshotNeo is a website screenshot API and MCP server for developers. It is not a replacement for committed Playwright baselines when you need to compare a test rendering against a known image; it is an alternative for capturing web pages through an API or AI agent.
One GET request returns an image or PDF. The example below saves a WebP screenshot; see the ScreenshotNeo API documentation for parameters and response details.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minutecurl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie or consent banners as a visitor and removes 60+ known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and responses identify the page verdict and billing status in X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month with no card.
Cost, runtime, and reliability considerations
Playwright snapshots run as part of your test suite and depend on the browser and environment running those tests. Store baselines with the tests, keep the rendering environment consistent, and use project-specific baselines if the rendering targets differ. Snapshot comparisons are useful when the expected result is a known rendering; they are not a service-level guarantee about a website, nor a substitute for checking whether captured content is meaningful.
ScreenshotNeo’s plans and all-feature availability are described on its site: Free includes 1,000 shots per month; Starter is $5 for 3,000; Growth $15 for 15,000; Pro $39 for 60,000; Scale $99 for 250,000; and Business $249 for 1,000,000. Yearly billing gives two months free. These API captures are billed according to its clean-shot policy rather than as Playwright test assertions.
Frequently Asked Questions
Can Playwright save visual snapshots as WebP?
Yes. Use a screenshot filename ending in .webp; the default image format is PNG.
Can a Playwright snapshot cover only one element?
Yes. Call toHaveScreenshot() on a locator instead of the page.
Are accessibility snapshots the same as visual snapshots?
No. toMatchAriaSnapshot() compares an accessibility-tree representation, not rendered pixels.
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.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →
