Write an end-to-end test suite

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/write-end-to-end-test-suite/raw' -o ~/'.claude/skills/write-end-to-end-test-suite/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/write-end-to-end-test-suite/files/LICENSE.txt' -o ~/'.claude/skills/write-end-to-end-test-suite/LICENSE.txt'

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/write-end-to-end-test-suite/raw' -o '.cursor/skills/write-end-to-end-test-suite/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/write-end-to-end-test-suite/files/LICENSE.txt' -o '.cursor/skills/write-end-to-end-test-suite/LICENSE.txt'

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/write-end-to-end-test-suite/raw' -o '.agents/skills/write-end-to-end-test-suite/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/write-end-to-end-test-suite/files/LICENSE.txt' -o '.agents/skills/write-end-to-end-test-suite/LICENSE.txt'

{
  "mcpServers": {
    "theskillvault": {
      "url": "https://theskillvault.ai/mcp"
    }
  }
}

End-to-end (E2E) tests drive your real app in a real browser, the way a user would. A few good ones catch the bugs that matter most. Too many slow, flaky ones get ignored. This skill builds a small suite you can trust.

When to use

• You want automated tests for sign-up, login, checkout or another critical journey.
• Your existing Playwright or Cypress tests fail at random and people re-run CI until green.
• You are picking a browser test tool for a new project.

When not to use

• You just want to click through a page once or grab a screenshot. Use test-web-app-with-playwright.
• You are testing a single function or component. Use write-unit-tests-with-vitest or write-unit-tests-with-jest.

Steps

1. List the 5 to 10 journeys that would hurt most if broken: sign-up, login, pay, the main create-and-save flow. Skip edge cases; unit tests cover those faster.
2. Pick the tool. Playwright (npm init playwright@latest) runs Chromium, Firefox and WebKit in parallel for free. Cypress (npm i -D cypress) has a friendly interactive runner. If the team already uses one, keep it.
3. Point the config at a local or preview URL through baseURL, and start the app before the tests (Playwright webServer, or start-server-and-test for Cypress).
4. Find elements the way a user does: by role, label or visible text. Add data-testid only where there is no good label. Never use CSS classes or nth-child.
5. Wrap each page's actions in a small page object or helper (loginPage.signIn(email, password)), so a UI change means one fix, not twenty.
6. Give every test its own data. Create a user through the API or a seed script in a fixture, and clean it up after. Tests must pass in any order.
7. Mock only what you do not own, such as payment or email providers (page.route or cy.intercept). Keep your own API real, or the test proves little.
8. Wait for things, not for time. Use web-first assertions like await expect(page.getByText("Saved")).toBeVisible(). Delete every waitForTimeout and cy.wait(3000).
9. Add CI: install browsers, run headless, retry failed tests once, and upload the HTML report and traces as artifacts.
10. Triage flaky tests weekly. Open the trace, find the race and fix it. Quarantine a test with a ticket only if a fix must wait.

Example (Playwright)

import { test, expect } from "@playwright/test";

test("a new user can sign up and see the dashboard", async ({ page }) => {
  await page.goto("/signup");
  await page.getByLabel("Email").fill(`e2e+${Date.now()}@example.test`);
  await page.getByLabel("Password").fill(process.env.E2E_PASSWORD!);
  await page.getByRole("button", { name: "Create account" }).click();
  await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
});

Gotchas

• Test passwords and API keys belong in CI secrets or a local .env that is git-ignored. Never commit them or print them in logs, traces or screenshots.
• Never point E2E tests at production with real customer data. Use a staging or preview environment.
• Retries hide flakiness. Track which tests needed a retry and fix them.
• Animations and toasts cause timing races. Turn off animations in test mode or assert on the final state.
• Logging in through the UI in every test is slow. Log in once, save the session state and reuse it.

Portability

Works with any web framework and any CI. The steps are the same in Playwright and Cypress; only the commands differ. Selenium or WebdriverIO users can apply the same rules with their equivalent APIs.

Done when

• Each critical journey has one E2E test that passes locally and in CI.
• No test uses fixed sleeps, CSS-class selectors or data from another test.
• Failed runs upload a trace or video, and the suite runs in a few minutes.

Example prompt

"Add Playwright end-to-end tests for our sign-up and checkout flows, with page objects, seeded test users and a GitHub Actions job. Our current Cypress tests are flaky, so tell me why."

---

Adapted from "e2e-testing-patterns" in wshobson/agents (MIT, Copyright (c) 2024 Seth Hobson). Original: https://github.com/wshobson/agents/blob/7e2fb559cf4b824b27f1fec49fe88f7511066d26/plugins/developer-essentials/skills/e2e-testing-patterns/SKILL.md. See LICENSE.txt.

Bundled files

• LICENSE.txt

Licence

Adapted from Seth Hobson (wshobson/agents, e2e-testing-patterns); API fixes by jwcastillo (Copyright (c) 2024 Seth Hobson), MIT License. Rewritten by TheSkillVault on 2026-11-03: the pattern catalogue became a step-by-step build of a maintained suite (journey list, selectors, page objects, data, mocks, waits, flaky-test triage, CI) with original examples, gotchas and done-when; the pyramid diagram and the reference-file pointer were dropped. Not the original file.

Licence: MIT License. Attribution when you reuse it: Based on work by Seth Hobson (wshobson/agents, e2e-testing-patterns); API fixes by jwcastillo (Copyright (c) 2024 Seth Hobson, MIT License), https://github.com/wshobson/agents/blob/7e2fb559cf4b824b27f1fec49fe88f7511066d26/plugins/developer-essentials/skills/e2e-testing-patterns/SKILL.md; adapted by TheSkillVault, https://theskillvault.ai