selector-strategies

What problem does it solve?

This Skill helps teams reduce flaky Playwright tests by teaching resilient, accessibility-first selectors that stay stable as the UI changes. It focuses on semantic locators over brittle CSS or XPath and encourages accessibility-minded test engineering practices.

Core Features & Use Cases

• Accessibility-first selectors using getByRole, getByLabel, and getByPlaceholder to improve test stability and readability.
• A clear priority hierarchy that guides testers away from brittle selectors and towards robust options.
• Practical scenarios including form testing, navigation, dynamic content, and migration between testing frameworks.

Quick Start

• Use getByRole for interactive elements like buttons and links.
• Prefer getByLabel for inputs with visible labels; fall back to getByPlaceholder when labels are absent.
• Use getByText cautiously for static, unique content; if not reliable, use getByTestId as a last resort.
• Examples: page.getByRole('button', { name: 'Submit' }).click(); page.getByLabel('Email').fill('user@example.com'); page.getByPlaceholder('Enter your email').fill('user@example.com');