メニュー
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.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/ForceInjection/domain-driven-design-skills --skill web-test-case-genコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Conduct deep academic research for philosophy, neuroscience, cognitive science, and theoretical computer science (computability, complexity, AI theory, logic). Use when user asks to: research academic topics, find scholarly papers, conduct literature reviews, analyze citations, synthesize research findings, explore philosophical arguments, investigate consciousness/cognition, study computability/decidability/Turing machines, or analyze academic debates. Triggers on: 'research papers', 'literature review', 'academic sources', 'scholarly articles', 'philosophy of mind', 'computability theory', 'neuroscience studies', 'find papers on', 'what does the research say'.
Create clear action plans with steps, success criteria, and risk awareness. Use before implementing features, making changes, starting projects, or anytime you need a roadmap to success. Triggers on "plan this", "how should we approach", "what's the strategy", "steps to complete", or when facing complex multi-step work.
Add keyboard navigation to a feature using CommandRegistryService. Use when implementing keyboard shortcuts, vim-style navigation, or hotkeys for a page or component.
SOC 職業分類に基づく
SKILL.md を表示中
| 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 |
Generate persistent test cases that can be committed to version control for repeatable testing.
╔════════════════════════════════════════════════════════════════╗
║ 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 ║
║ ║
╚════════════════════════════════════════════════════════════════╝
Generate test cases for this project
Add a test case for: [describe the feature you want to test]
┌─────────────────────────────────────────────────────────────────┐
│ 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 │
│ │
└─────────────────────────────────────────────────────────────────┘
Purpose: Verify complete user journeys work correctly.
Based on research module map, generate flow tests for each module:
# Flow Test Example: Complete Swap Journey
- 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
[]
Purpose: Verify UI displays correctly on different screen sizes.
# Desktop Layout Test
- 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:
-
[]
[]
[]
Purpose: Verify each function works correctly with valid and invalid inputs.
# Functionality Test: Valid Input
- 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:
[]
[]
[]
[]
Purpose: Verify app handles network conditions gracefully.
| 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 |
# Network Test: High Latency
- 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
[]
[]
[]
[]
Purpose: Verify each user role can access their permitted features and cannot access restricted ones.
# Role Test: Guest User
- 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
[]
[]
[]
[]
[]
Purpose: Verify error handling and recovery for failure scenarios.
# Negative Test: Transaction Rejection
- 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
[]
[]
[]
[]
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 ║
║ ║
╚════════════════════════════════════════════════════════════════╝
| 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 |
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).
project:
name: [from research]
url: http://localhost:3000
framework: [from research]
web3:
enabled: [true/false]
wallet: metamask
network: [from research]
# Screen sizes for layout tests
viewports:
desktop:
width: 1920
height: 1080
tablet:
width: 768
height: 1024
mobile:
width: 375
height: 667
isMobile: true
# User roles for permission tests
roles:
- id: guest
name: Guest
description: Unauthenticated visitor
setup: clear-session
- id: user
name: Regular User
description: Authenticated
[ ]
# 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...]
# 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
\\`
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 ║
║ ║
╚════════════════════════════════════════════════════════════════╝
| 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 |
git add tests/ && git commit -m "Add comprehensive test cases"skill web-test to execute tests