Playwright Expert

Expert Playwright automation and integration for robust end-to-end web testing

Category: productivity Source: Jeffallan/claude-skills

Playwright Expert is an AI skill that provides advanced guidance for building robust end-to-end test suites using the Playwright browser automation framework. It covers test architecture, page object patterns, network interception, visual comparison testing, parallel execution, and CI integration that produce reliable, maintainable browser tests.

What Is This?

Overview

Playwright Expert delivers best practices for testing web applications with Playwright across Chromium, Firefox, and WebKit browsers. It addresses test architecture with fixture-based setup and teardown patterns, page object models that encapsulate page interactions for maintainability, network mocking and interception for isolating frontend tests from backend dependencies, visual regression testing with screenshot comparison and threshold configuration, parallel test execution that reduces suite run time, and CI pipeline integration with artifact collection and retry strategies.

Who Should Use This

This skill serves QA engineers building comprehensive E2E test suites, frontend developers writing tests for web applications, test architects designing scalable test frameworks, and DevOps engineers integrating Playwright tests into CI/CD pipelines.

Why Use It?

Problems It Solves

E2E tests are notoriously flaky when they rely on timing-based waits, CSS selectors that change frequently, or backend services that behave unpredictably. Slow test suites that run sequentially waste CI time and delay deployments. Tests without proper abstraction become maintenance burdens when the application UI changes.

Core Highlights

The skill uses Playwright's auto-waiting mechanisms to eliminate flakiness from timing issues. Locator strategies prioritize accessible roles and test IDs over brittle CSS selectors. Network interception enables testing frontend behavior independently of backend availability. Parallel execution across browsers and workers reduces total suite time significantly.

How to Use It?

Basic Usage

import { test, expect } from '@playwright/test';

// Page object pattern for maintainable tests
class LoginPage {
  constructor(private page: Page) {}

  async navigate() {
    await this.page.goto('/login');
  }

  async login(email: string, password: string) {
    await this.page.getByLabel('Email').fill(email);
    await this.page.getByLabel('Password').fill(password);
    await this.page.getByRole('button', { name: 'Sign in' }).click();
  }

  async expectError(message: string) {
    await expect(this.page.getByRole('alert')).toContainText(message);
  }
}

test('successful login redirects to dashboard', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.navigate();
  await loginPage.login('user@example.com', 'password123');
  await expect(page).toHaveURL('/dashboard');
  await expect(page.getByRole('heading')).toContainText('Welcome');
});

Real-World Examples

import { test, expect } from '@playwright/test';

// Network interception for isolated frontend testing
test('displays products from API', async ({ page }) => {
  await page.route('/api/products', async route => {
    await route.fulfill({
      json: [
        { id: 1, name: 'Widget', price: 29.99 },
        { id: 2, name: 'Gadget', price: 49.99 }
      ]
    });
  });

  await page.goto('/products');
  await expect(page.getByText('Widget')).toBeVisible();
  await expect(page.getByText('$49.99')).toBeVisible();
});

test('handles API errors gracefully', async ({ page }) => {
  await page.route('/api/products', route =>
    route.fulfill({ status: 500, body: 'Server Error' })
  );

  await page.goto('/products');
  await expect(page.getByText('Failed to load products')).toBeVisible();
  await expect(page.getByRole('button', { name: 'Retry' })).toBeVisible();
});

// Visual regression testing
test('product page matches visual baseline', async ({ page }) => {
  await page.goto('/products/widget');
  await expect(page).toHaveScreenshot('product-page.png', {
    maxDiffPixelRatio: 0.01
  });
});

Advanced Tips

Use custom fixtures to share authentication state across tests by storing session cookies and replaying them. Configure test retries differently for CI versus local development: retry twice in CI but fail immediately locally for faster feedback. Use page.waitForResponse() instead of artificial delays when tests need to wait for specific API calls to complete.

When to Use It?

Use Cases

Use Playwright Expert when building a new E2E test suite for a web application, when reducing test flakiness in an existing browser test suite, when implementing visual regression testing for UI-critical applications, or when optimizing test execution time through parallelization and smart fixture design.

Important Notes

Requirements

Node.js 18 or later with the Playwright package installed. Browser binaries installed via npx playwright install. A web application accessible via URL for test execution.

Usage Recommendations

Do: prefer role-based locators like getByRole() and getByLabel() over CSS selectors for resilient tests. Use Playwright's built-in auto-waiting rather than explicit sleeps. Run tests across multiple browsers in CI to catch browser-specific issues.

Don't: write tests that depend on specific timing or animation completion without using proper wait mechanisms. Share mutable state between parallel tests, as this causes intermittent failures. Skip collecting traces and screenshots on CI failures, as these artifacts are essential for debugging.

Limitations

Visual regression tests are sensitive to font rendering differences across operating systems. E2E tests are inherently slower than unit tests and should focus on critical user journeys rather than covering every code path. Network interception tests may not catch issues in actual API integration if mocks diverge from real responses.