
sc-e2e
E2E testing workflow supporting Playwright, Cypress, and Selenium. Run, debug, record, trace, generate test scaffolds, and view reports. Use when running browser tests, debugging E2E failures, or generating test scaffolds.
- Installs
- 69
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/tony363/superclaude --skill sc-e2e- 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 sc-e2e 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.
E2E Testing Skill
Comprehensive end-to-end testing workflow with support for multiple frameworks and interactive debugging.
Quick Start
# Run all E2E tests
/sc:e2e run
# Run specific test file
/sc:e2e run --file auth.spec.ts
# Debug failing test
/sc:e2e debug --file auth.spec.ts --ui
# Record user interactions
/sc:e2e record --url /login
# Run with tracing enabled
/sc:e2e trace --file checkout.spec.ts
# Generate test scaffold
/sc:e2e generate spec user-profile
# View test report
/sc:e2e report
Behavioral Flow
- Detect - Identify E2E framework (Playwright, Cypress, Selenium)
- Configure - Parse mode and options from arguments
- Execute - Run the selected mode
- Analyze - Parse results, identify failures
- Interact - Offer debugging, re-run, or fix options
- Report - Present results with actionable next steps
Flags
| Flag | Type | Default | Description |
|---|---|---|---|
--file | string | - | Specific test file to target |
--grep | string | - | Filter tests by name pattern |
--headed | bool | false | Run in headed browser mode |
--workers | int | auto | Number of parallel workers |
--ui | bool | false | Open framework UI mode |
--url | string | / | Starting URL for record mode |
--output | string | - | Output file for generated code |
--framework | string | auto | Force framework: playwright, cypress, selenium |
Framework Detection
Auto-detect the E2E framework from project config:
| Framework | Detection | Config File |
|---|---|---|
| Playwright | @playwright/test in package.json | playwright.config.ts |
| Cypress | cypress in package.json | cypress.config.ts |
| Selenium | selenium-webdriver in package.json | wdio.conf.js |
# Detection logic
if [ -f "playwright.config.ts" ] || [ -f "playwright.config.js" ]; then
FRAMEWORK="playwright"
elif [ -f "cypress.config.ts" ] || [ -f "cypress.config.js" ]; then
FRAMEWORK="cypress"
elif [ -f "wdio.conf.js" ] || [ -f "wdio.conf.ts" ]; then
FRAMEWORK="selenium"
fi
Mode 1: run - Execute Tests
Run E2E tests with optional filters and configuration.
Playwright
npx playwright test [--grep "pattern"] [--headed] [--workers N] [file]
Cypress
npx cypress run [--spec "file"] [--headed] [--browser chrome]
Post-Run Analysis
After test execution, parse output and offer interactive options:
Test run complete: X passed, Y failed
[r] Re-run failed tests
[d] Debug failing test
[t] View trace/screenshot
[f] Fix with /sc:tdd
[a] Run all tests
[q] Quit
Mode 2: debug - Interactive Debugging
Launch the framework's debug mode for step-through testing.
Playwright Debug Options
| Option | Command | Use Case |
|---|---|---|
| UI mode | npx playwright test --ui | Visual step-through with time-travel |
| Inspector | PWDEBUG=1 npx playwright test | Selector builder + breakpoints |
| Slow-mo | npx playwright test --headed --slowmo=500 | Watch test execution |
Cypress Debug Options
| Option | Command | Use Case |
|---|---|---|
| Open mode | npx cypress open | Interactive test runner |
| Debug | npx cypress run --headed --no-exit | Keep browser open on failure |
Debugging Tips
- Use
await page.pause()(Playwright) orcy.pause()(Cypress) for breakpoints - Check screenshots in
test-results/orcypress/screenshots/ - Use trace viewer for time-travel debugging
Mode 3: record - Record User Interactions
Use codegen tools to record browser interactions and generate test code.
Playwright
npx playwright codegen http://localhost:3000[url-path]
Cypress
npx cypress open # Use Cypress Studio for recording
Post-Recording
- Review generated code
- Offer conversion to page object pattern:
- Extract selectors to page object class
- Convert actions to reusable methods
- Add assertions from existing patterns
Mode 4: trace - Tracing
Run tests with tracing enabled or view existing traces.
Playwright
# Run with tracing
npx playwright test --trace on [file]
# View trace
npx playwright show-trace test-results/[trace].zip
Cypress
# Traces are auto-captured in cypress/videos/
# Screenshots in cypress/screenshots/
Mode 5: generate - Test Scaffolding
Generate test files following project patterns.
generate spec <name>
Create a new test spec file with:
- Import statements for the framework
- Describe blocks with page name
- beforeEach with login/navigation
- Empty test stubs for common scenarios
generate page <name>
Create a new page object with:
- Selector constants extracted from the target page component
- Action methods (click, fill, navigate)
- Assertion helpers (expectLoaded, expectError)
Page Object Pattern
// Playwright page object template
import { Page, Locator, expect } from '@playwright/test';
export class UserProfilePage {
readonly page: Page;
readonly nameInput: Locator;
readonly saveButton: Locator;
constructor(page: Page) {
this.page = page;
this.nameInput = page.getByTestId('profile-name');
this.saveButton = page.getByTestId('profile-save');
}
async goto(): Promise<void> {
await this.page.goto('/profile');
}
async updateName(name: string): Promise<void> {
await this.nameInput.fill(name);
await this.saveButton.click();
}
async expectLoaded(): Promise<void> {
await expect(this.nameInput).toBeVisible();
}
}
Mode 6: report - View Reports
View and analyze test reports.
Playwright
npx playwright show-report
Cypress
# Open Mochawesome report if configured
open cypress/reports/index.html
Summary Output
## E2E Test Report
| Suite | Tests | Passed | Failed | Skipped | Duration |
|-------|-------|--------|--------|---------|----------|
| Auth | 5 | 5 | 0 | 0 | 12.3s |
| Dashboard | 8 | 7 | 1 | 0 | 24.1s |
| Checkout | 3 | 3 | 0 | 0 | 18.7s |
**Total**: 16 tests, 15 passed, 1 failed (93.8%)
Environment Variables
| Variable | Purpose |
|---|---|
BASE_URL | Application URL for tests (default: http://localhost:3000) |
E2E_USERNAME | Test user credentials |
E2E_PASSWORD | Test user password |
CI | Adjusts workers and retries for CI |
PWDEBUG | Enable Playwright Inspector |
MCP Integration
PAL MCP
| Tool | When to Use | Purpose |
|---|---|---|
mcp__pal__debug | Test failures | Root cause analysis for E2E failures |
mcp__pal__codereview | Generated tests | Review test quality and coverage |
mcp__pal__apilookup | Framework docs | Get current Playwright/Cypress API docs |
PAL Usage Patterns
# Debug failing E2E test
mcp__pal__debug(
step="E2E test 'checkout flow' fails on payment step",
hypothesis="Selector changed after UI update",
confidence="medium",
relevant_files=["tests/e2e/checkout.spec.ts", "src/components/PaymentForm.tsx"]
)
# Review generated page object
mcp__pal__codereview(
review_type="quick",
step="Review generated page object for completeness",
relevant_files=["tests/e2e/pages/checkout.page.ts"]
)
Rube MCP
| Tool | When to Use | Purpose |
|---|---|---|
mcp__rube__RUBE_MULTI_EXECUTE_TOOL | CI integration | Post E2E results to Slack, update tickets |
Tool Coordination
- Bash - Framework CLI commands (playwright, cypress)
- Glob - Test file discovery, page component scanning
- Grep - Selector extraction from components, test output parsing
- Read - Component inspection for page object generation
- Write - Generated test files, page objects
Related Skills
/sc:test- Unit and integration testing/sc:tdd- Test-driven development workflow/sc:pr-check- Pre-PR validation including E2E/sc:implement- Feature implementation with test generation
FAQ
What does the sc-e2e skill do?
E2E testing workflow supporting Playwright, Cypress, and Selenium. Run, debug, record, trace, generate test scaffolds, and view reports. Use when running browser tests, debugging E2E failures, or generating test scaffolds.
How do I install sc-e2e?
Run npx skills add https://github.com/tony363/superclaude --skill sc-e2e 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/sc-e2e/ (personal) or .claude/skills/sc-e2e/ (project).
Which AI agents can use sc-e2e?
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 sc-e2e 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 sc-e2e?
It is published by tony363 in tony363/superclaude. It has 69 recorded installs.
More from tony363/superclaude
agent-performance-engineer
tony363/superclaude
Expert performance engineer specializing in system optimization, bottleneck identification, and scalability engineering. Masters performance testing, profiling, and tuning across applications, databases, and infrastructure with focus on achieving optimal response times and resource efficiency.
agent-security-engineer
tony363/superclaude
Expert infrastructure security engineer specializing in DevSecOps, cloud security, and compliance frameworks. Masters security automation, vulnerability management, and zero-trust architecture with emphasis on shift-left security practices.
sc-estimate
tony363/superclaude
Provide development estimates for tasks, features, or projects with intelligent analysis. Use when planning timelines, assessing complexity, or scoping resources.
agent-fullstack-developer
tony363/superclaude
End-to-end feature owner with expertise across the entire stack. Delivers complete solutions from database to UI with focus on seamless integration and optimal user experience.
sc-design
tony363/superclaude
Design system architecture, APIs, and component interfaces with comprehensive specifications. Use when planning architecture, designing APIs, creating component interfaces, or modeling databases.
agent-technical-writer
tony363/superclaude
Open the skill to read its SKILL.md instructions.
Popular testing & qa skills
tdd
mattpocock/skills
Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.
grilling
mattpocock/skills
Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.
migrate-to-shoehorn
mattpocock/skills
Migrate test files from as type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace as in tests, or needs partial test data.
run-train
lllllllama/rigorpilot-skills
Rigor Train skill for deep learning research repositories. Use when a documented or selected training command should be run conservatively for startup verification, short-run verification, full kickoff, or resume, with command, config, seed, log, checkpoint, status, and metric evidence written to standardized trainoutputs/. Do not use for environment setup, exploratory sweeps, speculative idea implementation, or end-to-end orchestration.
test-driven-development
obra/superpowers
Use when implementing any feature or bugfix, before writing implementation code
finishing-a-development-branch
obra/superpowers
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work