home / skills / a5c-ai / babysitter / playwright-e2e

This skill enables expert Playwright end-to-end testing by generating, executing, debugging, and validating browser-based test suites across multiple browsers.

npx playbooks add skill a5c-ai/babysitter --skill playwright-e2e

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
2.1 KB
---
name: Playwright E2E Testing
description: Deep integration with Playwright for browser automation and end-to-end testing
allowed-tools:
  - Bash
  - Read
  - Write
  - Edit
  - Glob
  - Grep
---

# Playwright E2E Testing Skill

## Overview

This skill provides expert-level capabilities for Playwright-based end-to-end testing, enabling comprehensive browser automation, test generation, and result analysis.

## Capabilities

### Test Execution
- Execute Playwright tests with custom configurations
- Run tests in headed/headless modes
- Configure parallel execution and sharding
- Handle browser contexts and viewport settings

### Code Generation
- Generate Page Object classes from page analysis
- Create test code from user flow descriptions
- Implement reusable test utilities and helpers

### Debugging & Analysis
- Debug test failures with trace analysis
- Analyze Playwright reports and screenshots
- Identify flaky test patterns
- Provide remediation recommendations

### Network & Mocking
- Handle network interception and mocking
- Configure API response stubs
- Implement request/response validation

### Cross-Browser Support
- Configure tests for Chrome, Firefox, Safari, Edge
- Handle browser-specific quirks
- Implement responsive testing across viewports

## Target Processes

- `e2e-test-suite.js` - Full E2E test suite implementation
- `cross-browser-testing.js` - Cross-browser compatibility testing
- `visual-regression.js` - Visual regression with Playwright screenshots
- `accessibility-testing.js` - Accessibility testing with axe-playwright

## Dependencies

- `@playwright/test` - Playwright test runner
- `playwright` - Browser automation library
- Node.js 18+

## Usage Example

```javascript
{
  kind: 'skill',
  skill: {
    name: 'playwright-e2e',
    context: {
      action: 'execute-tests',
      testPath: 'tests/e2e/**/*.spec.ts',
      browsers: ['chromium', 'firefox'],
      parallel: true
    }
  }
}
```

## Configuration

The skill respects `playwright.config.ts` or `playwright.config.js` in the project root and can override settings as needed for specific test runs.

Overview

This skill delivers expert Playwright end-to-end testing capabilities for browser automation, test generation, and result analysis. It integrates with existing Playwright configs and supports cross-browser, parallel, and headless/headed test runs. Use it to automate robust e2e suites, diagnose failures, and generate reusable test code.

How this skill works

The skill runs Playwright test suites or individual specs using project playwrigh.config.* settings, with optional overrides for browsers, parallelism, and viewport. It can generate Page Object classes and test scaffolding from user flow descriptions, intercept and mock network traffic, and collect traces, screenshots, and reports for failure analysis. Built-in analysis surfaces flaky patterns and remediation steps.

When to use it

  • Running full e2e suites across multiple browsers or sharded parallel runs
  • Generating Page Objects and test code from user flow descriptions
  • Debugging flaky tests using traces, screenshots, and report analysis
  • Implementing API stubs, network interception, or response validation
  • Automating visual regression and accessibility checks as part of CI

Best practices

  • Keep playwright.config.js/ts in project root and use skill overrides only for CI or special runs
  • Generate Page Objects for stable selectors and reuse them across tests
  • Record traces and screenshots on failure to accelerate triage
  • Shard tests by logical groups and prefer worker-level isolation for flaky tests
  • Mock slow or external APIs in CI to improve reliability and speed

Example use cases

  • Execute tests matching tests/e2e/**/*.spec.ts in parallel across chromium and firefox with logs and traces collected
  • Auto-generate Page Object classes from a described user flow and produce skeleton tests
  • Run cross-browser compatibility jobs that capture browser-specific failures and quirk notes
  • Analyze a failing CI run to extract flaky test patterns and provide remediation recommendations
  • Implement visual regression checks by comparing Playwright screenshots across builds

FAQ

Which Playwright versions and Node.js are required?

Uses @playwright/test and playwright libraries and requires Node.js 18+; align dependency versions with your project.

Can it override playwright.config settings?

Yes — it respects the project config by default and supports targeted overrides for browser list, parallelization, headless mode, and viewport for specific runs.