playwright-best-practices

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

28|1|Updated Mar 15, 2026
One-click install
npx skills add https://github.com/NauelG/astro-blocks --skill playwright-best-practices-nauelg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-best-practices
Source: https://github.com/NauelG/astro-blocks/tree/main/.agents/skills/playwright-best-practices
Command: npx skills add https://github.com/NauelG/astro-blocks --skill playwright-best-practices-nauelg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing reliable Playwright tests requires knowing dozens of patterns—locators, auto-waiting, fixtures, mocking, CI setup—and getting any of them wrong leads to flaky, slow, or brittle test suites. This Skill routes the AI to the right reference document for your current task so you get focused, correct guidance instead of generic advice. ## Core Features & Use Cases - Activity-Based Routing: A decision tree and reference tables map your current activity (writing E2E tests, fixing flaky tests, setting up CI/CD) to the right one of 57 reference documents across 8 categories. - Comprehensive Coverage: Guidance spans E2E, component, API, visual regression, accessibility (axe-core), security, performance, mobile, i18n, Electron, and browser extension testing, plus framework-specific patterns for React, Angular, Vue, and Next.js. - Debugging & Infrastructure Support: Dedicated references for flaky test diagnosis, trace viewer usage, console error monitoring, sharding, Docker, GitHub Actions, GitLab CI, and test coverage. - 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) so the AI applies proven patterns like auto-retrying assertions and AxeBuilder fixtures. ## 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 race conditions, hard-coded waits, or shared state between tests. Replace waitForTimeout with auto-retrying assertions like expect(locator).toBeVisible(), ensure test isolation with fixtures, and use the trace viewer to diagnose timing issues.

What are the best locator strategies in Playwright?▼

Playwright best practice is to use user-facing locators: getByRole, getByLabel, getByText, and getByTestId. Avoid CSS classes and framework-generated attributes like Angular's _ngcontent-*, which change between builds and make tests brittle.

How do I run accessibility tests with Playwright and axe-core?▼

Install @axe-core/playwright and run AxeBuilder against the page, then assert that results.violations is empty. You can scope analysis to specific elements, disable rules, or wrap it in a fixture with WCAG tags for reuse across tests.

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

Yes, Playwright works with any framework since it interacts with the rendered DOM. The Skill includes framework-specific references covering Angular Material components, reactive forms, Router navigation, SSR hydration checks, and Next.js SSR/SSG patterns.

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

Playwright CI setup involves installing browsers with npx playwright install --with-deps, running tests with retries enabled, and uploading trace and screenshot artifacts on failure. The Skill covers GitHub Actions, GitLab CI, Docker containers, sharding, and other providers.

When should I use API tests instead of E2E tests in Playwright?▼

Use Playwright's request fixture for API tests when validating response status, body, and headers without browser overhead—it runs 10-100x faster. Reserve E2E tests for UI behavior, and use API calls to seed test data for browser tests.