Playwright E2E Testing Skill

Production-ready E2E testing using Playwright MCP for the Medellin Spark platform

Simple • Fast • Reliable Test your entire user journey in minutes, not hours.

🚀 Quick Start

Run your first test in 60 seconds:

# 1. Install Playwright MCP
npm install -g @playwright/mcp@latest

# 2. Start your dev server
pnpm dev

# 3. Run smoke test
npm run test:smoke

That's it! Your first E2E test is complete. 🎉

📋 What You Get

This skill provides:

✅ 3 Ready-to-Run Test Playbooks

Smoke test (2 min) - Quick health check
Auth flow (5 min) - Login/logout testing
Full journey (10-15 min) - Complete pitch deck creation

✅ Autonomous Agent

Smart test orchestration
Intelligent error handling
Automatic screenshot capture
Network & console monitoring

✅ Production-Ready CI/CD

GitHub Actions workflows
Automated PR checks
Daily health monitoring
Test result artifacts

✅ Complete Documentation

SKILL.md - Core instructions
RUNBOOK.md - Operations guide
Examples - TypeScript reference implementations
Playbooks - Step-by-step test scripts

🎯 Use Cases

Before Every Deployment:

npm run test:all  # Verify everything works

After Code Changes:

npm run test:smoke  # Quick sanity check

Testing New Features:

npm run test:pitch-deck  # Full user journey

Debugging Issues:

# Run with browser visible (no --headless)
npx @playwright/mcp < playbooks/pitch-deck-wizard.md

📁 Project Structure

.claude/skills/playwright-e2e-skill/
├── SKILL.md                    # Main skill instructions
├── README.md                   # This file
├── RUNBOOK.md                  # Operations & troubleshooting
├── package.json                # Dependencies & scripts
│
├── playbooks/                  # Test scenarios
│   ├── smoke.md               # 2-min health check
│   ├── auth.md                # 5-min auth flow
│   └── pitch-deck-wizard.md   # 10-15 min full journey
│
├── examples/                   # TypeScript examples
│   ├── basic-navigation.ts    # Simple test pattern
│   ├── form-submission.ts     # Form testing
│   └── full-journey.ts        # Complete user flow
│
├── .github/workflows/          # CI/CD automation
│   └── e2e-tests.yml          # GitHub Actions config
│
└── .claude/agents/             # Autonomous testing agent
    └── eventos-playwright-agent/
        ├── agent.json         # Agent manifest
        ├── handler.ts         # Test orchestration logic
        └── types.ts           # TypeScript definitions

🛠️ Installation

Prerequisites

Node.js 20+
pnpm or npm
Chrome/Chromium browser

Setup

# 1. Install Playwright MCP globally
npm install -g @playwright/mcp@latest

# 2. Install Playwright browsers
npx playwright install chromium

# 3. Install project dependencies
cd .claude/skills/playwright-e2e-skill
npm install

# 4. Verify installation
npm run test:smoke

📚 Available Tests

1. Smoke Test (2 min)

What it tests:

Homepage loads
Navigation works
No console errors
API calls succeed

When to run: Before every deployment, after every code change

Command:

npm run test:smoke

Playbook: playbooks/smoke.md

2. Auth Flow (5 min)

What it tests:

Login form works
Authentication succeeds
Protected routes accessible
Session persists
Logout works

When to run: After auth code changes, before production deploy

Command:

npm run test:auth

Playbook: playbooks/auth.md

3. Pitch Deck Wizard - Full Journey (10-15 min)

What it tests:

Chat interface works
AI responds correctly
Progress tracking updates
Deck generation completes
All 10 slides render
Export functionality works

When to run: Before releases, weekly regression testing

Command:

npm run test:pitch-deck

Playbook: playbooks/pitch-deck-wizard.md

🎬 Example Output

🚀 Starting full pitch deck wizard journey...

📍 PHASE 1: Setup & Navigation
  ✅ Wizard loaded

📍 PHASE 2: AI Conversation & Data Collection
  💬 Sending message 1/6...
  💬 Sending message 2/6...
  💬 Sending message 3/6...
  💬 Sending message 4/6...
  💬 Sending message 5/6...
  💬 Sending message 6/6...
  ✅ Conversation: 6 exchanges

📍 PHASE 3: Deck Generation
  ⏳ Waiting for Generate Deck button...
  🔄 Generating deck...
  ⏳ Waiting for generation to complete...
  ✅ Deck generated

📍 PHASE 4: Slide Validation
  📊 Detected 10 slide references
  ✅ Found slide: Problem
  ✅ Found slide: Solution
  ✅ Found slide: Product
  ✅ Found slide: Market
  ✅ Found slide: Business Model
  ✅ Found slide: Team
  ✅ Found slide: Traction
  ✅ Found slide: Ask
  📈 Found 8/8 expected slide types
  🔍 Testing slide interaction...
  ✅ Slide interaction works

📍 PHASE 5: Final Verification
  ✅ No console errors
  📡 Network: 45 total, 12 API calls
  ✅ All API calls successful

============================================================
✅ FULL JOURNEY COMPLETE
============================================================
Phases: ✅ Wizard loaded → ✅ Conversation: 6 exchanges → ✅ Deck generated → ✅ 10 slides generated → ✅ Slide interaction works
Conversation exchanges: 6
Slides generated: 10
Screenshots: 7
Errors: 0

🔧 Configuration

NPM Scripts

All scripts are defined in package.json:

{
  "scripts": {
    "test:smoke": "Quick 2-min health check",
    "test:auth": "5-min authentication flow",
    "test:pitch-deck": "10-15 min full journey with video",
    "test:all": "Run all tests sequentially",
    "test:ci": "Headless mode for CI/CD",
    "examples:basic": "Run basic navigation example",
    "examples:form": "Run form submission example",
    "examples:full": "Run full journey example",
    "clean": "Remove test artifacts",
    "setup": "Install Playwright MCP"
  }
}

Environment Variables

Create .env file (optional):

# Base URL for tests
PLAYWRIGHT_BASE_URL=http://localhost:8080

# Default timeout (ms)
PLAYWRIGHT_TIMEOUT=30000

# Headless mode
PLAYWRIGHT_HEADLESS=true

🤖 Using the Agent

The eventos-playwright-agent provides autonomous test execution:

Trigger phrases:

"test the full user journey"
"run e2e tests"
"validate pitch deck wizard"
"run smoke tests"

Example usage:

import { EventosPlaywrightAgent } from '.claude/agents/eventos-playwright-agent';

const agent = new EventosPlaywrightAgent({
  baseUrl: 'http://localhost:8080',
  timeout: 30000,
  screenshotDir: './test-results'
});

// Run smoke test
const result = await agent.runSmokeTest(context);

// Run full journey
const journeyResult = await agent.runPitchDeckJourney(context);

// Generate report
const report = agent.generateReport([result, journeyResult]);
console.log(report);

🏗️ CI/CD Integration

GitHub Actions

Tests run automatically on:

Push to main/develop → Smoke tests
Pull requests → Smoke + Auth tests
Daily at 6 AM UTC → Smoke tests
Manual trigger → Choose which suite to run

See .github/workflows/e2e-tests.yml for configuration.

Manual CI Run

# Run CI-mode tests locally
npm run test:ci

📖 Learning Resources

Start here:

SKILL.md - Core skill instructions and tool reference
playbooks/smoke.md - Simplest test example
examples/basic-navigation.ts - Code example

Go deeper: 4. playbooks/pitch-deck-wizard.md - Complex journey 5. RUNBOOK.md - Operations & troubleshooting 6. handler.ts - Agent implementation

🐛 Troubleshooting

Tests failing? Check RUNBOOK.md for solutions to common issues:

Browser already in use
Dev server not running
Flaky tests
AI not responding
RLS blocking data
Slow execution

Quick fixes:

# Reset everything
pkill -f chromium
rm -rf test-results
npm run test:smoke

# View detailed logs
cat test-results/*.log

# Debug visually (no headless)
npx @playwright/mcp < playbooks/smoke.md

📊 Performance Benchmarks

Test	Expected	Good	Acceptable
Smoke Test	<2 min	<1 min	<3 min
Auth Test	<5 min	<3 min	<7 min
Full Journey	<15 min	<10 min	<20 min

🤝 Contributing

Adding a new test:

Create playbook in playbooks/my-test.md
Add npm script to package.json
Test locally: npm run test:my-test
Update this README
Submit PR

Example playbook template:

# My Test Playbook

**Purpose**: Brief description
**Duration**: X minutes
**When to Run**: When to use this test

## Test Steps

### Step 1: Description
\`\`\`typescript
await browser_navigate({ url: "..." });
\`\`\`

### Step 2: Description
\`\`\`typescript
await browser_click({ element: "...", ref: "..." });
\`\`\`

📜 License

MIT - See project root for license details

🙋 Support

Need help?

Check SKILL.md for tool reference
Check RUNBOOK.md for troubleshooting
Review examples/ for code patterns
Check playbooks/ for test scenarios

Found a bug?

Capture screenshots from test-results/
Save console logs
Document reproduction steps
File GitHub issue with evidence

Built with ❤️ for the Medellin Spark team Simple, fast, and reliable E2E testing

testing-e2e-with-playwright

Playwright E2E Testing Skill

🚀 Quick Start

📋 What You Get

🎯 Use Cases

📁 Project Structure

🛠️ Installation

Prerequisites

Setup

📚 Available Tests

1. Smoke Test (2 min)

2. Auth Flow (5 min)

3. Pitch Deck Wizard - Full Journey (10-15 min)

🎬 Example Output

🔧 Configuration

NPM Scripts

Environment Variables

🤖 Using the Agent

🏗️ CI/CD Integration

GitHub Actions

Manual CI Run

📖 Learning Resources

🐛 Troubleshooting

📊 Performance Benchmarks

🤝 Contributing

📜 License

🙋 Support