frontend-qa-friendly

What problem does it solve?

This Skill addresses the challenge of creating frontend code that is difficult for automated testing tools (like Playwright) to locate and interact with, leading to brittle and flaky tests.

Core Features & Use Cases

• Semantic HTML Guidance: Promotes the use of accessible roles and labels for robust element identification.
• Stable Selector Strategy: Recommends data-testid attributes for unambiguous targeting when semantic selectors are insufficient.
• Use Case: When developing a new user registration form, apply these guidelines to ensure that QA engineers can reliably target input fields, labels, and the submit button, preventing test failures due to minor UI changes.

Quick Start

Ensure all form inputs have associated labels and use data-testid attributes for elements that lack clear accessible names.