playwright

Guides Playwright end-to-end test design with locator strategies and web-first assertions.

4|Updated May 13, 2026
One-click install
npx skills add https://github.com/RuixeWolf/modbus-simulator --skill playwright-ruixewolf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright
Source: https://github.com/RuixeWolf/modbus-simulator/tree/main/.agents/skills/playwright
Command: npx skills add https://github.com/RuixeWolf/modbus-simulator --skill playwright-ruixewolf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test.

What problem does it solve? Writing reliable end-to-end tests is hard: flaky selectors, hardcoded timeouts, and poorly structured tests lead to brittle suites that fail unpredictably in CI. This Skill provides expert Playwright guidance so tests are stable, readable, and maintainable. ## Core Features & Use Cases - Test Design Patterns: Enforces descriptive test names, fixture-based isolation with test.beforeEach/test.afterEach, and DRY helper extraction. - Locator Strategy: Prioritizes user-facing locators like getByRole, getByLabel, and getByTestId over fragile CSS selectors. - Web-First Assertions: Promotes auto-retrying assertions such as toBeVisible() and toHaveURL() instead of waitForTimeout. - Use Case: When adding E2E coverage for a login flow, the Skill produces a test using role-based locators, web-first assertions, and a multi-browser playwright.config.ts with retries and trace capture. ## Quick Start Write a Playwright end-to-end test for the login page using role-based locators and web-first assertions.

Frequently Asked Questions about playwright

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

FAQPage Schema
How do I write Playwright end-to-end tests in TypeScript?▼

Import test and expect from @playwright/test, group related cases in test.describe blocks, and use test.beforeEach for shared setup like navigation. Interact with pages through locators and assert outcomes with web-first assertions.

What locators should I use in Playwright tests?▼

Prefer user-facing locators: page.getByRole for interactive elements, getByLabel for form inputs, getByText for visible text, and getByTestId when data-testid attributes exist. Avoid CSS class selectors like .btn-primary, which break when styling changes.

How do I avoid flaky waits in Playwright?▼

Replace page.waitForTimeout with web-first assertions such as toBeVisible or toHaveURL, which automatically wait and retry. For navigation use page.waitForLoadState, and for API calls use page.waitForResponse.

Does Playwright support testing across multiple browsers?▼

Yes. Define projects in playwright.config.ts using device presets like Desktop Chrome, Desktop Firefox, and iPhone 13. Each project runs the same test suite against a different browser or viewport configuration.

How do I configure Playwright retries and traces for CI?▼

In playwright.config.ts, set retries conditionally (for example, 2 when process.env.CI is set), enable trace: 'on-first-retry', and use screenshot: 'only-on-failure'. This captures debugging artifacts only when tests fail.