Skip to main content
hc
Submit
skillsFirst-partyReview first Safety · Privacy ·

Playwright E2E Testing Automation Skill

Automate end-to-end testing with Playwright - the modern browser automation framework that supports Chromium, Firefox, and WebKit with a single API.

by JSONbored·added 2025-10-16·
Claude CodeCodexWindsurfGeminiCursorCLI
HarnessClaude CodeCodexWindsurfGeminiCursorCLI
Level:advancedType:generalVerified:draft
Review first — review before installing

Open the source and read safety notes before installing.

Prerequisites

  • Node.js 18+
  • Playwright 1.40+
  • @playwright/test package
  • Browser binaries (Chromium, Firefox, WebKit)
  • Browser binaries installed via Playwright (npx playwright install) for target browsers (Chromium, Firefox, WebKit)
  • Test application or website accessible for testing (local development server, staging environment, or production URL)

Schema details

Install type
package
Reading time
6 min
Difficulty score
100
Troubleshooting
Yes
Breaking changes
No
Package metadata
Package verified
Yes
SHA-256
61fb431b4e7253846d6c180b34c22226e431cd3234bd5f6917fdf18702df5dbe
Skill and platform metadata
Skill type
general
Skill level
advanced
Verification
draft
Verified at
2025-10-16
Retrieval sources
https://playwright.dev/
Tested platforms
ClaudeCodexOpenClawCursorWindsurfGemini
PlatformSupportInstall path
claude-codeNative.claude/skills/<skill-name>/SKILL.md
codexNative.agents/skills/<skill-name>/SKILL.md
windsurfNative.windsurf/skills/<skill-name>/SKILL.md
geminiNative.gemini/skills/<skill-name>/SKILL.md or .agents/skills/<skill-name>/SKILL.md
cursorAdapter.cursor/rules/<skill-name>.mdc
cliManualAGENTS.md or tool-specific context file
Full copyable content
import { test, expect } from '@playwright/test';

test.describe('Dashboard Tests', () => {
  test.beforeEach(async ({ page }) => {
    // Login before each test
    await page.goto('http://localhost:3000/login');
    await page.getByLabel('Email').fill('user@example.com');
    await page.getByLabel('Password').fill('password123');
    await page.getByRole('button', { name: 'Sign In' }).click();
    await page.waitForURL('**/dashboard');
  });

  test('displays welcome message', async ({ page }) => {
    const heading = page.getByRole('heading', { name: /welcome/i });
    await expect(heading).toBeVisible();
  });

  test('loads user profile data', async ({ page }) => {
    await page.getByRole('link', { name: 'Profile' }).click();
    await expect(page.getByText('user@example.com')).toBeVisible();
  });
});

About this resource

What This Skill Enables

Claude can write, execute, and maintain end-to-end tests using Playwright, the modern browser automation framework that has overtaken Cypress in npm downloads as of 2025. This skill enables cross-browser testing (Chrome, Firefox, Safari/WebKit), AI-powered test generation with GitHub Copilot integration, and official MCP (Model Context Protocol) support for structured DOM interactions.

Compatibility

Native

  • Claude Code / Claude: native skill usage via SKILL.md.
  • Codex/OpenAI workflows: compatible with Agent Skills-style SKILL.md content as reusable workflow instructions.

Manual Adaptation

  • Gemini CLI: native skill usage via .gemini/skills/<skill-name>/SKILL.md or .agents/skills/<skill-name>/SKILL.md where supported.
  • Cursor: use the generated .cursor/rules/*.mdc adapter for project rules.
  • OpenClaw and similar agents: use the same skill content as a reusable prompt/workflow file when native skill import is unavailable.

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

Features

  • Cross-browser testing: Chrome, Firefox, Safari (WebKit) with single API
  • AI-powered test generation with GitHub Copilot and codegen
  • MCP support for accessibility-driven interactions (getByRole, getByLabel, getByText)
  • Native parallel execution and test sharding for CI/CD
  • Visual regression testing with screenshot comparison and pixel diff
  • API testing and contract validation with request context
  • Network request interception and mocking for offline testing
  • Trace viewer with screenshots, snapshots, and sources for debugging

Use Cases

  • End-to-end testing for web applications with cross-browser coverage
  • Visual regression testing with screenshot comparison and pixel diff
  • API testing and contract validation with request context
  • Mobile web testing with device emulation (iPhone, Pixel, etc.)
  • Performance testing with Web Vitals metrics (FCP, LCP, TTI, TBT)
  • Accessibility testing with screen reader automation and ARIA validation
Content outline
#testing#playwright#e2e#automation#ai

Source citations

Signals

Loading live community signals…

More like this, weekly

A short, calm digest of reviewed Claude resources. Unsubscribe any time.