skills.rest
malinovskiy-makar
malinovskiy-makarCOMMUNITY
Explore all skills by this author →
GitHub

playwright-best-practices

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

Updated Jun 13, 2026
Search Tags:#ci/cd#test automation#flaky tests#playwright#e2e testing#accessibility testing#page object model
One-click install
npx skills add https://github.com/malinovskiy-makar/qls --skill playwright-best-practices-malinovskiy-makar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-best-practices
Source: https://github.com/malinovskiy-makar/qls/tree/main/.claude/skills/playwright-best-practices
Command: npx skills add https://github.com/malinovskiy-makar/qls --skill playwright-best-practices-malinovskiy-makar

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test, @axe-core/playwright, zod, and includes references (resource) components.

What problem does it solve? Writing and maintaining Playwright test suites involves dozens of decisions—locator strategies, waiting patterns, mocking, CI configuration, flaky test debugging—and getting any of them wrong leads to slow, brittle tests. This Skill provides structured, activity-based guidance so you apply proven patterns instead of reinventing them. ## Core Features & Use Cases - Activity-Based Reference Routing: A decision tree and lookup tables map your current task (writing E2E tests, fixing flaky tests, configuring CI/CD, mocking APIs) directly to the right reference file. - Comprehensive Coverage: References span core patterns (locators, assertions, fixtures, Page Object Model), testing patterns (API, GraphQL, accessibility, visual regression, security), browser APIs (WebSockets, geolocation, service workers), frameworks (React, Angular, Vue, Next.js), and infrastructure (GitHub Actions, GitLab CI, Docker, sharding). - Debugging & Anti-Pattern Guidance: Dedicated references for flaky tests, race conditions, console errors, and timeout issues, each with concrete anti-pattern tables and fixes. - Use Case: You are migrating a Protractor suite to Playwright for an Angular app. The Skill routes you to the Angular framework reference with a Protractor-to-Playwright mapping table, Material component locator strategies, and CI build configuration. ## Quick Start Ask the assistant to help you write or fix a Playwright test, describing your scenario such as "write an accessible login test with API mocking" or "debug my flaky checkout test."

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, explicit waits, or shared state between tests. Replace waitForTimeout with auto-retrying web-first assertions, ensure test isolation through fixtures, and use the trace viewer to inspect failures.

What locator strategy should I use in Playwright?▼

Prefer role-based locators like getByRole and getByLabel, which mirror how users and assistive technology perceive the page. Avoid CSS classes and framework-internal attributes such as Angular's _ngcontent, which change between builds.

How do I mock API responses in Playwright tests?▼

Use page.route to intercept network requests and fulfill them with custom JSON responses, status codes, or delays. For GraphQL, match requests by operation name, and use HAR recording for replaying complex real network traffic.

Does Playwright support accessibility testing with axe-core?▼

Yes, the @axe-core/playwright package integrates AxeBuilder into tests to scan pages for WCAG violations. You can scope analysis to specific elements, disable rules, and wrap it in a fixture for reuse across a suite.

How do I run Playwright tests in CI with GitHub Actions?▼

Configure a workflow that installs browsers with npx playwright install --with-deps, runs tests, and uploads the HTML report as an artifact. Use sharding to split tests across parallel jobs and retries only in CI.

When should I use Page Object Model versus fixtures in Playwright?▼

Use Page Object Model to encapsulate page structure and interactions when pages have complex, reusable UI logic. Use fixtures for shared setup, authentication state, and test data; the two patterns combine well rather than compete.

Related Skills

Explore More Software Engineering Skills→
bouwerpbouwerp

playwright-browser-automation

Automate cross-browser end-to-end testing with Playwright and @playwright/test.

Community
Advanced
OM-bit-hubOM-bit-hub

ci-test-pipeline

Automate CI/CD pipeline setup with parallel test runs and coverage reporting.

Community
Advanced
WebWakaHubWebWakaHub
20

Performance Benchmarker

Assesses system performance bottlenecks via load, stress, and soak testing; recommends optimizations and tracks metrics like Core Web Vitals and SLA validation.

Official
Advanced
JaiminVadadoriyaJaiminVadadoriya
1

playwright-migration

Map Cypress or Selenium commands to Playwright for incremental migration.

Community
Advanced