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.
- Installs
- 194
- Last 24h
- +10
- Trending rank
- #8637
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/testdino-hq/playwright-skill --skill playwright-frontend- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads playwright-frontend automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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.
FAQ
What does the playwright-frontend skill do?
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 playwright-frontend?
Run npx skills add https://github.com/testdino-hq/playwright-skill --skill playwright-frontend in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/playwright-frontend/ (personal) or .claude/skills/playwright-frontend/ (project).
Which AI agents can use playwright-frontend?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is playwright-frontend safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains playwright-frontend?
It is published by testdino-hq in testdino-hq/playwright-skill. It has 194 recorded installs.
More from testdino-hq/playwright-skill
playwright-skill
testdino-hq/playwright-skill
Battle-tested Playwright patterns for writing, debugging, and scaling reliable test suites. Use when you need guidance for E2E, API, component, visual, accessibility, or security testing, plus CI/CD, CLI automation, page objects, and migration from Cypress or Selenium. TypeScript and JavaScript.
playwright-core
testdino-hq/playwright-skill
Battle-tested Playwright patterns for writing and debugging reliable E2E, API, component, visual, accessibility, and security tests. Use when you need locator strategy, assertions, fixtures, network mocking, auth flows, trace debugging, or framework recipes for React, Next.js, Vue, and Angular. TypeScript and JavaScript.
playwright-cli
testdino-hq/playwright-skill
Automates browser interactions for testing and validating your own web applications using playwright-cli. Use when you need terminal-first browser control for navigation, form filling, screenshots, tracing, bound browser sessions, debugging, or generating Playwright test code. Only use against applications you own or have explicit authorization to test.
playwright-pom
testdino-hq/playwright-skill
Open the skill to read its SKILL.md instructions.
playwright-ci
testdino-hq/playwright-skill
Production-ready CI/CD configurations for Playwright — GitHub Actions, GitLab CI, CircleCI, Azure DevOps, Jenkins, Docker, parallel sharding, reporting, code coverage, and global setup/teardown.
playwright-migration
testdino-hq/playwright-skill
Step-by-step migration guides for moving to Playwright from Cypress or Selenium/WebDriver — command mappings, architecture changes, and incremental adoption strategies.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.