playwright codegen selectors too brittle: how to harden

TL;DR

Codegen records whatever selector works once, which is usually the most brittle option. Replace generated selectors with role-based locators: getByRole, getByLabel, and getByTestId, in that order. Delete any nth() index you can, and turn on strict mode so ambiguous matches fail loudly instead of clicking the wrong thing.

The query

playwright codegen selectors too brittle: how to harden

Use this when

• A recorded test breaks after a harmless CSS or text change
• Selectors contain long CSS chains, generated class names, or positional indexes
• You are inheriting a suite of recorded tests that nobody maintains

Not for

• Writing new tests by hand (start with role locators directly)
• API or unit testing
• Screenshot comparison flakiness

Steps

1. Run the recorded test and list every locator. Open the generated file and highlight selectors with CSS chains, :nth-child, or text that changes often.

Expected output: a marked-up copy of the spec with each brittle locator flagged.

1. Replace with role-based locators. Swap CSS selectors for getByRole with an accessible name, falling back to getByLabel or getByTestId where no good role exists.

Expected output: the spec rewritten so every interaction uses a semantic locator.

1. Remove positional indexes. Any nth() or first()/last() that is not semantically meaningful gets replaced with a named locator or a test id.

Expected output: zero positional selectors left in the spec, verified by search.

1. Enable strict mode violations as failures. Strict mode makes Playwright throw when a locator matches more than one element, which catches ambiguity early.

Expected output: the config with strict mode on and a passing run proving no locator is ambiguous.

1. Re-run against a restyled page. Change a class name or button text and confirm the test still passes.

Expected output: a green run after a cosmetic change that would have broken the old selectors.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_DGmQ6yhYJ0ZxRGMwR40H9g