playwright-frontend
For frontend engineers authoring UI — how to make components reliably locatable by tests and AI agents. Covers the official Playwright locator priority, semantic/accessible markup first, and how to add valid, unique, stable `data-testid` attributes (naming convention, uniqueness in lists, stability rules) for React, Vue, Angular, and Svelte. Use when writing or reviewing components, or when an agent needs durable locators.
How do I install this agent skill?
npx skills add https://github.com/testdino-hq/playwright-skill --skill playwright-frontendIs this agent skill safe to install?
- Gen Agent Trust Hubpass
The skill provides comprehensive guidelines and best practices for frontend engineers to make UI components locatable by Playwright tests and AI agents. It focuses on accessible markup, naming conventions for test IDs, and framework-specific implementation patterns.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
What does this agent skill do?
Playwright Frontend (Authoring Locatable Markup)
Audience: frontend engineers writing the app — the counterpart to the test-author guides in
core/. Your job here is to expose a small, stable, machine-readable contract on the DOM so tests and AI agents can locate elements deterministically, without flakiness.
A data-testid is a public API for your UI's automation layer: once a test or agent depends on it, renaming it is a breaking change. Build accessible markup first, then add deliberate, well-named, unique, stable test IDs where automation needs a durable handle.
Guide Index
| Topic | Guide |
|---|---|
data-testid conventions (when, naming, uniqueness, stability) | data-testid-conventions.md |
| Framework patterns (React, Vue, Angular, Svelte) + centralizing IDs + production stripping | examples.md |
Golden Rules
- Semantic HTML first — give elements a real role/label/accessible name so
getByRole/getByLabelwork; then add test IDs. - Add
data-testidonly where role, label and text fall short — no-role custom widgets, scope containers, list rows, and dynamic or localized regions. A controlgetByRolealready finds uniquely needs none. - Name for global uniqueness —
feature-component-element[-variant],kebab-case. - In lists, suffix with a stable domain key, never the array index —
user-row-${user.id}✅ /user-row-${index}❌. - Decouple the value from text, locale, styling, and DOM position — those change; the test ID must not.
- Standardize on one attribute —
data-testidis Playwright's defaulttestIdAttribute; don't mixdata-test/data-qa.
Related
- core/locators.md / core/locator-strategy.md — the consumer side: choosing locators when writing tests.
- Playwright official docs: Locators, Best Practices.
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/testdino-hq/playwright-skill/playwright-frontend">View playwright-frontend on skillZs</a>