E2e Testing

This is a solid Playwright reference covering the practical stuff you actually need: Page Object Model setup, config for multi-browser testing, and real patterns for handling flaky tests (the repeat-each trick is worth knowing). The Web3 mocking example is genuinely helpful if you're testing wallet flows without burning real ETH. I like that it doesn't pretend flaky tests don't exist, it shows you how to quarantine them and debug with trace artifacts. The CI/CD GitHub Actions setup is copy-paste ready. Most valuable for teams moving past basic Playwright tutorials who need patterns for keeping tests stable as the suite grows.

skills.sh installs: 6.4K
GitHub stars: 300.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add affaan-m/ecc --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