playwright-best-practices

Guides writing, debugging, and structuring Playwright tests across E2E, component, and API scenarios.

2|1|Updated Jun 9, 2026
One-click install
npx skills add https://github.com/zester4/zilmate --skill playwright-best-practices-zester4
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright-best-practices
Source: https://github.com/zester4/zilmate/tree/main/.agents/skills/playwright-best-practices
Command: npx skills add https://github.com/zester4/zilmate --skill playwright-best-practices-zester4

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Playwright test suites often suffer from flaky tests, brittle selectors, poor structure, and slow CI pipelines. This Skill provides organized, activity-based guidance so you can quickly find the right patterns for writing, debugging, and maintaining Playwright tests without searching scattered documentation. ## Core Features & Use Cases - Activity-Based Reference Routing: A decision tree and lookup tables map your current task (writing E2E tests, fixing flaky tests, setting up CI/CD) to the exact reference file you need. - Comprehensive Coverage: Covers E2E, component, API, visual regression, accessibility, security, mobile, Electron, and browser extension testing, plus authentication, network mocking, and multi-user flows. - Infrastructure Guidance: Includes patterns for CI/CD (GitHub Actions, GitLab, Docker), parallel sharding, global setup/teardown, test tags, and performance optimization. - Use Case: Your tests pass locally but flake in CI with multiple workers. Consult the flaky tests and performance references to fix test isolation, then configure sharding for faster parallel runs. ## Quick Start Ask the assistant to help you write a Playwright E2E test with proper locators and assertions, or to diagnose why a specific test is flaky.

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 usually stem from race conditions, improper waits, or state leaking between tests. Replace explicit waits with auto-waiting assertions, ensure test isolation through fixtures, and investigate parallel execution issues when flakiness only appears with multiple workers.

How do I structure Playwright tests with Page Object Model?

Page Object Model in Playwright encapsulates page locators and actions into reusable classes, keeping tests readable and maintainable. The skill also covers when to prefer fixtures over POM, since Playwright fixtures often handle setup and composition more idiomatically.

Should I use Page Object Model or fixtures in Playwright?

Playwright fixtures are generally preferred for shared setup and dependency injection, while POM works well for modeling complex page interactions. The skill includes a dedicated reference comparing both approaches to help you choose based on your test architecture.

How do I mock API responses in Playwright tests?

Playwright mocks API responses using route interception, letting you fulfill requests with custom JSON, abort them to simulate failures, or record and replay HAR files. This covers REST and GraphQL endpoints plus third-party services like payments and OAuth.

Does Playwright support testing Electron apps and browser extensions?

Yes, Playwright supports Electron application testing and browser extension testing with dedicated APIs. The skill includes specific references for both, covering launch configuration, extension loading, and interaction patterns unique to these targets.

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

CI-only failures typically come from parallel worker resource contention, missing test isolation, timing differences, or environment configuration gaps. Check sharding setup, worker-scoped fixtures for data isolation, and trace viewer output from CI artifacts to diagnose the root cause.