testdino-hqtestdino-hq/playwright-skill/frontend/SKILL.md

playwright-frontend

Skill393 starsChanged 32 days agoMITView on GitHub

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.

In this repository7 other files it gives its agents.
- playwright-ciSkill
- playwright-coreSkill
- playwright-migrationSkill
- playwright-cliSkill
- playwright-pomSkill
- playwright-qaSkill
- playwright-skillSkill

The file

Create a free account to mount

Files

SKILL.md

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/getByLabel work; 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 getByRole already 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-testid is Playwright's default testIdAttribute; don't mix data-test/data-qa.

core/locators.md / core/locator-strategy.md — the consumer side: choosing locators when writing tests.
Playwright official docs: Locators, Best Practices.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free