Como usar
- Copie o comando e verifique o pacote antes de instalar no seu ambiente de agente.
- Consulte no original as ferramentas, credenciais e ambientes necessários.
- Descreva os dados de entrada e a entrega esperada; confira a saída com as fontes.
npx skills add https://github.com/testdino-hq/playwright-skill --skill playwright-frontendAntes de começar
- A instalação não inclui assinatura de modelo, franquia API ou acesso aos seus arquivos.
- Estrelas e instalações indicam atividade, não um teste independente de qualidade ou segurança.
Documento original do Skill
Renderizado do repositório de origem, preservando títulos, exemplos, código, tabelas, links e imagens.
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-testid` only where role, label and text fall short — no-role custom widgets, scope containers, list rows, and dynamic or localized regions. A control
getByRolealready 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.
