Friday evening, you merge a header redesign. Monday morning, a colleague tells you the login button slipped a few pixels on the pricing page — a page you never even touched. No test raised the alarm, because no test was watching the appearance. That's exactly the gap visual testing fills.
Since version 1.22, Microsoft's Playwright includes a native visual testing feature: the toHaveScreenshot() method. It captures screenshots and automatically compares them to reference images, with no external plugin needed.
This is one of the strongest options for development teams wanting to add visual testing to their existing stack. This guide covers installation, configuration, best practices, and CI/CD integration.
toHaveScreenshot() still makes you write and maintain code? Delta-QA captures and compares your pages without writing a single line of code, with no signup, and with your data staying local. Try Delta-QA free →
Installation and first test
Setup is quick with an existing Node.js project:
npm install -D @playwright/test
npx playwright install
Create your first visual test in tests/visual.spec.ts:
import { test, expect } from '@playwright/test';
test('homepage visual test', async ({ page }) => {
await page.goto('https://your-site.com');
await expect(page).toHaveScreenshot('homepage.png');
});
First run generates the baseline. Subsequent runs compare against it. That simple to start — complexity comes with real-world cases.
Configuring tolerance
By default, Playwright flags any single-pixel difference. In practice, configure thresholds to avoid false positives:
// playwright.config.ts
expect: {
toHaveScreenshot: {
maxDiffPixelRatio: 0.01,
animations: 'disabled',
scale: 'device',
},
}
Love Playwright but not the YAML and CI plumbing? Get visual testing without writing a single line of code in Delta-QA — free on Desktop, fully local, no account needed. Try Delta-QA free →
Handling dynamic content
Three solutions: mask dynamic zones, replace content via page.evaluate(), or hide with injected CSS. Each has tradeoffs between reliability and maintenance.
Stabilizing tests
Wait for network idle, font loading, and critical element visibility before capturing. Disable animations globally in config.
Multi-resolution testing
Use Playwright projects to test Desktop (1920×1080), Tablet (768×1024), and Mobile (iPhone 13) with separate baselines per project.
CI/CD integration
GitHub Actions integration is straightforward. When tests fail, Playwright generates three images: baseline, actual screenshot, and a red-highlighted diff. The HTML report shows them side by side.
Limitations
TypeScript/JavaScript skills required. No built-in review dashboard. Pixel comparison remains basic — anti-aliasing and font rendering differences between browsers generate noise. Baseline management with 200+ tests across 3 browsers means 600+ files to maintain.
For teams wanting visual testing without these technical constraints, no-code solutions like Delta-QA offer an alternative: same result with zero code, zero manual baseline management, and zero false positives.
Want to test without a single line of TypeScript or one baseline to regenerate? Compare your pages with Delta-QA right now — free and with no signup. Try Delta-QA free →
FAQ
Is Playwright free for visual testing?
Yes, entirely. toHaveScreenshot() is built into Playwright, which is open source.
Playwright or Cypress for visual testing?
Playwright has native visual testing; Cypress needs a plugin. Playwright supports three browser engines vs one for Cypress. For visual testing specifically, Playwright wins.
Can you use Playwright and Delta-QA together?
Yes. Playwright for complex dev tests, Delta-QA for routine visual checks by the QA team.