playwright-best-practices

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

Updated Mar 14, 2026
One-click install
npx skills add https://github.com/Ishaq74/atomic --skill playwright-best-practices-ishaq74
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright-best-practices
Source: https://github.com/Ishaq74/atomic/tree/main/.github/skills/playwright-best-practices
Command: npx skills add https://github.com/Ishaq74/atomic --skill playwright-best-practices-ishaq74

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 them wrong leads to flaky, slow, unmaintainable suites. This Skill routes the AI to the right reference document for your current testing activity so you get focused, correct guidance. ## Core Features & Use Cases - Activity-Based Routing: Maps your task (writing E2E tests, fixing flaky tests, setting up CI/CD, mocking APIs) to one of 57 reference documents across 8 categories. - Comprehensive Coverage: Covers E2E, component, API, visual regression, accessibility (axe-core), security, performance, i18n, Electron, and browser extension testing. - Use Case: You ask the AI to "fix this flaky login test" or "add accessibility tests to the checkout flow"—the Skill loads the flaky-tests or accessibility references 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 login flow with proper locators and assertions."

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 diagnosed using the flaky-tests and debugging references, which cover race conditions, state leaks between tests, and improper waits. Replace explicit waits with auto-retrying assertions and run tests with --repeat-each to verify stability.

How to write Playwright E2E tests with best practices?

Use role-based locators like getByRole and getByLabel instead of CSS selectors, rely on auto-waiting assertions, and structure tests with fixtures or Page Object Model. The Skill's core references cover test structure, locators, and assertions in detail.

Does Playwright support accessibility testing with axe-core?

Yes, Playwright integrates with @axe-core/playwright to run accessibility scans. The accessibility reference covers AxeBuilder setup, WCAG tag filtering, keyboard navigation tests, ARIA validation, and focus management.

Should I use Page Object Model or fixtures in Playwright?

The Skill includes a dedicated pom-vs-fixtures reference for this decision. Fixtures suit shared setup and teardown logic, while Page Object Model works better for encapsulating complex page interactions across many tests.

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

The infrastructure references cover GitHub Actions, GitLab CI, CircleCI, Azure DevOps, Jenkins, and Docker setups. They include sharding for parallel execution, test reporting, artifact collection, and global setup/teardown configuration.

Can Playwright test Electron apps and browser extensions?

Yes, the Skill includes dedicated references for Electron desktop apps covering IPC and main/renderer processes, and for browser extensions covering popups, background scripts, and content scripts.