Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (openspec-playwright) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

OpenSpec + Playwright E2E Verification

中文说明

A setup tool that integrates OpenSpec's spec-driven development with Playwright's three-agent test pipeline for automated E2E verification.

Install

npm install -g openspec-playwright

Setup

# In your project directory
openspec init              # Initialize OpenSpec
openspec-pw init          # Install Playwright E2E integration

Usage

In Claude Code

/opsx:e2e my-feature    # Primary command (OpenSpec convention)
/openspec-e2e           # Alternative from skill

CLI Commands

openspec-pw init          # Initialize integration (one-time setup)
openspec-pw update       # Update CLI and skill to latest version
openspec-pw doctor       # Check prerequisites

How It Works

/openspec-e2e <change-name>
  │
  ├── 1. Read OpenSpec specs from openspec/changes/<name>/specs/
  │
  ├── 2. Planner Agent → generates test-plan.md
  │
  ├── 3. Generator Agent → creates tests/playwright/<name>.spec.ts
  │
  └── 4. Healer Agent → runs tests + auto-heals failures
          │
          └── Report: openspec/reports/playwright-e2e-<name>.md

Two Verification Layers

Layer	Command	What it checks
Static	`/opsx:verify`	Implementation matches artifacts
E2E	`/opsx:e2e`	App works when running

Prerequisites

Node.js >= 20
OpenSpec initialized: npm install -g @fission-ai/openspec && openspec init
Claude Code with Playwright MCP configured

What `openspec-pw init` Does

Installs Playwright MCP globally via claude mcp add
Installs /opsx:e2e command and /openspec-e2e skill
Generates tests/playwright/seed.spec.ts, auth.setup.ts, credentials.yaml

Note: After running openspec-pw init, manually install Playwright browsers: npx playwright install --with-deps

Authentication

If your app requires login, set up credentials once, then all tests run authenticated automatically.

# 1. Edit credentials
vim tests/playwright/credentials.yaml

# 2. Set environment variables
export E2E_USERNAME=your-email@example.com
export E2E_PASSWORD=your-password

# 3. Record login (one-time — opens browser, log in manually)
npx playwright test --project=setup

# 4. All subsequent tests use the saved session
/opsx:e2e my-feature

Supports API login (preferred) and UI login (fallback). For multi-user tests (admin vs user), add multiple users in credentials.yaml and run /opsx:e2e — it auto-detects roles from specs.

Customization

Customize seed test

Edit tests/playwright/seed.spec.ts to match your app's:

Base URL
Common selectors
Page object methods

Authentication credentials

Edit tests/playwright/credentials.yaml:

Set login API endpoint (or leave empty for UI login)
Configure test user credentials
Add multiple users for role-based tests

MCP server

Playwright MCP is installed globally via claude mcp add. Restart Claude Code after setup to activate.

Architecture

openspec-pw (CLI - setup only)
  ├── Installs Playwright agents (.github/)
  ├── Installs Playwright MCP globally via claude mcp add
  ├── Installs Claude Code skill (/openspec-e2e)
  └── Installs command (/opsx:e2e)

/openspec-e2e (Claude Code skill - runs in Claude)
  ├── Reads OpenSpec specs
  ├── Triggers Playwright agents via MCP
  └── Generates E2E verification report

License

MIT