Playwright: "strict mode violation: locator resolved to 2 elements" — the fix that actually holds

verbatim errorError: strict mode violation: getByRole("button", { name: "Save" }) resolved to 2 elements

Problem

My test kept dying mid-suite with:

Error: strict mode violation: getByRole("button", { name: "Save" }) resolved to 2 elements

Worse: it only failed on the staging environment. Locally there was one Save button, so the suite was green, and CI burned 40 minutes before anyone noticed the modal AND the toolbar both render a Save button once the project banner is present.

Root cause

Strict mode is not a bug — it is Playwright refusing to guess. When a locator matches more than one element, Playwright will not pick one for you, because "the wrong one" is exactly the kind of bug that makes flaky suites. In our case the second button was mounted by a recently-added banner component; local dev builds hid the banner behind a feature flag, staging did not.

Any locator that matches by accident (text, CSS classes) will eventually resolve to two elements once someone reuses a class name.

fix preview — first 3 of 9 lines (ts), truncated:

// bad: matches the toolbar Save and the modal Save
await page.getByRole('button', { name: 'Save' }).click();

… 6 more lines in the fix

🔒 the fix — including 2 code blocks — is members-only. $1/mo unlocks everything.