diff --git a/docs/src/test-snapshots-js.md b/docs/src/test-snapshots-js.md index ed69bbcde2856..4c9b0c7658042 100644 --- a/docs/src/test-snapshots-js.md +++ b/docs/src/test-snapshots-js.md @@ -59,6 +59,36 @@ await expect(page).toHaveScreenshot('landing.webp'); > Note that `toHaveScreenshot()` also accepts an array of path segments to the snapshot file such as `expect().toHaveScreenshot(['relative', 'path', 'to', 'snapshot.png'])`. > However, this path must stay within the snapshots directory for each test file (i.e. `a.spec.js-snapshots`), otherwise it will throw. +Mouse actions such as [`method: Locator.click`] leave the pointer at its last position. If the page changes afterwards, another element can end up under the pointer and appear hovered in the screenshot. To avoid this, move the mouse outside the viewport before taking the screenshot. + +
+Helper for repeated named screenshots + +```ts title="test-utils.ts" +import { + expect, + type Page, + type PageAssertionsToHaveScreenshotOptions, +} from '@playwright/test'; + +export async function expectPageToHaveScreenshotWithMouseOutsideViewport( + page: Page, + screenshotName: string | ReadonlyArray, + options?: PageAssertionsToHaveScreenshotOptions, +) { + await page.mouse.move(-1, -1); + await expect(page).toHaveScreenshot(screenshotName, options); +} +``` + +```ts title="example.spec.ts" +await expectPageToHaveScreenshotWithMouseOutsideViewport(page, 'landing.png', { + fullPage: true, +}); +``` + +
+ ## Updating screenshots Sometimes you need to update the reference screenshot, for example when the page has changed. Do this with the `--update-snapshots` flag.