E2e Testing

Solid Playwright foundation with Page Object Model examples, configuration patterns, and the flaky test handling you actually need in production. The artifact management section shows how to capture screenshots, traces, and videos strategically rather than drowning in noise. CI/CD integration is GitHub Actions ready, and the wallet mocking pattern is practical if you're testing web3 flows without burning real ETH. The flaky test section gets specific about race conditions and animation timing issues instead of just saying "use retries." Use this when you're setting up E2E from scratch or your existing suite has become maintenance hell. The quarantine pattern for known flaky tests is honest engineering.

skills.sh installs: 5.9K
GitHub stars: 229.1K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/everything-claude-code --skill e2e-testing --agent claude-code

Installs into .claude/skills of the current project.

Files

E2E Testing Patterns

Comprehensive Playwright patterns for building stable, fast, and maintainable E2E test suites.

Test File Organization

tests/
├── e2e/
│   ├── auth/
│   │   ├── login.spec.ts
│   │   ├── logout.spec.ts
│   │   └── register.spec.ts
│   ├── features/
│   │   ├── browse.spec.ts
│   │   ├── search.spec.ts
│   │   └── create.spec.ts
│   └── api/
│       └── endpoints.spec.ts
├── fixtures/
│   ├── auth.ts
│   └── data.ts
└── playwright.config.ts

Page Object Model (POM)

import { Page, Locator } from '@playwright/test'

export class ItemsPage {
  readonly page: Page
  readonly searchInput: Locator
  readonly itemCards: Locator
  readonly createButton: Locator

  constructor(page: Page) {
    this.page = page
    this.searchInput = page.locator('[data-testid="search-input"]')
    this.itemCards = page.locator('[data-testid="item-card"]')
    this.createButton = page.locator('[data-testid="create-btn"]')
  }

  async goto() {
    await this.page.goto('/items')
    await this.page.waitForLoadState('networkidle')
  }

SKILL.md on GitHub