One-click install
npx skills add https://github.com/Zoppy-crm/.github --skill playwright-best-practices-zoppy-crm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-best-practices
Source: https://github.com/Zoppy-crm/.github/tree/main/skills/frontend/playwright-best-practices
Command: npx skills add https://github.com/Zoppy-crm/.github --skill playwright-best-practices-zoppy-crm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a single, practical reference to reduce flakiness, speed up debugging, and standardize Playwright test development so teams can deliver consistent, maintainable test suites.

Core Features & Use Cases

  • Writing & Structure: Guidance for E2E, component, API, visual, accessibility, Electron, and extension tests with recommended project layout and POM patterns.
  • Stability & Debugging: Strategies for flaky test mitigation, assertions & waiting, trace analysis, console monitoring, and race-condition fixes.
  • Infrastructure & CI: Best practices for parallelization, sharding, artifacts, reporters, global setup/storageState, and GitHub Actions/GitLab/Docker integration.
  • Advanced Patterns: Network interception and mocking, clock/time mocking, file uploads/downloads, WebSocket and service worker handling, multi-context flows, and accessibility (axe-core) checks.

Quick Start

Describe the test scenario, target environment (local or CI), and the failure or goal you want Playwright guidance for, e.g., "Help me write a stable E2E test for login that runs in CI and mocks the email verification flow."

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 in CI/CD pipelines?▼

Fix flaky Playwright tests by applying robust locators, explicit assertions, and trace analysis. Isolate tests using proper fixtures, network mocking, and storageState to ensure reproducible parallel execution across your CI/CD infrastructure.

What is the best way to structure a Playwright test suite?▼

Structure a Playwright test suite using the Page Object Model pattern and recommended project layouts. Organize end-to-end, component, API, and accessibility tests with shared fixtures and tagging to maximize maintainability and parallel execution efficiency.

Can I mock network requests and clock time in Playwright tests?▼

Mock network requests and clock time in Playwright tests using advanced interception patterns. Intercept and modify network traffic, mock WebSocket and service worker flows, and control clock/time mocking to test dynamic application states reliably.

Does Playwright support accessibility and visual testing?▼

Playwright supports accessibility and visual testing through integrated axe-core checks and visual comparison patterns. Execute these tests locally or in CI/CD pipelines to identify compliance issues and visual regressions across web, Electron, and extension applications.

How do I configure parallel execution and sharding for Playwright?▼

Configure parallel execution and sharding for Playwright by adjusting worker configurations and utilizing built-in sharding capabilities. Integrate with GitHub Actions, GitLab, or Docker to distribute tests, manage artifacts, and generate reporters efficiently.

Why do my Playwright race conditions cause test failures?▼

Playwright race conditions cause test failures due to improper waiting strategies and shared state. Resolve them by using built-in auto-waiting locators, explicit web-first assertions, and isolated browser contexts to prevent overlapping multi-user scenarios.