| name | web-test-case-gen |
| description | Generate persistent test cases from project analysis, or add individual test cases interactively. Supports full project analysis or adding single test cases via prompt description with browser exploration. |
| license | MIT |
| compatibility | Node.js 18+ |
| metadata | {"author":"AI Agent","version":"2.0.0"} |
| allowed-tools | Bash Read Write Glob Grep WebSearch WebFetch Skill |
Test Case Generation
Generate persistent test cases that can be committed to version control for repeatable testing.
What This Skill Does
Full Project Analysis Mode
- Runs web-test-research - Full code tree traversal, UI screenshots, role analysis
- Generates comprehensive test cases - 6 test types for complete coverage
- Saves to ./tests/ - In the TARGET PROJECT (not agent-skills)
- Ready for git commit - Test cases persist across sessions
Test Coverage Types
╔════════════════════════════════════════════════════════════════╗
║ 6 TYPES OF TEST CASES FOR COMPLETE COVERAGE ║
╠════════════════════════════════════════════════════════════════╣
║ ║
║ 1. FLOW TESTS (FLOW-*) ║
║ - Complete user journey from start to finish ║
║ - Each module's happy path ║
║ - Alternative paths and error recovery ║
║ ║
║ 2. UI LAYOUT TESTS (LAYOUT-*) ║
║ - Desktop (1920x1080) layout verification ║
║ - Tablet (768x1024) layout verification ║
║ - Mobile (375x667) layout verification ║
║ - Responsive transitions ║
║ ║
║ 3. FUNCTIONALITY TESTS (FUNC-*) ║
║ - Input validation (required fields, format, range) ║
║ - Form submission success and failure ║
║ - Error messages and user feedback ║
║ - Edge cases and boundary conditions ║
║ ║
║ 4. NETWORK TESTS (NET-*) ║
║ - High latency behavior (3s+ delay) ║
║ - Request timeout handling ║
║ - Network error recovery ║
║ - Retry logic verification ║
║ ║
║ 5. ROLE & PERMISSION TESTS (ROLE-*) ║
║ - Guest user access restrictions ║
║ - Regular user permissions ║
║ - Admin privileges ║
║ - Unauthorized access attempts ║
║ ║
║ 6. NEGATIVE TESTS (NEG-*) ║
║ - Invalid input handling ║
║ - Error state recovery ║
║ - Transaction rejection ║
║ - Missing data handling ║
║ ║
╚════════════════════════════════════════════════════════════════╝
Quick Start
Generate All Test Cases (Full Analysis)
Generate test cases for this project
Add Single Test Case (Interactive)
Add a test case for: [describe the feature you want to test]
Workflow
┌─────────────────────────────────────────────────────────────────┐
│ web-test-case-gen - COMPLETE TEST COVERAGE │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Step 1: Run web-test-research │
│ ↓ │
│ - Full code tree traversal │
│ - Module & function mapping │
│ - UI screenshots (Desktop/Tablet/Mobile) │
│ - Role & permission analysis │
│ ↓ │
│ Step 2: Generate 6 types of test cases │
│ ↓ │
│ - FLOW tests for each module │
│ - LAYOUT tests for each viewport │
│ - FUNC tests for each function │
│ - NET tests for API interactions │
│ - ROLE tests for each user role │
│ - NEG tests for error scenarios │
│ ↓ │
│ Step 3: Write test files │
│ ↓ │
│ - tests/config.yaml │
│ - tests/test-cases.yaml │
│ - tests/case-summary.md │
│ - tests/README.md │
│ ↓ │
│ Step 4: Output ready for git commit │
│ │
└─────────────────────────────────────────────────────────────────┘
Test Type 1: Flow Tests (FLOW-*)
Purpose: Verify complete user journeys work correctly.
Based on research module map, generate flow tests for each module:
- id: FLOW-SWAP-001
name: Complete Token Swap Journey
type: flow
module: swap
feature: Token Swap
priority: critical
web3: true
wallet_popups: 1
depends_on: [WALLET-001]
description:
purpose: |
Test the complete swap flow from token selection to transaction confirmation.
Verifies the entire user journey works as designed.
coverage:
- Token selection UI
- Amount input and validation
- Quote display and refresh
- Transaction submission
- Success confirmation
preconditions:
- Wallet connected
- Has native
[]
Test Type 2: UI Layout Tests (LAYOUT-*)
Purpose: Verify UI displays correctly on different screen sizes.
- id: LAYOUT-DESKTOP-001
name: Desktop Layout - Homepage
type: layout
module: ui
feature: Responsive Design
priority: high
web3: false
wallet_popups: 0
depends_on: []
viewport:
width: 1920
height: 1080
isMobile: false
description:
purpose: |
Verify homepage displays correctly on desktop (1920x1080).
Check navigation, content layout, and element spacing.
layout_checks:
- Navigation horizontal at top
- Content centered with max-width
- Sidebar visible (if applicable)
- Footer at bottom
steps:
-
[]
[]
[]
Test Type 3: Functionality Tests (FUNC-*)
Purpose: Verify each function works correctly with valid and invalid inputs.
- id: FUNC-SWAP-VALID-001
name: Swap Valid Amount
type: functionality
module: swap
feature: Token Swap - Amount Input
priority: high
web3: true
wallet_popups: 0
depends_on: [WALLET-001]
description:
purpose: |
Verify swap form accepts valid amount input.
Test that quote loads and form becomes actionable.
steps:
- action: navigate
url: /swap
- action: fill
selector: amount input
value: "0.1"
- action: wait
ms: 2000
reason: Wait for quote
- action: screenshot
name:
[]
[]
[]
[]
Test Type 4: Network Tests (NET-*)
Purpose: Verify app handles network conditions gracefully.
Available Network Commands
| Command | Usage | Description |
|---|
set-network | --latency <ms> | Add delay to all requests |
set-network | --offline | Simulate offline mode |
set-network | --online | Restore online mode |
mock-route | <pattern> --status <code> --body <text> | Mock API response |
mock-api-error | <pattern> --status <code> | Mock API error |
mock-timeout | <pattern> | Make request hang/timeout |
throttle-network | <preset> | Throttle (slow-3g, fast-3g, offline, none) |
clear-network | | Clear all network mocks |
- id: NET-LATENCY-001
name: API Response with 3s Delay
type: network
module: api
feature: Network Handling
priority: medium
web3: false
wallet_popups: 0
depends_on: []
description:
purpose: |
Verify app handles high latency (3+ seconds) gracefully.
User should see loading indicator, not frozen UI.
steps:
- action: set-network
options: "--latency 3000"
comment: Add 3s delay to all requests
- action: navigate
url: /
- action: screenshot
name: net-latency-loading
- action: wait
ms: 4000
[]
[]
[]
[]
Test Type 5: Role & Permission Tests (ROLE-*)
Purpose: Verify each user role can access their permitted features and cannot access restricted ones.
- id: ROLE-GUEST-001
name: Guest User - Public Access
type: role
module: auth
feature: Permission Control
priority: high
web3: false
wallet_popups: 0
depends_on: []
role: guest
description:
purpose: |
Verify guest (unauthenticated) user can access public pages.
Should see public content and login/connect prompts.
steps:
- action: clear-session
comment: Ensure no authentication
- action: navigate
url: /
- action: screenshot
name: role-guest-home
expected:
- Public content visible
- Connect/Login button
[]
[]
[]
[]
[]
Test Type 6: Negative Tests (NEG-*)
Purpose: Verify error handling and recovery for failure scenarios.
- id: NEG-TX-REJECT-001
name: Wallet Transaction Rejected
type: negative
module: wallet
feature: Error Handling
priority: high
web3: true
wallet_popups: 1
depends_on: [WALLET-001]
description:
purpose: |
Verify app handles transaction rejection gracefully.
User clicks "Reject" in wallet popup.
steps:
- action: navigate
url: /swap
- action: fill
selector: amount input
value: "0.01"
- action: wait
ms: 2000
reason: Wait for quote
- action: click
selector: Swap button
[]
[]
[]
[]
Test Count Guidelines Per Module
Based on research output, generate minimum tests:
╔════════════════════════════════════════════════════════════════╗
║ MINIMUM TEST CASES PER MODULE ║
╠════════════════════════════════════════════════════════════════╣
║ ║
║ For each module found in research: ║
║ ║
║ FLOW tests: ║
║ - 1 complete happy path ║
║ - 1 alternative path (if applicable) ║
║ - 1 error recovery path ║
║ ║
║ LAYOUT tests (for each viewport): ║
║ - 1 Desktop (1920x1080) ║
║ - 1 Tablet (768x1024) ║
║ - 1 Mobile (375x667) ║
║ ║
║ FUNC tests (for each function): ║
║ - 1 valid input test ║
║ - 2+ validation tests (required, format, range) ║
║ - 1 edge case test ║
║ ║
║ NET tests (if module has API calls): ║
║ - 1 latency test ║
║ - 1 timeout test ║
║ - 1 error response test ║
║ ║
║ ROLE tests (for each role): ║
║ - 1 permitted access test ║
║ - 1 restricted access test ║
║ ║
║ NEG tests: ║
║ - 1 per error scenario identified ║
║ - 1 per validation rule ║
║ ║
║ TOTAL: 15-25 tests per major module ║
║ ║
╚════════════════════════════════════════════════════════════════╝
ID Naming Convention
| Test Type | Prefix | Example |
|---|
| Flow | FLOW- | FLOW-SWAP-001 |
| Layout | LAYOUT- | LAYOUT-DESKTOP-001 |
| Functionality | FUNC- | FUNC-SWAP-VALID-001 |
| Network | NET- | NET-LATENCY-001 |
| Role/Permission | ROLE- | ROLE-GUEST-001 |
| Negative | NEG- | NEG-TX-REJECT-001 |
| Wallet (Web3) | WALLET- | WALLET-001 |
Output Files
Location: ./tests/ (in the project being tested)
<target-project>/
├── tests/ # Test case definitions (this skill creates these)
│ ├── config.yaml # Project configuration
│ ├── test-cases.yaml # All test cases
│ ├── case-summary.md # Human-readable summary
│ └── README.md # How to run tests
└── test-output/ # Runtime artifacts (created by web-test, NOT here!)
└── screenshots/ # Screenshots saved here during test execution
IMPORTANT: Screenshots are saved to test-output/screenshots/, NOT tests/screenshots/.
The tests/ directory only contains test case definitions (YAML/MD files).
tests/config.yaml
project:
name: [from research]
url: http://localhost:3000
framework: [from research]
web3:
enabled: [true/false]
wallet: metamask
network: [from research]
viewports:
desktop:
width: 1920
height: 1080
tablet:
width: 768
height: 1024
mobile:
width: 375
height: 667
isMobile: true
roles:
- id: guest
name: Guest
description: Unauthenticated visitor
setup: clear-session
- id: user
name: Regular User
description: Authenticated
[ ]
tests/case-summary.md
# Test Case Summary
Generated by web-test-case-gen v2.0.0 on [date].
## Coverage Overview
| Test Type | Count | Purpose |
|-----------|-------|---------|
| FLOW | 10 | Complete user journeys |
| LAYOUT | 9 | Desktop/Tablet/Mobile layouts |
| FUNC | 25 | Input validation & functionality |
| NET | 6 | Network error handling |
| ROLE | 12 | Permission control |
| NEG | 15 | Error scenarios |
| **TOTAL** | **77** | |
## Test Cases by Type
### FLOW Tests (User Journeys)
| ID | Name | Module | Priority |
|----|------|--------|----------|
| FLOW-SWAP-001 | Complete Token Swap | swap | Critical |
| FLOW-SWAP-002 | Pre-selected Tokens | swap | High |
| ... | ... | ... | ... |
### LAYOUT Tests (Responsive Design)
| ID | Name | Viewport | Priority |
|----|------|----------|----------|
| LAYOUT-DESKTOP-001 | Desktop Homepage | 1920x1080 | High |
| LAYOUT-TABLET-001 | Tablet Homepage | 768x1024 | High |
| LAYOUT-MOBILE-001 | Mobile Homepage | 375x667 | High |
| ... | ... | ... | ... |
### FUNC Tests (Functionality)
| ID | Name | Module | Priority |
|----|------|--------|----------|
| FUNC-SWAP-VALID-001 | Valid Amount | swap | High |
| FUNC-SWAP-EMPTY-001 | Empty Amount | swap | High |
| ... | ... | ... | ... |
### NET Tests (Network)
| ID | Name | Scenario | Priority |
|----|------|----------|----------|
| NET-LATENCY-001 | 3s Delay | latency | Medium |
| NET-TIMEOUT-001 | Request Timeout | timeout | High |
| ... | ... | ... | ... |
### ROLE Tests (Permissions)
| ID | Name | Role | Priority |
|----|------|------|----------|
| ROLE-GUEST-001 | Public Access | guest | High |
| ROLE-GUEST-002 | Protected Blocked | guest | High |
| ROLE-USER-001 | User Features | user | High |
| ... | ... | ... | ... |
### NEG Tests (Error Handling)
| ID | Name | Scenario | Priority |
|----|------|----------|----------|
| NEG-TX-REJECT-001 | Tx Rejected | wallet | High |
| NEG-INPUT-INVALID-001 | Invalid Input | validation | High |
| ... | ... | ... | ... |
---
## Detailed Test Cases
[Full details for each test case...]
tests/README.md
# Test Cases for [Project Name]
Generated by `web-test-case-gen` on [date].
## How to Add New Test Cases
Ask Claude Code to add a test case:
\`\`\`
Add a test case for [describe what you want to test]
\`\`\`
Examples:
\`\`\`
Add a test case for verifying the swap button is disabled when amount is zero
\`\`\`
\`\`\`
Add a negative test for transaction rejection
\`\`\`
\`\`\`
Add a layout test for mobile wallet connection
\`\`\`
## How to Run Tests
Ask Claude Code to run the tests:
\`\`\`
Run all tests
\`\`\`
\`\`\`
Run the swap module tests
\`\`\`
\`\`\`
Run SWAP-001 test
\`\`\`
### Run Options
| Command | Description |
|---------|-------------|
| "Run all tests" | Execute all test cases in order |
| "Run [module] module" | Run all tests in a specific module (e.g., "Run swap module") |
| "Run [ID] test" | Run a specific test case (e.g., "Run SWAP-001") |
| "Run critical tests" | Run only critical priority tests |
| "Run negative tests" | Run only error/edge case tests |
> **Note:** The dev server will be started automatically. No manual setup required.
## Available Modules
| Module | Description | Test Count |
|--------|-------------|------------|
| [module_id] | [module_description] | [count] |
| ... | ... | ... |
*(This table is auto-generated based on modules defined in config.yaml)*
## Test Case Types
| Prefix | Type | Example |
|--------|------|---------|
| FLOW- | User journey | FLOW-SWAP-001 |
| FUNC- | Functionality | FUNC-INPUT-001 |
| LAYOUT- | Responsive design | LAYOUT-MOBILE-001 |
| NET- | Network conditions | NET-OFFLINE-001 |
| ROLE- | Permissions | ROLE-GUEST-001 |
| NEG- | Error handling | NEG-TX-FAIL-001 |
| WALLET- | Web3 wallet | WALLET-001 |
## File Structure
\`\`\`
tests/
├── config.yaml # Project config & execution order
├── test-cases.yaml # All test case definitions
├── case-summary.md # Human-readable summary
└── README.md # This file
\\`
Add Single Test Case (Interactive Mode)
When user provides a specific test case description:
╔════════════════════════════════════════════════════════════════╗
║ SINGLE TEST CASE WORKFLOW ║
╠════════════════════════════════════════════════════════════════╣
║ ║
║ Step 1: Parse user description ║
║ - Extract feature name ║
║ - Determine test type (FLOW/FUNC/NEG/etc) ║
║ - Identify expected behavior ║
║ ║
║ Step 2: Check existing config ║
║ - If no tests/config.yaml, run research first ║
║ - If exists, read current state ║
║ ║
║ Step 3: Read related source code (REQUIRED) ║
║ - Search for feature in codebase ║
║ - Read component/function implementation ║
║ - Understand validation and error handling ║
║ ║
║ Step 4: Launch browser and explore (REQUIRED) ║
║ - Navigate to feature page ║
║ - Take screenshots ║
║ - Identify UI elements and selectors ║
║ ║
║ Step 5: Generate test case YAML ║
║ - Create unique ID with proper prefix ║
║ - Define steps based on exploration ║
║ - Add expected outcomes ║
║ ║
║ Step 6: Update all test files ║
║ - Append to test-cases.yaml ║
║ - Append to case-summary.md ║
║ - Update README.md table ║
║ - Update config.yaml execution_order ║
║ ║
╚════════════════════════════════════════════════════════════════╝
Related Skills
| Skill | Relationship |
|---|
| web-test-research | Called automatically first |
| web-test | Uses generated test cases |
| web-test-report | References test case IDs |
| web-test-cleanup | Clean up after test generation |
After Generation
- Review - Check generated test cases cover all scenarios
- Commit -
git add tests/ && git commit -m "Add comprehensive test cases"
- Run -
skill web-test to execute tests
