playwright-best-practices

Writes resilient Playwright end-to-end tests with auto-waiting locators, network mocking, and CI configuration.

Updated Apr 13, 2026

Search Tags:#typescript #test automation #playwright #e2e testing #selectors #network mocking #ci configuration

Ready to run

npx skills add https://github.com/JenilRevaliya/ARGUS --skill playwright-best-practices-jenilrevaliya

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: playwright-best-practices
Source: https://github.com/JenilRevaliya/ARGUS/tree/main/.agent/skills/playwright-best-practices
Command: npx skills add https://github.com/JenilRevaliya/ARGUS --skill playwright-best-practices-jenilrevaliya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test.

What problem does it solve? End-to-end tests often fail intermittently due to hardcoded sleeps, brittle CSS selectors, shared test state, and flaky third-party API calls, making CI pipelines unreliable and hard to debug. ## Core Features & Use Cases - Resilient Selectors & Auto-Waiting: Enforces user-centric locators like getByRole and getByTestId instead of brittle CSS/XPath, eliminating flaky synchronization with waitForTimeout. - Test Isolation & Fixtures: Guides isolated browser contexts, beforeEach API-based login, and serial mode for ordering dependencies. - Network Mocking & CI Configuration: Intercepts external API calls with page.route and provides a production-ready playwright.config.ts with retries, workers, traces, and multi-browser projects. - Use Case: When a checkout test fails randomly on CI because of a slow payment API, mock the charge endpoint with page.route and assert the declined-payment message deterministically. ## Quick Start Ask the AI to write a Playwright E2E test for your login and checkout flow using resilient selectors, network mocking, and a CI-ready playwright.config.ts.

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 resilient Playwright selectors that don't break?▼

Use user-centric locators in this priority order: page.getByRole() for accessibility-checked elements, page.getByText() for visible text, and page.getByTestId() for stable data-testid attributes. Avoid CSS selectors and XPath, which break when layout or styling changes.

How to mock API requests in Playwright tests?▼

Use page.route() with a URL pattern to intercept outgoing requests, then call route.fulfill() with a custom status and JSON body. This removes dependence on external services like payment processors, making tests deterministic and fast.

Why are my Playwright tests flaky on CI?▼

Flakiness usually comes from hardcoded waitForTimeout calls, cascading tests that share state, or parallel workers competing for resources. Replace sleeps with auto-waiting locators, isolate each test with beforeEach setup, and set retries and workers appropriately in playwright.config.ts.

Does Playwright support cross-browser and mobile testing?▼

Yes, Playwright supports Chromium, WebKit, and mobile viewports through projects in playwright.config.ts. You can define entries like Desktop Chrome, Desktop Safari, and iPhone 13 using the devices presets, and run them in parallel with fullyParallel enabled.

When should I use serial mode in Playwright?▼

Use test.describe.configure({ mode: 'serial' }) only when tests have genuine ordering dependencies that cannot be removed. Prefer isolated tests with independent setup, since serial execution slows the suite and often hides design problems in test structure.