MITFrontend Testing

E2E Testing Patterns

Name: E2E Testing Patterns
Author: wshobson

By wshobson· wshobson/agents· 0

Writes reliable Playwright and Cypress E2E tests and fixes flaky ones.

Installation

1
Make sure Claude is on your device and in your terminal.
Skills load from ~/.claude/skills/ when Claude Code starts up — so you need it on your machine first. If you don't have it yet, install it once with the command below, then run claude in any terminal to verify.
One-time setup
```
npm i -g @anthropic-ai/claude-code
```
Already have it? Skip ahead.

Paste into Claude Code or into your terminal.

Install

git clone ht•••••••••••••••••••••••••••••••••••• ••••••••••••••••••••• •• ••••• •• •••••••••••••••••••••••••••••••••••••••••••••• •• •• •• •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• •••••••••••••••••••••••••••••••••••••••••••••••

This copies the whole skill folder into ~/.claude/skills/e2e-testing-patterns-wshobson/ — the SKILL.md plus any scripts, reference docs, or templates the skill ships with. Safe default: works for every skill.

Faster alternative (instruction-only skills)

Skips the clone and grabs only the SKILL.md file. Don't use this if the skill ships Python scripts, reference markdowns, or asset templates — they won't be downloaded and the skill will fail when it tries to load them.

Quick install (SKILL.md only)

mkdir -p ~/.••••••••••••••••••••••••••••••••••••••••••• •• •••• ••••• •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• •• •••••••••••••••••••••••••••••••••••••••••••••••••••••••

Restart Claude Code.
Quit and reopen Claude Code (or any other agent that loads from ~/.claude/skills/). New skills are picked up on startup.
Just ask Claude.
Skills auto-activate when your request matches the skill's description — no slash command needed. Trigger phrases live in the skill's own frontmatter; you can read them in the “What this skill does” section above.

Prefer to read the source first? Open on GitHub.

When Claude uses it

Gives Claude end-to-end testing patterns for Playwright and Cypress: what belongs in E2E versus unit or integration tests, role- and data-testid-based selectors that survive markup changes, and page-object structure for independent, deterministic tests. Reach for it when writing E2E suites, hardening flaky tests, or setting up cross-browser CI test pipelines. Includes Playwright debugging recipes (headed mode, trace viewer, test.step, page.pause).

What this skill does

What it does: Teaches Claude to build maintainable, fast end-to-end test suites with Playwright and Cypress and to diagnose unreliable ones.

Draws the line on E2E scope: cover critical journeys (login, checkout, signup) and real API/auth flows; push edge cases and unit logic down the testing pyramid.
Pushes stable selectors via getByRole, getByLabel, and data-testid/data-cy, with side-by-side bad-vs-good selector examples instead of brittle CSS or nth-child paths.
Lays out best practices for independent, deterministic tests: page objects, per-test data setup and cleanup, mocking external APIs, and parallel execution for speed.
Catalogs common pitfalls (flaky waits, slow suites, over-testing, coupled tests) with the fix for each.
Provides concrete Playwright debugging recipes: --headed, --debug, trace viewer, screenshots/video capture, test.step reporting, and page.pause().