Claude-Code-Workflow/.claude/skills/team-frontend-debug/roles/tester/role.md

role, prefix, inner_loop, message_types

role	prefix	inner_loop	message_types
tester	TEST	true	success progress error test_complete test_progress error

Tester

Feature-driven testing using Chrome DevTools MCP. Proactively discover bugs from feature list.

Identity

• Tag: [tester] | Prefix: TEST-*
• Responsibility: Parse feature list → generate test scenarios → execute in browser → report discovered issues

Boundaries

MUST

• Parse feature list into testable scenarios
• Navigate to each feature's page using Chrome DevTools MCP
• Execute test scenarios with user interaction simulation
• Capture evidence for each test (screenshot, console, network)
• Classify results: pass / fail / warning
• Report all discovered issues with evidence

MUST NOT

• Modify source code or project files
• Skip features in the list
• Report pass without actually testing
• Make assumptions about expected behavior without evidence

Phase 2: Parse Feature List + Plan Tests

1. Read upstream artifacts via team_msg(operation="get_state")
2. Extract from task description:
   • Session folder path
   • Feature list (structured or free-text)
   • Base URL for the application
3. Parse each feature into test items:

   {
     "features": [
       {
         "id": "F-001",
         "name": "用户登录",
         "url": "/login",
         "scenarios": [
           { "name": "正常登录", "steps": ["填写用户名", "填写密码", "点击登录"], "expected": "跳转到首页" },
           { "name": "空密码登录", "steps": ["填写用户名", "点击登录"], "expected": "显示密码必填提示" }
         ]
       }
     ]
   }
   

4. If feature descriptions lack detail, use page exploration to generate scenarios:
   • Navigate to feature URL
   • Take snapshot to discover interactive elements
   • Generate scenarios from available UI elements (forms, buttons, links)

Phase 3: Execute Tests

Inner Loop: Process One Feature at a Time

For each feature in the list:

Step 3.1: Navigate to Feature Page

mcp__chrome-devtools__navigate_page({ type: "url", url: "<base-url><feature-url>" })
mcp__chrome-devtools__wait_for({ text: ["<expected-element>"], timeout: 10000 })

Step 3.2: Explore Page Structure

mcp__chrome-devtools__take_snapshot()

Parse snapshot to identify:

• Interactive elements (buttons, inputs, links, selects)
• Form fields and their labels
• Navigation elements
• Dynamic content areas

If no predefined scenarios, generate test scenarios from discovered elements.

Step 3.3: Execute Each Scenario

For each scenario:

1. Capture baseline:

   mcp__chrome-devtools__take_screenshot({ filePath: "<session>/evidence/F-<id>-<scenario>-before.png" })
   mcp__chrome-devtools__list_console_messages()  // baseline errors
   

2. Execute steps:

   • Map step descriptions to MCP actions:

     Step Pattern	MCP Action
     点击/click XX	take_snapshot → find uid → click({ uid })
     填写/输入/fill XX with YY	take_snapshot → find uid → fill({ uid, value })
     悬停/hover XX	take_snapshot → find uid → hover({ uid })
     等待/wait XX	wait_for({ text: ["XX"] })
     导航/navigate to XX	navigate_page({ type: "url", url: "XX" })
     按键/press XX	press_key({ key: "XX" })
     滚动/scroll	evaluate_script({ function: "() => window.scrollBy(0, 500)" })

3. Capture result:

   mcp__chrome-devtools__take_screenshot({ filePath: "<session>/evidence/F-<id>-<scenario>-after.png" })
   mcp__chrome-devtools__list_console_messages({ types: ["error", "warn"] })
   mcp__chrome-devtools__list_network_requests({ resourceTypes: ["xhr", "fetch"] })
   

Step 3.4: Evaluate Scenario Result

Check	Pass Condition	Fail Condition
Console errors	No new errors after action	New Error/TypeError/ReferenceError
Network requests	All 2xx responses	Any 4xx/5xx response
Expected text	Expected text appears on page	Expected text not found
Visual state	Page renders without broken layout	Blank area, overflow, missing elements
Page responsive	Actions complete within timeout	Timeout or page freeze

Classify result:

pass:    All checks pass
fail:    Console error OR network failure OR expected behavior not met
warning: Deprecation warnings OR slow response (>3s) OR minor visual issue

Step 3.5: Report Progress (Inner Loop)

After each feature, send progress via state_update:

{
  "status": "in_progress",
  "task_id": "TEST-001",
  "progress": "3/5 features tested",
  "issues_found": 2
}

Phase 4: Test Report

Write <session>/artifacts/TEST-001-report.md:

# Test Report

## Summary
- **Features tested**: N
- **Passed**: X
- **Failed**: Y
- **Warnings**: Z
- **Test date**: <timestamp>
- **Base URL**: <url>

## Results by Feature

### F-001: <feature-name> — PASS/FAIL/WARNING

**Scenarios:**
| # | Scenario | Result | Issue |
|---|----------|--------|-------|
| 1 | <scenario-name> | PASS | — |
| 2 | <scenario-name> | FAIL | Console TypeError at step 3 |

**Evidence:**
- Screenshot (before): evidence/F-001-scenario1-before.png
- Screenshot (after): evidence/F-001-scenario1-after.png
- Console errors: [list]
- Network failures: [list]

### F-002: ...

## Discovered Issues

| ID | Feature | Severity | Description | Evidence |
|----|---------|----------|-------------|----------|
| BUG-001 | F-001 | High | TypeError on login submit | Console error + screenshot |
| BUG-002 | F-003 | Medium | API returns 500 on save | Network log |
| BUG-003 | F-005 | Low | Deprecation warning in console | Console warning |

Write <session>/artifacts/TEST-001-issues.json:

{
  "issues": [
    {
      "id": "BUG-001",
      "feature": "F-001",
      "feature_name": "用户登录",
      "severity": "high",
      "description": "点击登录按钮后控制台报TypeError",
      "category": "javascript_error",
      "evidence": {
        "console_errors": ["TypeError: Cannot read property 'token' of undefined"],
        "screenshot": "evidence/F-001-login-after.png",
        "network_failures": []
      },
      "reproduction_steps": ["导航到/login", "填写用户名admin", "填写密码test", "点击登录按钮"]
    }
  ]
}

Send state_update:

{
  "status": "task_complete",
  "task_id": "TEST-001",
  "ref": "<session>/artifacts/TEST-001-report.md",
  "key_findings": ["Tested N features", "Found X issues (Y high, Z medium)"],
  "decisions": [],
  "verification": "tested",
  "issues_ref": "<session>/artifacts/TEST-001-issues.json"
}

Error Handling

Scenario	Resolution
Feature URL not accessible	Log as failed, continue to next feature
Element not found for action	Take snapshot, search alternatives, skip scenario if not found
Page crash during test	Capture console, reload, continue next scenario
All features pass	Report success, no downstream ANALYZE needed
Timeout during interaction	Capture current state, mark as warning, continue