Playwright E2E Testing Automation Skill

Playwright is Microsoft's open-source end-to-end testing framework for modern web applications. Its introductory documentation covers the core design principles: auto-waiting for elements to be in an actionable state before interacting with them, full isolation between test contexts, and a unified API that runs the same tests against Chromium, Firefox, and WebKit. This skill brings those capabilities into Claude — you describe a user flow or a bug scenario in plain language, and Claude generates the corresponding @playwright/test spec, configures fixtures, sets up parallel workers, and interprets trace output when tests fail.

What This Skill Enables

Claude can write, execute, and maintain end-to-end tests using Playwright. This covers cross-browser coverage (Chrome, Firefox, Safari/WebKit) from a single test suite, accessibility-first selectors (getByRole, getByLabel, getByText) that survive UI refactors, network request interception for mocking slow or flaky dependencies, and trace recording that captures a full timeline of clicks, network calls, and DOM snapshots for post-mortem debugging.

Prerequisites

Required:

• Claude Pro subscription or Claude Code CLI
• Node.js 18+ installed
• Basic understanding of your application's user flows

What Claude handles automatically:

• Installing Playwright and browser binaries
• Generating test files with proper TypeScript types
• Setting up test configurations and reporters
• Writing selectors using accessibility snapshots
• Debugging test failures with traces and screenshots
• Optimizing tests for parallel execution

How to Use This Skill

Basic Test Generation

Prompt: "Create a Playwright test that logs into my application at localhost:3000, navigates to /dashboard, and verifies the welcome message appears."

Claude will:

1. Install Playwright if not present (npm init playwright@latest)
2. Generate a test file with proper page object patterns
3. Use accessibility-first selectors (role, label, text)
4. Include assertions with auto-retry logic
5. Add screenshot capture on failure

AI-Powered Test Creation from User Stories

Prompt: "I have a checkout flow: user adds product to cart, enters shipping info, selects payment method, and completes order. Write comprehensive Playwright tests covering happy path and error cases."

Claude will:

1. Break down the user story into discrete test scenarios
2. Generate test files organized by feature
3. Include data-driven tests with fixtures
4. Add network mocking for payment gateway
5. Implement custom assertions for order confirmation
6. Set up test retry logic for flaky network calls

Cross-Browser Testing Suite

Prompt: "Set up Playwright to test my application across Chrome, Firefox, and Safari with parallel execution. Include mobile viewport testing for iOS and Android."

Claude will:

1. Configure playwright.config.ts with multiple projects
2. Define desktop and mobile browser contexts
3. Set up parallel worker configuration
4. Configure test sharding for CI/CD
5. Add HTML reporter with trace viewer
6. Include screenshot comparison for visual regression

API Testing Integration

Prompt: "Write Playwright tests that verify my REST API endpoints before running UI tests. Mock the API responses for offline testing."

Claude will:

1. Use Playwright's request context for API calls
2. Create API test fixtures for reusable setup
3. Implement request/response interception
4. Generate mock data with realistic values
5. Set up contract testing with schema validation
6. Add performance timing assertions

Tips for Best Results

1. Use Accessibility Selectors: Playwright's MCP support leverages accessibility snapshots. Ask Claude to use getByRole(), getByLabel(), and getByText() instead of CSS selectors for more resilient tests.

2. Parallel Execution: Playwright's native parallelism is a key advantage. Request test organization that maximizes parallel worker usage with proper test isolation.

3. Auto-Wait Smart Defaults: Playwright automatically waits for elements to be actionable. Avoid explicit waits unless dealing with specific timing requirements.

4. Trace on Failure: Enable trace recording for CI environments to debug failures without reproducing locally: --trace on-first-retry.

5. Codegen for Complex Flows: For intricate user interactions, ask Claude to generate tests using npx playwright codegen output as a starting point.

6. Test Sharding: For large test suites in CI, request sharding configuration: --shard=1/4 to split tests across multiple jobs.

Common Workflows

Complete E2E Test Suite Setup

"Set up a production-ready Playwright test suite for my Next.js app with:
1. Authentication flow tests with session storage
2. Visual regression testing with screenshot comparison
3. API mocking for external services
4. CI/CD integration with GitHub Actions
5. HTML report with trace viewer
6. Parallel execution across 4 workers"

AI-Assisted Test Maintenance

"My application's login form changed from using email to username.
Update all Playwright tests that interact with the login form,
using accessibility selectors instead of data-testid attributes."

Performance Testing

"Write Playwright tests that measure:
1. First Contentful Paint (FCP)
2. Largest Contentful Paint (LCP)
3. Time to Interactive (TTI)
4. Total Blocking Time (TBT)
Fail tests if any metric exceeds Web Vitals thresholds."

Mobile-First Testing

"Create Playwright tests for mobile web experience:
1. Test on iPhone 13 and Pixel 5 viewports
2. Verify touch interactions (swipe, pinch-to-zoom)
3. Test offline mode with service worker
4. Validate responsive image loading
5. Check mobile-specific navigation menu"

Troubleshooting

Issue: Tests are flaky and fail intermittently Solution: Ask Claude to add explicit waitForLoadState('networkidle') calls, increase timeout for specific actions with { timeout: 10000 }, or implement custom wait conditions with page.waitForFunction().

Issue: Selectors break when UI changes Solution: Request migration to accessibility selectors (getByRole, getByLabel) which are more resilient to DOM structure changes. Playwright's MCP integration makes this the preferred approach.

Issue: Tests run too slowly in CI Solution: Ask Claude to implement test sharding across multiple GitHub Actions jobs, optimize test setup with global authentication fixtures, and enable trace recording only on failure.

Issue: Cannot test third-party authentication (OAuth, SSO) Solution: Request implementation of authentication state storage with storageState option, bypassing the login flow for most tests while keeping one dedicated authentication test.

Issue: Screenshot comparison fails due to font rendering differences Solution: Ask Claude to configure Playwright's maxDiffPixels or threshold options, or use textual assertions instead of visual regression for text-heavy areas.

Learn More

• Playwright Official Documentation
• Playwright MCP Server
• Playwright Accessibility Testing
• AI-Powered Test Generation with Codegen
• Playwright Test Best Practices

• Source repositorygithub.com 2025-10-16
• Documentationplaywright.dev
• Package (SHA-256 pinned)/downloads/skills/playwright-e2e-testing.zip