adding-e2e-tests

Q: How do I install adding-e2e-tests?

Run npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill adding-e2e-tests in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/adding-e2e-tests/ (personal) or .claude/skills/adding-e2e-tests/ (project).

by spencerpaulyTesting & QA

Set up Playwright end-to-end testing in a project, including test configuration, example tests, and CI integration.

Installs: 448
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill adding-e2e-tests

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads adding-e2e-tests automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Add E2E Tests (Playwright)

Use this skill when the user asks to add end-to-end tests, browser tests, integration tests, or set up Playwright.

Steps

Install Playwright
```
npm init playwright@latest
```
This creates playwright.config.ts, a tests/ directory, and installs browsers. If the project already has a test runner, install manually:
```
npm install -D @playwright/test
npx playwright install
```
Configure playwright.config.ts
- Set baseURL to the local dev server URL (e.g. http://localhost:3000).
- Configure webServer to start the dev server automatically:
```
webServer: {
  command: "npm run dev",
  url: "http://localhost:3000",
  reuseExistingServer: !process.env.CI,
},
```
- Enable only chromium for local dev speed; enable all browsers in CI.

Create a smoke test — write a basic test that verifies the app loads:

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

test("homepage loads", async ({ page }) => {
  await page.goto("/");
  await expect(page).toHaveTitle(/.+/);
});

Add page object pattern (optional) — for larger apps, create a tests/pages/ directory with page objects that encapsulate selectors and actions.

Add npm scripts

{
  "test:e2e": "playwright test",
  "test:e2e:ui": "playwright test --ui"
}

Add to .gitignore

test-results/
playwright-report/
blob-report/

CI integration — add a GitHub Actions step that runs npx playwright install --with-deps then npm run test:e2e. Use the official actions/upload-artifact to save the HTML report on failure.

Notes

Use data-testid attributes for selectors instead of CSS classes.
Use test.describe to group related tests.
Run npx playwright codegen to record tests interactively.

FAQ

What does the adding-e2e-tests skill do?

Set up Playwright end-to-end testing in a project, including test configuration, example tests, and CI integration.

How do I install adding-e2e-tests?

Run npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill adding-e2e-tests in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/adding-e2e-tests/ (personal) or .claude/skills/adding-e2e-tests/ (project).

Which AI agents can use adding-e2e-tests?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is adding-e2e-tests safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains adding-e2e-tests?

It is published by spencerpauly in spencerpauly/awesome-cursor-skills. It has 448 recorded installs.