playwright-best-practices

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

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

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 the AI to the right reference document based on your current activity, so you get focused, correct guidance without loading everything at once. ## Core Features & Use Cases - Activity-Based Reference Routing: 57 reference documents organized into 8 categories (core, debugging, testing patterns, advanced, browser APIs, architecture, frameworks, CI/CD), with a decision tree that maps your task to the right files. - Full Testing Coverage: Guidance for E2E, component, API, visual regression, accessibility (axe-core), security (XSS/CSRF), performance (Web Vitals, Lighthouse), mobile, i18n, Electron, and browser extension testing. - Debugging & Maintenance Workflows: Patterns for fixing flaky tests, using the trace viewer, handling race conditions, refactoring to Page Object Model, and setting up CI/CD pipelines (GitHub Actions, GitLab, Docker, sharding). - Use Case: You ask the AI to "fix this flaky login test" or "add accessibility tests to the checkout flow"—the Skill loads the relevant references (e.g., flaky-tests.md, accessibility.md) and produces code following Playwright best practices. ## Quick Start Ask the AI to write or fix a Playwright test for your scenario, such as "write an E2E test for the checkout flow with mocked payment API," and it will apply the appropriate best-practice patterns.

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. Use auto-retrying assertions like expect(locator).toBeVisible() instead of fixed timeouts, ensure test isolation with fixtures, and investigate failures with the trace viewer via npx playwright show-trace.

How to write accessibility tests with Playwright and axe-core?▼

Install @axe-core/playwright and run AxeBuilder against your page, then assert that results.violations is empty. You can scope analysis to specific elements, disable rules, or wrap it in a fixture with WCAG tags for reuse across tests.

Should I use Page Object Model or fixtures in Playwright?▼

Page Object Model works well for encapsulating complex page interactions, while fixtures are better for shared setup, teardown, and test data. The Skill includes a dedicated reference comparing both patterns to help you choose based on your test suite's structure.

Does Playwright support testing Electron apps and browser extensions?▼

Yes, Playwright supports Electron desktop apps including IPC and main/renderer process testing, and browser extensions including popup, background, and content script testing. The Skill includes dedicated references for both scenarios.

How do I run Playwright tests in CI with sharding?▼

Configure your CI pipeline (GitHub Actions, GitLab, CircleCI, Azure DevOps, or Jenkins) to split tests across machines using Playwright's built-in sharding flags, then merge reports. The Skill covers Docker container setup, parallel execution, and reporting artifacts for each provider.