← Back to library
Playwrightvisualintermediatev1.20+
Take an element-level screenshot
Capture a screenshot scoped to a single component for visual documentation or baseline comparison.
1test('sidebar matches visual baseline', async ({ page }) => {
2 await page.goto('/dashboard');
3
4 const sidebar = page.getByTestId('sidebar');
5 await sidebar.scrollIntoViewIfNeeded();
6
7 // For a one-off PNG saved to disk:
8 await sidebar.screenshot({ path: 'test-results/sidebar.png' });
9
10 // For automated regression, use toHaveScreenshot() —
11 // first run creates the baseline; subsequent runs diff against it
12 await expect(sidebar).toHaveScreenshot('sidebar-baseline.png', {
13 maxDiffPixelRatio: 0.02, // tolerate 2% pixel difference (anti-aliasing)
14 });
15});#screenshot#element#component#toHaveScreenshot#visual regression