getting-started

getting-started

What is web E2E testing

Web end-to-end (E2E) testing exercises a web application the way a real user would: a browser is launched, pages are loaded, interactions are performed (clicks, form fills, navigations), and outcomes are asserted against what the user should see. Per playwright.dev/docs/intro: "Playwright Test is an end-to-end test framework for modern web apps. It bundles test runner, assertions, isolation, parallelization and rich tooling." E2E tests sit at the top of the testing pyramid - they are the most realistic but also the slowest and most resource-intensive layer, so they complement, rather than replace, unit and integration tests.

Step 1 - Decide on a framework

If you are not sure which tool to use, run the web-e2e-framework-selector agent first. It reads your project (package.json, any existing config files) and recommends exactly one framework - Playwright, Cypress, Selenium, Puppeteer, TestCafe, or WebdriverIO - based on your stack. Skip this step only if the team has already committed to a framework.

Step 2 - Three skills to start with

Goal	Component	When to reach for it
Scaffold and author your first tests	playwright-testing	Greenfield project or no existing E2E suite. Playwright is the modern default for new web projects.
Generate a test skeleton from a user story	spec-to-e2e-test-scaffolder agent	You have a story or test-case row and want a clean scaffold with // TODO placeholders rather than raw codegen.
Make the test code team-ready	test-code-conventions	After authoring: enforce selector, naming, and structure conventions before the PR lands.

Start with playwright-testing unless web-e2e-framework-selector sends you elsewhere.

Step 3 - Your first commands

Per playwright.dev/docs/intro:

# 1. Scaffold - prompts for TypeScript/JS, tests folder, CI workflow, browser binaries
npm init playwright@latest

# 2. Run the generated example to confirm the install is healthy
npx playwright test

The init wizard creates playwright.config.ts, updates package.json, and writes tests/example.spec.ts. Running npx playwright test immediately after install runs the bundled example spec across Chromium, Firefox, and WebKit - all three should pass on a clean machine (playwright.dev/docs/intro).

After the example passes, open tests/example.spec.ts, read it, then follow playwright-testing for authoring your real tests.

What is in this plugin

Type	Name	Purpose
Skill	playwright-testing	Author + run Playwright tests (Chromium, Firefox, WebKit)
Skill	cypress-testing	Author + run Cypress tests
Skill	selenium-testing	Author + run Selenium WebDriver tests
Skill	webdriverio-testing	Author + run WebdriverIO tests
Skill	puppeteer-testing	Chrome/Chromium browser automation with Puppeteer
Skill	testcafe-testing	Author + run TestCafe tests (no WebDriver)
Agent	web-e2e-framework-selector	Reads your project and recommends one framework
Agent	spec-to-e2e-test-scaffolder	Generates a test scaffold from a user story
Agent	playwright-codegen-reviewer	Refactors raw Playwright codegen output to Page Object Model
Agent	cypress-codegen-reviewer	Refactors raw Cypress Studio recordings to idiomatic Cypress
Agent	selenium-grid-orchestrator	Manages distributed Selenium runs across Grid / cloud farms

d6 = 0 hard-reject rule

Any revision to this skill that removes inline source citations from the commands or quoted text in "What is web E2E testing" makes d6 = 0 and the component becomes a hard reject. All concrete claims about tool behavior must stay cited to playwright.dev/docs/intro at the point of use.