Testing Workflow Majiayu000

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 feedback
• web-browser - Chrome DevTools for debugging and performance
• agent-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

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

  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);
   });

2. Agent Browser CLI: E2E test the flow

   agent-browser open http://localhost:5173/signup
   agent-browser fill @email "john@example.com"
   agent-browser click @submit
   agent-browser wait --text "Welcome"
   

3. 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

❌ Skipping Layers

Don't jump to E2E without unit tests. Test pyramid:

• 70% Unit (Wallaby)
• 20% Integration
• 10% E2E (TestSprite)

Integration with Other Skills

Version

v1.0.0 (2025-01-28) - Integrated testing workflow