playwright-best-practices

Apply Playwright best practices for selectors, waits, accessibility, and responsive testing.

2|Updated Jan 3, 2026
One-click install
npx skills add https://github.com/jovermier/cc-stack-marketplace --skill playwright-best-practices-jovermier
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright-best-practices
Source: https://github.com/jovermier/cc-stack-marketplace/tree/main/plugins/cc-playwright/skills/playwright-best-practices
Command: npx skills add https://github.com/jovermier/cc-stack-marketplace --skill playwright-best-practices-jovermier

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps frontend and QA engineers write reliable Playwright tests by providing a consolidated set of best practices for selectors, waits, accessibility checks, and responsive testing.

Core Features & Use Cases

  • Selector best practices: use getByRole, getByTestId, and getByLabel instead of brittle CSS selectors.
  • Wait strategies: prefer auto-waiting, explicit assertions, and avoid waitForTimeout.
  • Accessibility testing: include a11y checks and keyboard navigation scenarios.
  • Responsive testing: test across multiple viewport sizes and devices.
  • Flaky-test prevention: isolate tests, clean up state, and retry strategies where appropriate.
  • Use Case: A QA engineer adopts these practices to stabilize a Playwright suite for a React app.

Quick Start

Apply these guidelines to your Playwright tests by refactoring selectors to semantic alternatives, removing hard-coded delays, adding accessibility assertions, and validating behavior across viewports.

Frequently Asked Questions about playwright-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write reliable Playwright E2E tests without flaky failures?

Reliable Playwright E2E tests require semantic selectors like getByRole, explicit wait strategies instead of arbitrary delays, and strict test isolation to prevent flaky failures.

What are the best Playwright selectors to avoid brittle CSS queries?

The best Playwright selectors use semantic locators such as getByRole, getByTestId, and getByLabel, which target elements by their accessibility role or test identifier rather than relying on brittle CSS queries.

Why should I avoid waitForTimeout in Playwright test scripts?

You should avoid waitForTimeout in Playwright because it introduces arbitrary delays that cause flaky tests; instead, use Playwright's built-in auto-waiting and explicit assertions for reliable execution.

Can I include keyboard accessibility checks in my Playwright testing workflow?

Yes, you can include keyboard accessibility checks in your Playwright testing workflow by integrating a11y assertions and keyboard navigation scenarios to ensure your web app is accessible.

How do I test responsive web apps across multiple viewports with Playwright?

To test responsive web apps with Playwright, configure multiple viewport sizes and device configurations within your test scripts to validate behavior across diverse screen dimensions.

What is the best way to isolate Playwright tests to prevent state interference?

The best way to isolate Playwright tests involves cleaning up application state between test runs and ensuring each test executes independently to prevent state interference and flaky results.