A Playwright aria snapshot of a bank statement page fails every run because the balance figures change, so how do you stabilize it?

## Why the template is flapping A statement page is mostly volatile content: a closing balance that moves, dates that roll, a transaction table whose row count depends on the account. If the template was generated from a live page and committed as-is, it recorded all of that as an expectation, and every run now compares today's figures with the day the template was written. Nothing is wrong with the matcher; the template is asserting things the test never meant to assert. Separate the lines before touching any of them: 1. **Genuinely volatile**, such as the closing balance or the statement period, which differ on every run and must never be asserted literally. 2. **Stable but incidental**, such as a marketing strapline in the page header, which changes rarely but is nothing this test defends. 3. **Contractual**, such as the export control's name and the transactions table, which is the reason the assertion exists. Three tactics fix the first two groups, and a good answer uses them together. ## 1. Relax volatile values into regular expressions A name or a text node can be a regular expression written between slashes, so the shape of the value is asserted and its content is not: ```yaml - region "Balance": - heading "Balance" [level=2] - text: /Closing balance: \$[0-9,.]+/ - table "Transactions" ``` Two further relaxations are available when even the shape moves: - **Drop the value entirely.** A bare `- table` keeps the control and its position while letting the caption be reworded freely. - **Drop the node.** Anything the test does not defend can simply be absent from the template, since the expectation asserts what it names and nothing more. ## 2. Scope the locator to the region under test Pointing the assertion at `page.locator('body')` puts the header, navigation, cookie banner and footer inside the expectation, so every unrelated edit anywhere on the site rewrites the statement test's template. Scope it to what the test is about: - `page.getByRole('main')` for a page-level structural check. - `page.getByRole('region', { name: 'Balance' })` for a widget-level one. Narrow scope is the single highest-leverage change, because it removes whole classes of churn rather than patching individual lines. ## 3. Make the data deterministic where it should be Some volatility is a test-data problem rather than a template problem. A statement seeded with a fixed set of transactions, or served from a stubbed response, gives an exact template that genuinely defends the row structure. That is a heavier setup, so reserve it for the surface where exact content matters and use regular expressions elsewhere. ## Escaping, the gotcha that wastes an afternoon Inline templates are JavaScript template literals, and a backslash is consumed by the string literal before the matcher ever sees it: `\d` inside backticks becomes a plain `d`, so the regex silently stops meaning "a digit". Either double it, `\\d`, or sidestep the problem by writing character classes without backslashes, `[0-9,.]+`, or by moving the template into a `.yml` file where no JavaScript escaping applies. ## Choosing between the tactics | Tactic | Keeps defending | Costs | | --- | --- | --- | | Regex value | The shape of the text, e.g. a currency figure | Slightly weaker assertion, easy to over-relax | | Bare role, no name | The control's existence and position | Renames stop failing | | Tighter locator | Everything, on a smaller surface | Content outside the region is unwatched | | Deterministic data | Exact names and row structure | Seeding or stubbing setup to maintain | ## The trap to avoid The tempting fix is to regenerate the template on every failure, which is not a fix at all: the test becomes a record of the last run and fails again tomorrow. The second tempting fix is deleting the assertion, which trades a noisy check for no check. The right instinct is to decide what the test is actually defending on this page, usually "the balance widget, the transactions table and the export control are all present, named and correctly nested", and to write a template that says exactly that.