mcpField
P
playwright-frontend

playwright-frontend

github.com/testdino-hqDevelopment405203 installsUpdated 2w ago
Repository

About playwright-frontend

A Playwright markup guide for frontend engineers who need stable, machine-readable DOM contracts. It prioritizes semantic and accessible markup, adding unique, durable `data-testid` attributes only when other locators are insufficient.

Key features

  1. 01Define `data-testid` naming conventions
  2. 02Prioritize semantic HTML and accessible names
  3. 03Keep test IDs unique and stable
  4. 04Use stable domain keys for list items
  5. 05Standardize on the `data-testid` attribute

Use cases

  1. 01Design DOM locators for automated tests
  2. 02Add stable test identifiers to custom widgets
  3. 03Reduce test fragility from localization or styling changes
  4. 04Standardize test IDs in React, Vue, Angular, or Svelte

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/testdino-hq/playwright-skill --skill playwright-frontend

After installing, type/playwright-frontendin Claude Code to confirm it loaded.

Bundled filesdata-testid-conventions.mdexamples.md

Details

From the project README

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

TopicGuide
data-testid conventions (when, naming, uniqueness, stability)data-testid-conventions.md
Framework patterns (React, Vue, Angular, Svelte) + centralizing IDs + production strippingexamples.md

Golden Rules

  1. Semantic HTML first — give elements a real role/label/accessible name so getByRole/getByLabel work; then add test IDs.
  2. 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.
  3. Name for global uniqueness — feature-component-element[-variant], kebab-case.
  4. In lists, suffix with a stable domain key, never the array index — user-row-${user.id} ✅ / user-row-${index} ❌.
  5. Decouple the value from text, locale, styling, and DOM position — those change; the test ID must not.
  6. Standardize on one attribute — data-testid is Playwright's default testIdAttribute; don't mix data-test/data-qa.

Related

Comments

Markdown supported