← Back to library
Playwrightvisualintermediatev1.20+

Screenshot a single element

Capture a specific component rather than the whole page for focused visual tests.

1test('hero banner matches baseline', async ({ page }) => {
2  await page.goto('/');
3
4  const hero = page.getByTestId('hero-banner');
5  await hero.scrollIntoViewIfNeeded();
6
7  await expect(hero).toHaveScreenshot('hero-banner.png', {
8    maxDiffPixelRatio: 0.01,
9  });
10});
#screenshot#element#component#locator