playwright-best-practices

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

1|Updated Apr 3, 2026
One-click install
npx skills add https://github.com/TierOne-Studio/spa-velocity --skill playwright-best-practices-tierone-studio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright-best-practices
Source: https://github.com/TierOne-Studio/spa-velocity/tree/main/.ruler/skills/playwright-best-practices
Command: npx skills add https://github.com/TierOne-Studio/spa-velocity --skill playwright-best-practices-tierone-studio

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 for your current testing 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), mapped to your current task via a decision tree. - Full testing coverage: E2E, component, API, visual regression, accessibility (axe-core), security, performance, mobile, i18n, Electron, and browser extension testing patterns. - Debugging and flakiness workflows: Guidance for trace viewer usage, flaky test diagnosis, race conditions, console error monitoring, and test isolation. - 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 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 trace viewer and fixed by replacing explicit waits with auto-retrying assertions, using robust role-based locators, and ensuring test isolation through fixtures. The skill's flaky-tests reference covers detection, race conditions, and quarantine strategies.

How do I write accessibility tests with Playwright and axe-core?

Install @axe-core/playwright and run AxeBuilder against the page, then assert that the violations array is empty. The skill covers scoped analysis, WCAG tag filtering, custom fixtures, keyboard navigation, ARIA states, and focus management testing.

Should I use Page Object Model or fixtures in Playwright?

The skill includes a dedicated architecture reference comparing POM versus fixtures. POM suits encapsulating page interactions, while fixtures handle setup, teardown, and shared state; many suites combine both depending on test complexity.

Does Playwright support testing Electron apps and browser extensions?

Yes, the skill includes references for Electron testing covering IPC and main/renderer processes, and browser extension testing covering popups, background scripts, and content scripts. Both use Playwright's specialized launch and context APIs.

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

The skill covers GitHub Actions, GitLab CI, CircleCI, Azure DevOps, Jenkins, and Docker-based setups. It also addresses sharding, parallel execution, reporting artifacts, and test coverage configuration for CI environments.

What are the limitations of automated accessibility testing with axe-core?

Automated axe-core scans miss many accessibility issues that require manual verification, such as meaningful reading order and screen reader interaction quality. The skill recommends combining automated checks with periodic manual testing using VoiceOver or NVDA.