Agent skill
skill-testing-workflow
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/skill-testing-workflow
SKILL.md
Testing Workflow
Purpose
Guide the selection and combination of testing tools based on environment, phase, and test type. This skill integrates multiple testing tools into coherent workflows.
Official Skills Referenced:
wallaby-testing- Unit/integration tests with live feedbackweb-browser- Chrome DevTools for debugging and performanceagent-browser- Browser automation for E2E testing
When to Use
- Deciding which testing tools to use
- Planning testing strategy for a feature
- Executing tests in different environments
- Combining multiple testing tools
- Setting up testing workflow for team
Tool Overview Matrix
| Tool | Type | Best For | Environment |
|---|---|---|---|
| Wallaby | Unit/Integration | TDD, live feedback, logic testing | VS Code (local/codespace) |
| Chrome DevTools MCP | Debug/Performance | Runtime debugging, layout issues, performance | Any with Chrome |
| Agent Browser CLI | E2E Exploration | Quick E2E flows, user journey discovery | Local |
| TestSprite MCP | E2E Stable | Regression testing, pre-PR validation | All |
| Container-Use MCP | Isolated Tests | Build tests, experiments, A/B testing | Local only |
Environment-Based Workflows
Codespace / VS Code Web
Available Tools:
- ✅ Wallaby MCP (if configured)
- ✅ Chrome DevTools MCP (via remote Chrome)
- ✅ TestSprite MCP
- ❌ Agent Browser CLI (not recommended - heavy)
- ❌ Container-Use (local only)
Recommended Workflow:
## Development Loop (Codespace)
1. **Start Dev Server**
- DevServer MCP monitors for errors
2. **Unit/Integration Testing**
- Use: **Wallaby MCP** (if available)
- Alternative: `npm test` / `pytest`
3. **Runtime Debugging**
- Use: **Chrome DevTools MCP**
- For: Layout issues, console errors, performance
4. **Pre-PR Validation**
- Use: **TestSprite MCP** (skill-testsprite-pre-pr)
- Run: Full E2E suite
Local Development
Available Tools:
- ✅ All tools available
Recommended Workflow:
## Development Loop (Local)
1. **Start Dev Server**
- DevServer MCP monitors
2. **TDD - Unit/Integration**
- Use: **Wallaby MCP**
- Real-time feedback as you type
3. **Explore E2E Flows**
- Use: **Agent Browser CLI**
- Quick iteration on user journeys
- Command: `agent-browser open http://localhost:5173`
4. **Debug Issues**
- Use: **Chrome DevTools MCP**
- Deep inspection of problems
5. **Stable E2E Tests**
- Promote from Agent Browser to **TestSprite MCP**
- Add to regression suite
6. **Experiments/Build Tests**
- Use: **Container-Use MCP** (optional)
- Isolated environment testing
Container / Docker
Available Tools:
- ✅ Unit tests (via container)
- ✅ TestSprite MCP
- ❌ Wallaby (UI not available)
- ❌ Chrome DevTools (no browser)
- ❌ Agent Browser (no browser)
Recommended Workflow:
## Development Loop (Container)
1. **Unit Tests**
- Run: `npm test` / `pytest` in container
- No live feedback - run manually
2. **E2E Tests**
- Use: **TestSprite MCP** (external browser)
- Or: Run Playwright in container with display
Phase-Based Workflows
Phase 1: Feature Development (Branch)
## Feature Development Testing
### Continuous (as you code)
- **Wallaby MCP**: Live unit test feedback
- **DevServer MCP**: Build error monitoring
### On Demand
- **Chrome DevTools MCP**: Debug visual/runtime issues
- **Agent Browser CLI**: Explore E2E scenarios
### Before Commit
- Run unit tests: `npm test`
- Verify no regressions
Phase 2: Integration (Task/PRD Complete)
## Integration Testing
### Full Unit/Integration Suite
```bash
npm test -- --coverage
# or
pytest --cov=src
E2E Smoke Test
- Agent Browser CLI: Quick validation
bash
agent-browser open http://localhost:5173 agent-browser snapshot -i # Verify critical paths work
Debug Issues
- Chrome DevTools MCP: For any failures
### Phase 3: Pre-PR (Ready for Review)
```markdown
## Pre-PR Testing (skill-testsprite-pre-pr)
### Comprehensive E2E
- **TestSprite MCP**: Full test suite
- Bootstrap: `testsprite_bootstrap_tests`
- Generate: `testsprite_generate_tests`
- Run: `testsprite_run_tests`
- Analyze: `testsprite_analyze_results`
### Human Review Points (HITL)
1. Review generated test plan
2. Confirm backend/frontend scope
3. Approve diff vs codebase testing
### All Green?
- ✅ Open PR
- ❌ Fix failures, re-run
Tool Combination Scenarios
Scenario: New API Endpoint
## Testing New API Endpoint
1. **Wallaby MCP**: Unit test the handler
```typescript
test('POST /api/users creates user', async () => {
const res = await request(app)
.post('/api/users')
.send({ name: 'John' });
expect(res.status).toBe(201);
});
-
Agent Browser CLI: E2E test the flow
bashagent-browser open http://localhost:5173/signup agent-browser fill @email "[email protected]" agent-browser click @submit agent-browser wait --text "Welcome" -
TestSprite MCP: Add to regression
- Generate stable test from Agent Browser flow
- Include in pre-PR suite
### Scenario: UI Bug Fix
```markdown
## Testing UI Bug Fix
1. **Chrome DevTools MCP**: Reproduce and inspect
- Screenshot before fix
- Check computed styles
- Verify DOM structure
2. **Wallaby MCP**: Add regression test
- Test component renders correctly
- Test interaction works
3. **Agent Browser CLI**: Verify E2E
- Full user flow through affected area
Scenario: Performance Issue
## Testing Performance Fix
1. **Chrome DevTools MCP**: Measure before/after
- Performance trace
- LCP, FID, CLS metrics
- Network waterfall
2. **TestSprite MCP**: Regression prevention
- Add performance assertions
- Monitor in CI
Quick Decision Tree
What do you need to test?
│
├─→ Unit/Integration logic
│ └─→ VS Code? → Wallaby MCP
│ └─→ Other? → npm test / pytest
│
├─→ Visual/DOM/Runtime issue
│ └─→ Chrome DevTools MCP
│
├─→ Explore E2E flow (new feature)
│ └─→ Local? → Agent Browser CLI
│ └─→ Codespace? → Chrome DevTools MCP
│
├─→ Stable E2E regression
│ └─→ TestSprite MCP
│
└─→ Build/Experiment isolation
└─→ Local? → Container-Use MCP
└─→ Other? → Not available
Official Skill References
wallaby-testing
**Use when:**
- In VS Code
- Need live test feedback
- Debugging failing tests
- Checking coverage
**Key tools:**
- wallaby_failingTests
- wallaby_runtimeValues
- wallaby_coveredLinesForFile
- wallaby_updateTestSnapshots
**See:** `wallaby-skill/SKILL.md`
web-browser (Chrome DevTools)
**Use when:**
- Debugging runtime issues
- Analyzing performance
- Inspecting DOM/network
- Taking screenshots
**Key commands:**
- Start: `./scripts/start.js`
- Navigate: `./scripts/nav.js`
- Screenshot: `./scripts/screenshot.js`
- Eval: `./scripts/eval.js`
**See:** `web-browser-CHROME-DEV-TOOLS-skill/SKILL.md`
agent-browser
**Use when:**
- E2E exploration
- Quick user journey validation
- Form testing
- Multi-step flows
**Key commands:**
- Open: `agent-browser open <url>`
- Snapshot: `agent-browser snapshot -i`
- Interact: `agent-browser click @ref`
- Fill: `agent-browser fill @ref "text"`
**See:** `agent-browser-skill/SKILL.md`
Anti-Patterns to Avoid
❌ Running All Tools Simultaneously
Don't run Chrome DevTools MCP + Agent Browser + TestSprite all at once locally. Too heavy.
Instead: Use one E2E tool at a time:
- Agent Browser for exploration
- TestSprite for stable tests
❌ Wrong Tool for Job
| Wrong | Right |
|---|---|
| Agent Browser for unit tests | Wallaby/npm test |
| Chrome DevTools for TDD | Wallaby |
| TestSprite for exploration | Agent Browser |
| Wallaby for E2E | TestSprite |
❌ Skipping Layers
Don't jump to E2E without unit tests. Test pyramid:
- 70% Unit (Wallaby)
- 20% Integration
- 10% E2E (TestSprite)
Integration with Other Skills
| Skill | When to Use |
|---|---|
| skill-test-setup | Initial configuration |
| skill-testing-philosophy | Understanding TDD |
| skill-testsprite-pre-pr | Pre-PR validation |
Version
v1.0.0 (2025-01-28) - Integrated testing workflow
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?