skills.rest
devsajad
devsajadCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

playwright-best-practices

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

Updated Aug 27, 2026
Search Tags:#ci/cd#test automation#flaky tests#playwright#e2e testing#page object model#api mocking
One-click install
npx skills add https://github.com/devsajad/next.js-starter-kit --skill playwright-best-practices-devsajad
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-best-practices
Source: https://github.com/devsajad/next.js-starter-kit/tree/main/.claude/skills/playwright-best-practices
Command: npx skills add https://github.com/devsajad/next.js-starter-kit --skill playwright-best-practices-devsajad

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 many decisions—locator strategies, waiting patterns, mocking, CI configuration, and framework-specific quirks—and mistakes lead to flaky, slow, or brittle tests. This Skill provides structured, activity-based guidance so you apply proven patterns instead of trial and error. ## 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) 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). - Use Case: You are debugging a test that only fails in parallel CI runs. The Skill routes you to flaky-tests.md, performance.md, and fixtures-hooks.md to diagnose worker isolation and shared state issues. ## Quick Start Ask the AI to help you write or fix a Playwright test, such as creating an authenticated E2E test with API mocking for your Next.js app.

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 explicit waits, shared state between tests, or race conditions. Replace waitForTimeout with auto-retrying assertions like expect(locator).toBeVisible(), ensure test isolation through fixtures, and use the trace viewer to diagnose timing issues.

How do I mock API responses in Playwright tests?▼

Use page.route() to intercept network requests and fulfill them with custom responses. For GraphQL, match requests by operation name; for REST, match URL patterns. HAR recording and playback is also supported for complex scenarios.

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

Page Object Model works well for encapsulating complex page interactions reused across many tests, while fixtures are better for shared setup, teardown, and test data. Many suites combine both: fixtures provide authenticated contexts, and page objects structure interactions.

Does Playwright support testing Angular Material components?▼

Yes, Angular Material components render proper ARIA roles, so role-based locators like getByRole('combobox') and getByRole('dialog') work reliably. Avoid CSS classes like .mat-mdc-button and internal attributes like _ngcontent, which change between builds.

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

Configure a workflow that installs dependencies, installs browsers with npx playwright install --with-deps, and runs npx playwright test. Use sharding for parallel execution across jobs and upload the HTML report and traces as artifacts for failed runs.

Why do Playwright API tests fail with 401 Unauthorized?▼

The standalone request fixture does not carry browser cookies or tokens automatically. Set extraHTTPHeaders with an Authorization token in the config, create an authenticated request context fixture, or use page.request to inherit cookies from a browser login.

Related Skills

Explore More Software Engineering Skills→
gil00pitagil00pita

playwright

Automate cross-browser end-to-end tests across Chromium, Firefox, and WebKit.

Community
Advanced
tom-xstom-xs

playwright-regression-testing

Plan and optimize Playwright TypeScript regression suites across CI/CD pipelines.

Community
Advanced
aroidoaroido

qa-testing

Automate end-to-end testing, visual regression, accessibility audits, and GitHub issue creation with Playwright.

Official
Advanced
mtsatryanmtsatryan
1

e2e-test-specialist

Automate end-to-end testing workflows across browsers, APIs, and mobile platforms.

Community
Advanced