Skip to content
Get packs

Guide · Agent skill

How to use the E2E Testing Patterns agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The e2e-testing-patterns skill gives an AI coding agent a set of guidance rules for writing end-to-end tests that drive a real browser through your app's critical user journeys, such as login, signup, or checkout. It is aimed at developers who set up or improve Playwright or Cypress suites, and at teams trying to reduce flaky tests. After this guide you will know what the skill changes, how to install it, how to phrase a request that triggers it, and what your project needs before it is useful.

E2E Testing Patternswshobson/agents · MIT

Quick start

  1. 1Download and unzip the skill. Download the ZIP from this page and unzip it so the folder contains SKILL.md and references/details.md.
  2. 2Place the folder. Move it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder, or upload the ZIP under Settings → Capabilities → Skills in the Claude apps.
  3. 3Install your test framework. Make sure Node.js, npm, and Playwright or Cypress are installed in the project you want to test.
  4. 4Make a natural request. Describe the journey or problem in plain language, such as a login test or a flaky signup test.
  5. 5Run the generated tests. Execute the tests with npx playwright test or your Cypress command and check the results yourself.
  6. 6Debug failures. Use --headed, --debug, the trace viewer, and screenshots to find the cause of a failing test.

What an agent skill is and what this one changes

An agent skill is a folder containing a SKILL.md file with instructions that an AI agent loads when a request matches the skill's description. This skill's description covers implementing E2E tests, debugging flaky tests, and establishing testing standards.

Once it is active, the agent follows the skill's recommended practices: stable data-testid selectors instead of CSS classes or nth-child paths, independent tests, no fixed timeouts, page objects, and few E2E tests focused on critical paths. For debugging, it knows about Playwright's headed mode, debug mode, trace viewer, screenshots, and test.step reporting.

Install the skill from the ZIP

Download the ZIP for this skill from this page and unzip it. The folder should contain SKILL.md and references/details.md. Put the folder in one of these locations:

  • Personal: ~/.claude/skills/ so it is available across your projects
  • Project: .claude/skills/ inside a specific project so it is shared with that repository
  • Claude apps: upload the ZIP under Settings → Capabilities → Skills

Trigger the skill with natural requests

You do not need a special command. Describe the testing task in plain language, and the agent will load the skill when the request matches its description. The skill's description names these situations: implementing E2E tests, debugging flaky tests, and establishing testing standards.

  • Write Playwright E2E tests for the checkout flow, including login first.
  • Our signup test is flaky in CI. Find out why and fix it using good waits.
  • Set up a Cypress test for the login page using data-testid selectors.
  • Review our E2E tests and tell me which ones should be unit or API tests instead.

Use the debugging workflow for failing tests

When a Playwright test fails, the skill points the agent to the built-in tools. Run the test in headed mode to watch the browser, use debug mode to step through, record a trace with trace: 'on-first-retry' in the config and open it with the trace viewer, and capture screenshots. Adding test.step blocks makes reports easier to read.

// 1. Run in headed mode npx playwright test --headed // 2. Run in debug mode npx playwright test --debug // 3. Open a recorded trace npx playwright show-trace path/to/trace.zip

Know what the skill needs before you start

The skill does not install testing tools for you. Your project needs Node.js and npm, since the commands use npx, plus Playwright or Cypress installed. If you use the findBy* Cypress commands shown in the examples, you also need @testing-library/cypress, and the skill's example adds it with an import in your Cypress support file.

The skill's own scripts: none. It runs no scripts and makes no network calls. The output is test code and terminal commands that you or your team must review and run.

  • Node.js and npm
  • Playwright or Cypress in the project
  • @testing-library/cypress for findBy* commands
import "@testing-library/cypress/add-commands";

Example: a Playwright config and page objects

The reference file includes a Playwright configuration with a testDir of ./e2e, parallel execution, retries and a single worker on CI, HTML and JUnit reporters, and projects for Chromium, Firefox, WebKit and a mobile device. Ask the agent to adapt it to your baseURL and browsers, and to organise login and checkout logic into page object models.

Tips for getting good results

Name the journey you want covered and the framework you use, so the agent picks the right API. Ask for data setup and cleanup inside each test, because the skill recommends independent tests. If the agent reaches for CSS classes, remind it of the data-testid rule.

Review generated tests by running them yourself. The skill's guidance is general, so check selectors and URLs against your actual app.

What people use it for

  • Writing Playwright tests for login, signup, and checkout flows
  • Finding and fixing flaky tests that fail intermittently in CI
  • Converting brittle CSS-selector tests to data-testid or role-based selectors
  • Organising repeated page logic into page object models
  • Setting a team standard for which tests belong at the E2E layer

Frequently asked questions

How do I install the e2e-testing-patterns skill?

Download the ZIP from this page and unzip it. Place the folder in ~/.claude/skills/ for personal use, in a project's .claude/skills/ folder, or upload the ZIP in the Claude apps under Settings → Capabilities → Skills.

What do I need to use this skill?

You need Node.js and npm because the commands use npx, plus Playwright or Cypress installed in your project. If you use the findBy* Cypress commands, you also need @testing-library/cypress.

Is the e2e-testing-patterns skill free?

The skill is published under the MIT licence, as listed on this page. Check the licence file in the source repository for the full terms.

Does the skill run code or access the internet?

According to this listing, the skill runs no scripts and makes no network calls. It provides guidance, and the test code and commands it produces must be run by you.

Can I use this skill without writing code?

Not really. The output is test code and terminal commands that someone must run, so it is aimed at developers. Non-developers who want to test a website without code will need a different tool.

Does this skill work with Cypress as well as Playwright?

Yes. The skill covers both Playwright and Cypress, including Cypress findBy* commands from @testing-library/cypress and Playwright's trace viewer and debug mode.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you are a developer setting up or cleaning up Playwright or Cypress suites and want consistent practices for selectors, independence, and debugging. Skip it if you only need unit or API tests, or if you want to test a website without writing code, since the output still has to be written and run by someone technical.

Download the skill