Skip to content
Get packs

Playwright E2E Testing Patterns

Write stable, maintainable Playwright browser tests and fix flaky ones in CI

Source Download skill
Repository
affaan-m/ECC
Stars
295,127
Licence
MIT
Files
2 files

What it does

When installed, the agent follows a set of proven conventions for end-to-end testing with Playwright, a tool that automates real web browsers to check that an app works from a user's point of view. It helps organize test folders, write page object classes that wrap page elements, configure Playwright across browsers, set up GitHub Actions CI runs, save screenshots, videos and traces when tests fail, and diagnose tests that pass or fail unpredictably.

Great for

  • Developers writing or restructuring a Playwright test suite
  • Teams whose E2E tests fail intermittently in CI and need a diagnosis approach
  • Engineers who want a consistent Page Object Model structure

Skip it if

  • Projects that use Cypress, Selenium or another test framework, since the patterns are Playwright-specific
  • Non-developers with no web app to test, because the content assumes a running app and a Node.js project
  • Testing live production sites with real accounts or wallets without care, since the examples use test data and mocks and no safeguards are described for real credentials

Try asking

  • “Write Playwright tests for my login, logout and registration flows using a page object”
  • “Our Playwright tests are flaky in GitHub Actions, help me find and fix the causes”
  • “Set up a playwright.config.ts with Chromium, Firefox, WebKit and mobile projects”
  • “Add screenshot, video and trace artifact capture and upload them from CI”
Step-by-step guide: how to use Playwright E2E Testing PatternsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    e2e-testing.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip e2e-testing.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip e2e-testing.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at your existing test folder and config so it adapts patterns to your project rather than generating a new layout
  • Use the flaky-test section by sharing the failing test code and CI log so the agent can match a cause to a fix
  • Review generated tests before running them in CI, especially any that use the mock wallet example or staging URLs

What's inside

  • agents/openai.yaml
  • SKILL.md

Redistributed unmodified from affaan-m/ECC under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.