Playwright Screenshot Comparison: Visual Testing Beyond toHaveScreenshot
toHaveScreenshot() is the basic API. Advanced visual testing includes element-level screenshots, masking dynamic content, cross-browser comparison, and responsive breakpoint testing.
🎠Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.
Contents
Element-Level Screenshots
test('product card visual', async ({ page }) => {
await page.goto('/products');
const card = page.getByTestId('product-card').first();
await expect(card).toHaveScreenshot('product-card.png');
});Masking Dynamic Content
await expect(page).toHaveScreenshot('dashboard.png', {
mask: [
page.getByTestId('timestamp'),
page.getByTestId('live-count'),
page.locator('.ad-banner'),
],
maxDiffPixelRatio: 0.01,
});🚀 Level Up Your Playwright
From locators to CI pipelines — build a production-grade Playwright + TypeScript framework step by step.
Responsive Breakpoints
const breakpoints = [
{ name: 'mobile', width: 375, height: 812 },
{ name: 'tablet', width: 768, height: 1024 },
{ name: 'desktop', width: 1440, height: 900 },
];
for (const bp of breakpoints) {
test('homepage at ' + bp.name, async ({ page }) => {
await page.setViewportSize(bp);
await page.goto('/');
await expect(page).toHaveScreenshot('home-' + bp.name + '.png');
});
}Updating Baselines
npx playwright test --update-snapshots🎓 Master Playwright End to End
Join hundreds of SDETs building real automation frameworks. Lifetime access, hands-on projects, and a job-ready portfolio.
