playwright-best-practices

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

Updated May 14, 2026
One-click install
npx skills add https://github.com/jesusprodriguezUnir/bracketMundial --skill playwright-best-practices-jesusprodriguezunir
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-best-practices
Source: https://github.com/jesusprodriguezUnir/bracketMundial/tree/main/.agents/skills/playwright-best-practices
Command: npx skills add https://github.com/jesusprodriguezUnir/bracketMundial --skill playwright-best-practices-jesusprodriguezunir

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing reliable Playwright tests requires knowing dozens of patterns—locators, auto-waiting, fixtures, mocking, CI setup—and getting any of them wrong leads to flaky, slow, or brittle test suites. This Skill routes your current testing activity to the right reference document so the AI applies proven Playwright practices instead of generic guesses. ## Core Features & Use Cases - Activity-Based Reference Routing: Maps what you are doing (writing E2E tests, fixing flaky tests, setting up CI/CD, mocking APIs) to the right file among 57 reference documents across 8 categories. - Comprehensive Coverage: Includes guidance for E2E, component, API, visual regression, accessibility (axe-core), security, performance, mobile, i18n, Electron, and browser extension testing, plus framework-specific patterns for React, Angular, Vue, and Next.js. - Debugging & Infrastructure Guidance: Provides decision trees and references for flaky test diagnosis, trace viewer usage, sharding, Docker, GitHub Actions, GitLab CI, and test coverage. - Use Case: You ask the AI to fix a flaky login test that fails only in CI; the Skill directs it to the flaky-tests, fixtures-hooks, and performance references so it addresses test isolation and parallel worker state rather than adding arbitrary waits. ## 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 apply the relevant best practices 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 caused by race conditions, missing auto-waiting assertions, or state leaking between tests. The Skill routes you to references on flaky test diagnosis, locator robustness, and fixture-based isolation, including issues that only appear with parallel workers.

How to write Playwright tests with Page Object Model?▼

Page Object Model in Playwright encapsulates page interactions in classes so tests stay readable and maintainable. The Skill includes references on POM structure, when to prefer fixtures over POM, and how to combine both patterns in a test suite.

Does Playwright support accessibility testing with axe-core?▼

Yes, Playwright integrates with @axe-core/playwright to run accessibility scans inside tests. The Skill covers AxeBuilder setup, scoped analysis, WCAG tag filtering, keyboard navigation checks, ARIA state verification, and CI gating for a11y violations.

Can I use Playwright for API testing without a browser?▼

Yes, Playwright's request fixture performs direct HTTP calls without launching a browser, making API tests 10-100x faster than E2E tests. The Skill covers authenticated request contexts, CRUD validation, error response testing, schema validation with Zod, and API-based data seeding.

How do I set up Playwright in CI/CD pipelines?▼

Playwright CI setup involves installing browsers, configuring retries and workers, and uploading trace artifacts. The Skill provides references for GitHub Actions, GitLab CI, CircleCI, Azure DevOps, Jenkins, Docker containers, and parallel sharding strategies.

Why do Playwright tests pass locally but fail in CI?▼

This usually stems from environment differences, missing environment variables, different database state, or timing under parallel workers. The Skill recommends using process.env for secrets, global setup for migrations, unique test data identifiers, and verifying the CI baseURL matches the deployed service.