[jackchuka]

Summary

guide.shot takes a new hide option: locators whose elements are left out of the shot with display: none.

mask keeps an element's box and paints over it, which suits values that change in place. Some elements should not be in the shot at all, such as rows that other tests or earlier runs created. Locale projects that run in parallel against one backend see each other's data, so these rows come and go between runs and change the image every time. A masked row would still leave a grey row behind.

• A hide locator may match no element or several (elementHandles), unlike a highlight.
• Each matched element's inline display is set to none, rather than adding a stylesheet:
  • Playwright applies the screenshot's style only while the shot is taken, so the crop would be measured with the elements still there and land in the wrong place.
  • An injected <style> would be blocked by a strict CSP (setting a style property directly is not), and would not reach shadow roots or frames, which locators do.
• After the shot the same elements get their old display back, in reverse order so an element matched twice ends up as it was, even if the locators match other elements by then. An element that had no style attribute is left without one. If hiding fails partway, the elements hidden so far are restored.
• Caveat, documented: a page rule with display: ... !important wins over the inline value; hide such an element with style.

Docs

• hide is added to the guide.shot options table and example.
• A new recipe, "Keep shots stable", lists what changes between runs and what to do about each: the clock, unique values, data from other tests, toasts and banners, animations, fonts, and rendering noise. It explains when to use mask, hide and style.

Test plan

• pnpm test: 161 passed
• pnpm run test:browser: 120 passed, including three new captureShot tests: hidden elements come back as they were (an inline display, an element matched twice, no leftover style attribute); a shadow root; several matches, with the crop measured without them
• pnpm run typecheck, pnpm run lint, pnpm run check:pkg

[IzumiSy]

Approving this PR, as I think the hide option is useful. That said, if the goal is to control which data appears in the UI, shouldn't we allow each test to configure its seed or mock data instead, rather than hiding unwanted rows during screenshot capture?

[jackchuka]

Thanks @IzumiSy! Agreed: keeping each test's data apart is the real fix, and hide should be the fallback. I reworded the "Keep shots stable" recipe in 2de5550 so it first recommends giving each guide its own data (create it in the test or a fixture, give each locale project its own account or workspace, or answer the requests with page.route), and only then hide for cases where the data cannot be kept apart, such as locale projects that run in parallel against one backend.

I did not add a seed or mock mechanism to e2g itself, since guides are plain Playwright tests and fixtures and page.route already cover that.