skills.rest
ZawilecxD
ZawilecxDCOMMUNITY
Explore all skills by this author →
GitHub

playwright-best-practices

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

Updated May 20, 2026
Search Tags:#typescript#ci/cd#test automation#flaky tests#playwright#e2e testing#accessibility testing
One-click install
npx skills add https://github.com/ZawilecxD/trAInR --skill playwright-best-practices-zawilecxd
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-best-practices
Source: https://github.com/ZawilecxD/trAInR/tree/main/.agents/skills/playwright-best-practices
Command: npx skills add https://github.com/ZawilecxD/trAInR --skill playwright-best-practices-zawilecxd

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 inconsistent CI/CD configuration. This Skill routes the AI to the right reference document for your current testing activity, so you get focused, correct guidance instead of generic advice. ## Core Features & Use Cases - Activity-Based Reference Routing: 57 reference documents organized into 8 categories (core, debugging, testing patterns, advanced, browser APIs, architecture, frameworks, infrastructure/CI-CD), mapped to your current task via a decision tree. - Comprehensive Coverage: E2E, component, API, visual regression, accessibility (axe-core), security, performance, mobile, i18n, Electron, and browser extension testing patterns. - Debugging & Maintenance: Guidance for fixing flaky tests, using the trace viewer, handling race conditions, and refactoring to Page Object Model. - 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 best-practice Playwright TypeScript code. ## 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, ensuring test isolation through fixtures, and addressing race conditions. The flaky-tests.md reference covers detection, diagnosis, and quarantine strategies.

How to write accessibility tests with Playwright and axe-core?▼

Install @axe-core/playwright and run AxeBuilder against a page to detect WCAG violations, then assert the violations array is empty. The skill also covers keyboard navigation, ARIA state verification, focus management, and high-contrast mode testing.

Does Playwright support testing Angular, React, Vue, and Next.js apps?▼

Yes, the skill includes framework-specific references for React, Angular, Vue/Nuxt, and Next.js. These cover framework idioms like Angular Material locators, lazy-loaded routes, SSR hydration checks, and Protractor migration mappings.

Should I use Page Object Model or fixtures in Playwright?▼

The skill includes a dedicated architecture reference comparing POM versus fixtures to help you choose based on your test suite's needs. It also covers test type selection and when to mock versus using real services.

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

The skill provides references for GitHub Actions, GitLab CI, CircleCI, Azure DevOps, Jenkins, and Docker container setup. It also covers sharding, parallel execution, reporting, and test coverage configuration for CI environments.

Can Playwright test Electron apps and browser extensions?▼

Yes, dedicated references cover Electron desktop app testing including IPC and main/renderer processes, plus browser extension testing for popups, background scripts, and content scripts.

Related Skills

Explore More Software Engineering Skills→
spencerpaulyspencerpauly
672

adding-e2e-tests

Set up Playwright end-to-end testing with smoke tests and GitHub Actions.

Community
Intermediate
OM-bit-hubOM-bit-hub

ci-test-pipeline

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

Community
Advanced
manastalukdarmanastalukdar
1

pipeline-monitor

Analyze CI/CD pipeline build success rates, flaky tests, and duration trends.

Community
Advanced
badhopebadhope

e2e-test

Automate end-to-end user flow testing across Playwright, Cypress, and Selenium.

Community
Advanced