playwright-testing

Write and debug cross-browser end-to-end tests with Playwright using Page Objects and CI integration.

Updated Aug 28, 2026
One-click install
npx skills add https://github.com/Yash-Awasthi/adapfit --skill playwright-testing-yash-awasthi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-testing
Source: https://github.com/Yash-Awasthi/adapfit/tree/main/.agents/skills/playwright-testing
Command: npx skills add https://github.com/Yash-Awasthi/adapfit --skill playwright-testing-yash-awasthi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/test, @faker-js/faker.

What problem does it solve? End-to-end tests often become flaky, slow, and hard to maintain due to brittle selectors, hardcoded waits, and missing auth handling. This Skill provides a complete Playwright workflow covering resilient locators, Page Object architecture, authentication reuse, network mocking, and CI/CD pipelines. ## Core Features & Use Cases - Resilient Locator Strategy: Prioritizes role-based and test-id locators over brittle CSS/XPath selectors, with auto-waiting web-first assertions. - Page Object Model & Auth Setup: Provides base page classes, reusable page objects, and global auth setup with stored storage state shared across browser projects. - Network Mocking & Visual Testing: Intercepts API responses with page.route, waits for real API calls, and captures screenshot comparisons for visual regression. - Dead Link Detection: Includes required link-checking tests that crawl pages and validate every href and image returns a successful status. - Use Case: A team shipping a web app needs confidence before each deploy. Use this Skill to scaffold an e2e/ directory with auth setup, write checkout flow tests across Chromium, Firefox, WebKit, and mobile viewports, and wire a GitHub Actions workflow that uploads failure traces. ## Quick Start Set up Playwright end-to-end tests for my web app with a login page object, an authenticated dashboard test, and a GitHub Actions workflow.

Frequently Asked Questions about playwright-testing

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

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

Install @playwright/test, configure playwright.config.ts with browser projects, and write tests using page.getByRole locators with web-first assertions like toBeVisible. Organize tests with the Page Object Model to keep selectors and actions reusable across specs.

What is the best locator strategy in Playwright?▼

Use role-based locators like page.getByRole('button', { name: 'Submit' }) first, then getByLabel, getByText, or getByTestId. Avoid CSS selectors and XPath because they break when the DOM structure changes.

How do I handle authentication in Playwright tests?▼

Create a setup project that logs in once and saves the session with page.context().storageState(). Other browser projects then reuse that stored state file via the storageState config option, skipping repeated logins.

Can Playwright mock API responses in tests?▼

Yes, page.route() intercepts matching request URLs and lets you fulfill them with custom status codes and JSON bodies. This enables testing error states and loading behavior without depending on a live backend.

Why are my Playwright tests flaky in CI?▼

Flakiness usually comes from hardcoded waitForTimeout calls, shared state between tests, or missing awaits. Replace manual waits with auto-retrying assertions, isolate each test, and enable retries plus trace capture on first retry in CI.

How do I debug a failing Playwright test?▼

Run npx playwright test --debug to step through the test, or enable trace: 'on-first-retry' and open the trace with npx playwright show-trace. The HTML report from npx playwright show-report also shows screenshots and videos of failures.