What does this skill do?

The E2E Testing with Playwright Skill provides proven patterns for building stable, fast, and maintainable E2E test suites. It covers everything from organizing files using the Page Object Model to integrating with CI/CD pipelines, artifact management, and strategies for diagnosing and fixing flaky tests.

E2E Suite from Scratch
Structure a complete suite by domain (auth, features, api) with separate fixtures and a typed Page Object Model.
Anti-Flaky Diagnosis
Identify unstable tests by repeating runs with --repeat-each and --retries, and isolate the problematic ones with test.fixme or test.skip.
CI/CD Integration
Set up GitHub Actions pipelines that install dependencies, run tests, and upload HTML, JUnit, and JSON reports as artifacts.
Testing Web3 and Critical Workflows
Validate financial flows and Web3 using mock wallets, automatic capture of screenshots, traces, and videos when errors occur.

Usage examples

🏗️ Structuring a suite
Set up a suite of E2E tests with Playwright using the Page Object Model for my e-commerce app, covering the auth, features, and API domains.
🐛 Diagnosing flakiness
I have flaky tests in my CI pipeline. Help me diagnose and isolate them using `test.fixme` and `test.skip`.
⚙️ Set up multi-browser support
Configure Playwright with HTML, JUnit, and JSON reporters for Chromium, Firefox, WebKit, and Mobile Chrome.
🔐 Web3 Test
Create an E2E test for a Web3 wallet connection by mocking MetaMask with `window.ethereum`.

Features

Typed Page Object Model Encapsulate locators and reusable actions in fully typed TypeScript classes for maximum maintainability.
Multi-browser configuration Parallel projects for Chromium, Firefox, WebKit, and mobile devices with simultaneous HTML, JUnit, and JSON reporters.
Automatic Detection of Artifacts Screenshots, traces, and videos are automatically captured during failures and retries to enable rapid diagnosis.
Anti-Flaky Strategies Auto-wait with locators, waiting for specific conditions instead of arbitrary timeouts, and quarantining unstable tests.
Complete CI/CD Pipeline Integration with GitHub Actions: installing dependencies, running tests, and uploading reports as pipeline artifacts.

Frequently asked questions

Yes, the skill assumes you have a project with @playwright/test installed. If not, the skill will guide you through installing it using `npm install @playwright/test` and `npx playwright install --with-deps`.
Yes. Playwright is compatible with any web application (React, Vue, Angular, Svelte, etc.). The skill uses `data-testid` as recommended locators, which are framework-agnostic.
The skill provides specific strategies: using `auto-wait` with locators instead of `waitForTimeout`, waiting for specific network responses, retrying with `--repeat-each` and `--retries`, and isolating tests with `test.fixme` and `test.skip`.
Yes. The skill includes a complete example of mocking a MetaMask wallet using `context.addInitScript` to test wallet connections and transactions without any real dependencies.
End-to-End Testing with Playwright — Advanced Patterns with Claude AI

¿Prefieres escuchar el contenido? Genera la narración de audio con un clic.