← 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