In Playwright, what does the mask option of toHaveScreenshot() accept, and what does it do to the image?

## What the option takes `mask` is an array of **locators**, passed to the matcher alongside the snapshot name: ```typescript await expect(page).toHaveScreenshot('statement.png', { mask: [page.getByTestId('current-balance'), page.getByTestId('last-updated')], }); ``` A locator, not a CSS string and not a rectangle. That has practical consequences: - A locator that resolves to several elements masks all of them, so `page.getByRole('cell')` covers every cell rather than raising a strict-mode error. - A locator that resolves to nothing masks nothing and does not fail the assertion, so a stale test id silently stops masking. - Locators are evaluated at capture time, which means an element that has not rendered yet is not masked. ## What it draws Each matched element is overlaid with a **solid rectangle** covering its bounding box. The default fill is the bright pink `#FF00FF`, chosen to be obvious in a diff, and `maskColor` accepts any CSS colour string when that pink clashes with the design being captured. | Aspect | Behaviour | |---|---| | Shape | The element's bounding box, so a non-rectangular element is over-covered | | Default colour | `#FF00FF`, overridden by `maskColor` | | Applied when | During capture, so both reference and actual contain the box | | Effect on layout | None: the element still occupies its space | ## The two mechanics interviewers probe 1. **The mask is in both images.** Because it is applied while capturing, a reference generated with a mask already has the box baked in. Add a mask to a test whose reference was generated without one and the two images differ everywhere the box lands, so the assertion fails until the reference is regenerated. Remove a mask and the same thing happens in reverse. 2. **The mask hides content, not geometry.** The element keeps its box in the layout. On a statement page, masking the current balance stops the digits from breaking the comparison, but if the balance widget changes width or height the coloured box changes with it, everything below shifts, and the comparison fails on the geometry even though the volatile text was hidden. ## Where the boundary of the option sits Masking is a framing parameter of the capture. It answers the question "which pixels should not participate in this comparison", and it answers it by painting over them before either image exists. - It cannot make a region partially count; a masked box is opaque. - It cannot follow an element that moves; it covers wherever the locator resolves at capture time. - It is not a tolerance mechanism, and it does not interact with how the remaining pixels are compared. ## Choosing a mask colour The default pink is deliberate: on a diff image, a pink rectangle reads instantly as "a human decided to ignore this". Two reasons to override it with `maskColor`: - The page itself uses that pink, so a masked region is indistinguishable from real content. - A masked region sits next to a decorative element and a neutral colour makes the resulting image easier to review, for example `maskColor: '#000000'` over a dark table header. The colour has no effect on the comparison beyond being identical in both images, so any consistent value works. ## A concrete pattern On a bank statement page, three things move between runs: the current balance, the relative timestamp under it, and the transaction ids in the table. All three are locatable, so one masked capture covers the layout, the typography and the chrome of the whole page while ignoring exactly the values that change. The export button, the column headers and the table borders — the parts a visual check exists to protect — stay fully compared.