skills.rest
Tgoldi
TgoldiCOMMUNITY
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.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing and maintaining Playwright test suites involves many decisions—locator strategy, waiting behavior, fixtures, CI configuration, mocking, and framework-specific patterns—and getting any of them wrong leads to flaky, slow, or brittle tests. This Skill routes the AI to the right reference document for the task at hand so Playwright tests follow proven best practices. ## Core Features & Use Cases - Activity-based reference routing: Maps what you are doing (writing E2E tests, fixing flaky tests, setting up CI/CD, testing accessibility) to one or more of 57 focused reference documents across 8 categories. - Broad coverage: Covers E2E, component, API, visual regression, accessibility (axe-core), security, performance, i18n, Electron, browser extension, mobile, WebSocket, and multi-user testing, plus framework guides for React, Angular, Vue, and Next.js. - Debugging and infrastructure guidance: Includes flaky-test diagnosis, trace viewer usage, console error monitoring, sharding, Docker, GitHub Actions/GitLab CI setup, and a test validation loop for verifying changes. - Use Case: You ask the AI to "fix this flaky login test" or "add accessibility tests to the checkout flow" and it loads the relevant references (flaky-tests.md, accessibility.md) to produce standards-compliant 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 checkout flow with accessibility checks," and it will apply the matching best-practice references.

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 usually caused by brittle locators, missing auto-waiting assertions, race conditions, or state leaking between tests. The skill's flaky-tests reference covers detection, diagnosis, quarantine, and fixes, including isolation issues that only appear with parallel workers.

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, disabling specific rules, WCAG tag filtering, keyboard navigation, ARIA states, and focus management testing.

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

Both patterns are valid and the skill includes a dedicated pom-vs-fixtures reference for choosing between them. Page Object Model encapsulates page structure, while fixtures handle setup, teardown, and shared state; many suites combine both.

Does Playwright support testing Electron apps and browser extensions?▼

Yes, Playwright supports Electron desktop apps including IPC and main/renderer process testing, and browser extensions including popup, background, and content script testing. The skill provides dedicated references for both scenarios.

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

The skill covers GitHub Actions, GitLab CI, CircleCI, Azure DevOps, and Jenkins setup, plus Docker container configuration, sharding for parallel execution, and reporting artifacts. It recommends running tests against production builds rather than dev servers in CI.

When should I mock APIs versus using real services in Playwright tests?▼

The skill's when-to-mock reference guides this decision: mock third-party services like payments, OAuth, and email/SMS to avoid external dependencies, but prefer real services for core application flows. Network interception and HAR recording patterns are covered in the network-advanced reference.

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
JaiminVadadoriyaJaiminVadadoriya
1

qa-dashboard

Generate test reports and dashboards with Allure, Grafana, and ReportPortal.

Community
Advanced
speednet-softwarespeednet-software
21

code-review-test-analyzer

Analyze code changes to identify critical gaps in test coverage.

Official
Advanced
testdino-hqtestdino-hq
347

playwright-migration

Convert Cypress or Selenium/WebDriver tests into Playwright test suites.

Official
Intermediate