Five Stable-Locator Anti-Patterns

Recognize brittle UI locator patterns and replace them with semantic roles, stable test ids and scoped assertions.

A selector can pass today and still be designed to fail next week. These are the warning signs.

A locator is not stable because it passed once. It is stable when an unrelated copy, layout or data change cannot redirect it.

The anti-patterns

  • Positional selectors such as :nth-child(3) encode the current layout.
  • Generated classes and framework ids encode implementation details.
  • Unscoped text matches break when the same action appears in two cards.
  • Long CSS ancestry chains make every wrapper a contract.
  • Test ids without a naming policy become as ambiguous as classes.

A durable order of preference

Start with semantic role and accessible name when that is the product contract. Use a stable data-testid for mechanics whose visible copy may change. Scope repeated actions to their card, dialog or row before selecting the control.

The goal is not to ban CSS. It is to make every selector express why this element is the target. Practice the failure mode on the Challenging DOM page, where three ids intentionally regenerate while the useful semantic signal stays put.

Keep reading

Updated

Fun UI Playground — all challenges, bug hunts, getting started, glossary, about.