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.
中文简介正在准备中。当前显示原文说明。
安装前可以查看交给 AI 代理的指令内容。
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.
| 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 |
getByRole/getByLabel work; then add test IDs.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.feature-component-element[-variant], kebab-case.user-row-${user.id} ✅ / user-row-${index} ❌.data-testid is Playwright's default testIdAttribute; don't mix data-test/data-qa.还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
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.
中文简介正在准备中。当前显示原文说明。
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.
中文简介正在准备中。当前显示原文说明。
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.
中文简介正在准备中。当前显示原文说明。
Step-by-step migration guides for moving to Playwright from Cypress or Selenium/WebDriver — command mappings, architecture changes, and incremental adoption strategies.
中文简介正在准备中。当前显示原文说明。
Page Object Model patterns for Playwright — when to use POM, how to structure page objects, and when fixtures or helpers are a better fit.
中文简介正在准备中。当前显示原文说明。
QA engineering workflows on top of Playwright. Use when a QA engineer asks to design test cases from a ticket, PRD or acceptance criteria, decide what to automate, write a bug report from a failing test or trace, convert manual test cases (TestRail, Xray, CSV) into Playwright specs with case-ID traceability, or review Playwright test code and pull requests.
中文简介正在准备中。当前显示原文说明。