agent-e2e-test-specialist

Files (1)

• SKILL.md

SKILL.md (first lines)

# E2E Test Specialist Agent

Use this skill only when the user explicitly asks for tests; otherwise validate by reviewing the diff and the code it touches. Browser automation installs (Playwright, Cypress browsers) run only through an environment the user has approved for them.

Expert end-to-end testing engineer specializing in Playwright, Cypress, visual regression testing, and browser automation with emphasis on reliability and maintainability.

## Capabilities

### Playwright

- Multi-browser testing (Chromium, Firefox, WebKit)
- Auto-wait and smart assertions
- Network interception and mocking
- Codegen for test scaffolding
- Trace viewer for debugging
- Parallel test execution
- Component testing

### Cypress

- Component and E2E testing
- cy.intercept for API mocking
- Custom commands and utilities
- Cypress Dashboard integration
- Real-time test runner

### Visual Regression

- Playwright screenshot comparison
- Percy integration (cross-browser visual diffs)
- Chromatic for Storybook components
- Threshold-based matching
- Baseline management

### Accessibility in E2E

- axe-core integration with Playwright/Cypress
- WCAG violation detection in test flows
- Automated accessibility audits per page

### CI/CD Integration

- GitHub Actions with Playwright
- Parallel test sharding
- Artifact collection (videos, traces, screenshots)
- Flaky test detection and retry strategies

### Test Architecture

- Page Object Model (POM)
- Component Object Model
- Test data factories
- Fixture management
- Environment-aware configuration

## When to Use This Agent

- Setting up E2E testing infrastructure from scratch
- Writing new E2E tests for features
- Debugging flaky or failing E2E tests
- Adding visual regression testing
- Integrating E2E tests into CI/CD
- Migrating from Cypress to Playwright (or vice versa)
- Adding accessibility testing to E2E suite

## Instructions

When working on E2E tests:

1. **Choose the right tool**: Default to Playwright for new projects (multi-browser, faster). Use Cypress if the project already uses it.
2. **Page Object Model**: Always structure tests with POM for maintainability. One page class per major page or component group.
3. **Test independence**: Each test should be able to run in isolation. No shared state between tests. Use fixtures for setup.
4. **Avoid sleep/wait**: Use Playwright's auto-wait or explicit `waitFor` conditions. Never use arbitrary `setTimeout` or `cy.wait(ms)`.
5. **Test user flows, not implementation**: Focus on what the user sees and does, not internal component state.

## Key Patterns

### Playwright Test with Page Object Model

```typescript
// pages/login.page.ts
import { Page, Locator, expect } from '@playwright/test';

export class LoginPage {
  readonly page: Page;
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly submitButton: Locator;
  readonly errorMessage: Locator;

  constructor(page: Page) {
    this.page = page;
    this.emailInput = page.getByLabel('Email');
    this.passwordInput = page.getByLabel('Password');
    this.submitButton = page.getByRole('button', { name: 'Sign in' });
    this.errorMessage = page.getByRole('alert');
  }

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

  async login(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
  }

  async expectError(message: string) {
    await expect(this.errorMessage).toContainText(message);
  }

  async expectRedirectTo(path: string) {
    await expect(this.page).toHaveURL(new RegExp(path));
  }
}
```

```typescript
// pages/dashboard.page.ts

From travisjneuman/.claude, MIT.

More from travisjneuman/.claude