playwright-best-practices

Guides writing, debugging, and maintaining Playwright tests in TypeScript across E2E, API, and component testing.

Updated May 22, 2026
One-click install
npx skills add https://github.com/viniciuscs84/sdd-toolkit --skill playwright-best-practices-viniciuscs84
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright-best-practices
Source: https://github.com/viniciuscs84/sdd-toolkit/tree/main/skills/playwright-best-practices
Command: npx skills add https://github.com/viniciuscs84/sdd-toolkit --skill playwright-best-practices-viniciuscs84

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing and maintaining Playwright tests involves many decisions—locator strategy, waiting behavior, fixtures, mocking, CI setup—and mistakes lead to flaky, slow, or brittle suites. This Skill routes the AI to the right reference document for the task at hand so tests follow proven patterns instead of ad-hoc guesses. ## Core Features & Use Cases - Activity-based routing: Maps what you are doing (writing E2E tests, fixing flaky tests, setting up CI/CD, mocking APIs) to one or more of 57 focused reference documents across 8 categories. - Broad coverage: Includes guidance for accessibility (axe-core), visual regression, mobile emulation, WebSockets, authentication flows, Electron apps, browser extensions, i18n, security testing, and performance budgets. - Framework-specific patterns: Dedicated references for React, Angular, Vue, and Next.js, including Angular Material locators and Protractor migration mappings. - Use Case: You ask the AI to fix a flaky login test; the Skill directs it to the flaky-tests, debugging, and assertions-waiting references so it applies auto-waiting assertions and test isolation fixes rather than adding arbitrary sleeps. ## Quick Start Ask the AI to write or fix a Playwright test, such as "add accessibility tests for the checkout page" or "fix this flaky login test", and the Skill will load the relevant best-practice references automatically.

Frequently Asked Questions about playwright-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix flaky Playwright tests?

Flaky Playwright tests are usually fixed by replacing explicit waits with auto-retrying assertions, ensuring test isolation through fixtures, and diagnosing race conditions with the trace viewer. The Skill routes flaky-test questions to dedicated debugging references covering detection, quarantine, and parallel-run issues.

What locator strategy should I use in Playwright?

Playwright best practice is to use role-based locators like getByRole and getByLabel instead of CSS classes or framework-generated attributes. These survive refactors and work with component libraries such as Angular Material, whose internal attributes change every build.

Does Playwright support accessibility testing with axe-core?

Yes, Playwright integrates with @axe-core/playwright to run accessibility scans inside tests. You can analyze full pages or scoped regions, disable specific rules, and wrap AxeBuilder in a fixture so every test can assert zero WCAG violations.

Can I use Playwright for API testing without a browser?

Yes, Playwright's request fixture performs HTTP calls without launching a browser, making API tests 10-100x faster than E2E tests. It supports CRUD operations, multipart uploads, authenticated contexts, and schema validation with libraries like Zod.

How do I run Playwright tests in CI/CD pipelines?

Playwright runs in CI through dedicated references for GitHub Actions, GitLab CI, CircleCI, Azure DevOps, and Jenkins, plus Docker container setup. The Skill covers sharding, parallel execution, retries, and artifact reporting for pipeline configuration.

When should I use Page Object Model versus fixtures in Playwright?

Page Object Model suits encapsulating page interactions, while fixtures handle shared setup, teardown, and test data. The Skill includes an architecture reference comparing both patterns so you can choose based on suite size and reuse needs.