Preface

Before frontend projects go live, unit tests can cover function logic, but often fail to cover “whether users can actually click elements and whether pages truly load properly”. End-to-end (E2E) testing, which runs through key workflows in a real browser, is a highly cost-effective part of quality assurance. However, setting up Playwright, writing playwright.config.ts, adding smoke tests, configuring npm scripts, and integrating GitHub Actions often requires flipping through multiple documents, and it’s easy to miss steps like adding entries to .gitignore or installing browser dependencies in CI.

If you already use AI programming tools like Cursor or Claude Code, you can hand this entire workflow over to an Agent—provided it knows the standard steps for “setting up E2E testing from scratch”. adding-e2e-tests is an Agent Skill written for this purpose: a SKILL.md instruction file that teaches Agents to implement Playwright testing in your project following a fixed workflow.

What is this

adding-e2e-tests comes from the community-maintained awesome-cursor-skills repository, curated and included by spencerpauly, and categorized under the Testing section of the repository. It follows the universal Agent Skills format (SKILL.md + YAML frontmatter) and can be used in AI programming tools that support this format, such as Cursor, Claude Code, and Codex CLI.

The official description of the Skill is: Set up Playwright end-to-end testing in a project, including test configuration, example tests, and CI integration. In other words, it does not just help you “run existing tests”, but guides the Agent to build Playwright E2E infrastructure from scratch—installing dependencies, generating configurations, writing example test cases, integrating with CI, without missing a single step.

It complements the recording-browser-flow-as-test skill in the same repository, which records browser operations into tests; compared to Anthropic’s official webapp-testing skill, which focuses on using Playwright to verify running web applications, adding-e2e-tests is more focused on “how to set up everything at once when there is no E2E framework in the project”.

Core Features and Highlights

According to the official SKILL.md, after loading this Skill, the Agent will assist you with the following capabilities:

1. Playwright Installation and Initialization
- For new projects, it is recommended to use npm init playwright@latest, which will automatically generate playwright.config.ts, the tests/ directory, and install browsers.
- If your project already has other testing frameworks, you can install manually:

npm install -D @playwright/test
npx playwright install

2. Configuration File Specifications
- Set baseURL to point to the local development server (such as http://localhost:3000).
- Configure webServer to automatically start the dev server before testing:

webServer: {
  command: "npm run dev",
  url: "http://localhost:3000",
  reuseExistingServer: !process.env.CI,
},
  • Only enable Chromium for local development to speed up testing; enable all browsers in CI environments for cross-browser validation.

3. Smoke Test and Page Object
- Generate a basic smoke test to verify that the homepage can load:

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

test("homepage loads", async ({ page }) => {
  await page.goto("/");
  await expect(page).toHaveTitle(/.+/);
});
  • For larger applications, it is recommended to create a tests/pages/ directory and use the Page Object pattern to encapsulate selectors and operations.

4. npm Scripts and Ignore Rules
- Add the following entries to package.json:

{
  "test:e2e": "playwright test",
  "test:e2e:ui": "playwright test --ui"
}
  • Exclude test-results/, playwright-report/, and blob-report/ in .gitignore.

5. CI Integration
- Run npx playwright install --with-deps in GitHub Actions, then execute npm run test:e2e.
- Upload HTML reports using the official actions/upload-artifact action when tests fail for easier troubleshooting.

6. Best Practices (Notes)
- Prioritize using data-testid for selectors to avoid relying on volatile CSS classes.
- Use test.describe to group related test cases.
- You can use npx playwright codegen to interactively record tests.

Test automation is one of the most valuable application scenarios for AI Agents: Agents can execute commands, modify configurations, and write files step by step according to the Skill, which is more stable and reproducible than describing “help me add E2E testing” verbally every time.

Installation and Activation

According to the awesome-cursor-skills README, Skill files can be copied to the .cursor/skills/ directory, and the Agent will automatically discover them. The steps are as follows:
1. Download resources/adding-e2e-tests/SKILL.md from the repository.
2. Place it in your project directory: .cursor/skills/adding-e2e-tests/SKILL.md (for global availability, place it in ~/.cursor/skills/).

Method 2: Use the npx skills CLI

vercel-labs/skills is a universal installation tool for the Agent Skills ecosystem, and the installation command for this Skill can be found on skills.sh/spencerpauly/awesome-cursor-skills:

# Install for Cursor
npx skills add spencerpauly/awesome-cursor-skills --skill adding-e2e-tests -a cursor

# Install for Claude Code
npx skills add spencerpauly/awesome-cursor-skills --skill adding-e2e-tests -a claude-code

The -g flag can be used to install to the user’s global directory; the -y flag skips interactive confirmation, which is suitable for scripting scenarios.

Trigger Conditions

The official Skill states that when the user asks to add end-to-end tests, browser tests, integration tests, or set up Playwright, the Agent should enable this Skill. You can directly say in the conversation:

Add Playwright E2E tests to this project, including CI.

The Agent will follow the seven-step workflow in the Skill, rather than arbitrarily skipping configuration or CI steps.

Typical Usage Example

Below is the Agent behavior that may be triggered in a complete conversation (all steps come from the official SKILL.md):

Step 1: Install Playwright
The Agent executes npm init playwright@latest (or the manual installation path) to create configuration files and the tests/ directory.

Step 2: Rewrite playwright.config.ts
Fill in baseURL and webServer, and distinguish browser projects between local and CI environments.

Step 3: Write a smoke test
Create a homepage loading test under tests/ to ensure that the most basic path can run successfully.

Step 4 (Optional): Page Object
If the project has many pages, encapsulate page objects for login pages, dashboards, etc. under tests/pages/.

Step 5: package.json scripts
Add test:e2e and test:e2e:ui, and you can use the UI mode for local debugging:

npm run test:e2e:ui

Step 6: .gitignore
Exclude Playwright runtime artifacts to avoid accidentally committing large-volume reports.

Step 7: GitHub Actions
Add browser dependency installation and test commands to the workflow; upload playwright-report for download and viewing when tests fail.

The entire process is consistent with the Playwright official documentation. The value of the Skill lies in gathering scattered document points into an executable checklist for the Agent, reducing omissions.

Applicable Scenarios and Notes

Who is this for

  • Frontend/Full-stack projects that have not yet integrated E2E testing and want to quickly establish a Playwright baseline.
  • Teams that have just introduced AI programming assistants who want to standardize “setting up a testing environment” and avoid inconsistent prompts from each team member.
  • Projects requiring CI gates: The Skill explicitly requires GitHub Actions integration, which is suitable for projects already using GitHub.

Usage Notes

  1. Tech Stack: The Skill examples are based on Node.js + npm; if your project uses pnpm/yarn, the dev server command and installation commands need to be adjusted by the Agent according to the actual situation of the project, and the Skill itself does not hardcode the package manager.
  2. Division of labor with webapp-testing: Anthropic’s webapp-testing focuses on “verification and debugging when a service already exists”; adding-e2e-tests focuses on “scaffolding and engineering implementation”. The two can coexist without conflict.
  3. Port and URL: baseURL and webServer.url need to match the actual dev server of your project; the Skill uses 3000 as an example, and the Agent should modify them in combination with the dev script in package.json.
  4. CI Environment: Be sure to use npx playwright install --with-deps, otherwise Linux runners will often fail due to missing system libraries.
  5. Selector Strategy: The Skill emphasizes data-testid; if the existing code does not have these attributes embedded, the Agent may need to add attributes to components or confirm with you whether to use role/text positioning instead.

The testing category in awesome-cursor-skills also includes writing-tests (unit/integration tests), api-smoke-testing (API smoke tests), etc. After setting up E2E testing, you can also use grinding-until-pass to have the Agent loop through fixes until tests pass.

Summary

adding-e2e-tests breaks down the “Playwright from scratch to CI integration” process into a seven-step checklist that the Agent can execute step by step: installation, configuration, smoke testing, scripts, ignore rules, pipeline integration, plus practical suggestions such as selectors and codegen. For developers who often ask AI to modify frontend code and want to keep quality gates up to date, installing this Skill is more convenient than re-describing requirements verbally every time.

Official Skill and source code address:
https://github.com/spencerpauly/awesome-cursor-skills/tree/main/resources/adding-e2e-tests