skills.rest
whitebeardit
whitebearditOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-qa-friendly

Guide frontend markup to use semantic HTML and data-testid attributes for stable Playwright testing.

12|6|Updated Jan 26, 2026
Search Tags:#testing#accessibility#frontend#qa#playwright#selectors
One-click install
npx skills add https://github.com/whitebeardit/.cursor --skill frontend-qa-friendly
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-qa-friendly
Source: https://github.com/whitebeardit/.cursor/tree/main/skills/qa/skill-frontend-qa-friendly
Command: npx skills add https://github.com/whitebeardit/.cursor --skill frontend-qa-friendly

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about frontend-qa-friendly

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I stop Playwright tests from breaking when the DOM structure changes?▼

Playwright test flakiness is often caused by relying on DOM position or style-based classes. Guide frontend development to use semantic HTML, accessible roles, and `data-testid` attributes for stable, efficient element selection.

What is the best way to select elements in frontend QA automation?▼

The best selector strategy for frontend QA prioritizes semantic HTML and accessible roles for robust identification. It recommends `data-testid` attributes as a fallback for unambiguous targeting when semantic selectors are insufficient.

Do I need `data-testid` attributes for all elements to make frontend testing reliable?▼

No, `data-testid` attributes are not required for all elements. Prioritize semantic HTML, accessible roles, and labels for robust identification, reserving `data-testid` for elements lacking clear accessible names to ensure stable Playwright targeting.

How do I build a user registration form that QA engineers can easily automate?▼

To build a user registration form for easy QA automation, ensure all inputs have associated accessible labels. Add `data-testid` attributes to elements lacking clear accessible names so automated tests can reliably target fields and buttons.

Why do my automated frontend tests fail after minor CSS updates?▼

Automated frontend tests fail after minor CSS updates because they rely on style-based classes or DOM position. By using semantic HTML and `data-testid` attributes, you create stable selectors that are independent of styling.

Related Skills

Explore More Software Engineering Skills→
CodySwannGTCodySwannGT
3

playwright-selectors

Define Playwright selector best practices for Expo web apps using testID and aria-label.

Community
Basic
nroze22nroze22
1

playwright-test-generation

Generate Playwright test scripts for the Talosix EDC platform using Page Object Model and data-testid selectors.

Community
Advanced
nguyenthienthanhnguyenthienthanh
24

qa-expert

Provide QA guidance for test planning, coverage, and CI/CD workflows.

Community
Basic
wsbaserwsbaser

wsbaser:xcss-selectors

Construct XCSS selectors from HTML markup and CSS/XPath for UnionInit attributes.

Community
Intermediate