web-ui-test（网页用户界面测试）

Playwright UI Tester

Web UI testing skill. Registers Playwright MCP via UTCP and performs browser automation.

Required Setup: Playwright Registration

This procedure must be run before all tasks.

Step 1: Check Registration

mcp__code-mode__list_tools()

If the result includes tools starting with playwright → go to Step 3 Otherwise → run Step 2

Step 2: Register Playwright

mcp__code-mode__register_manual({
  manual_call_template: {
    name: "playwright",
    call_template_type: "mcp",
    config: {
      mcpServers: {
        "playwright": {
          transport: "stdio",
          command: "npx",
          args: ["@playwright/mcp@latest"]
        }
      }
    }
  }
})

After registration, verify that playwright tools appear via mcp__code-mode__list_tools().

Registration Failure - Must diagnose and resolve the root cause

Do not fall back to alternatives. Diagnose the problem, fix it, then retry:

Diagnostic steps:

# 1. Check if npx is available
npx --version

# 2. Check package accessibility
npx @playwright/mcp@latest --version 2>&1 | head -5

# 3. Check for network issues
npm ping 2>&1

Common failure causes and fixes:

Chrome Profile Lock Recovery (Windows)

If Chrome only shows about:blank or exits immediately when launching Playwright:

# 1. Kill existing mcp-chrome process
cmd /c "taskkill /F /IM chrome.exe /FI \"COMMANDLINE like *mcp-chrome*\""

# 2. Delete profile lock files
cmd /c "del /F /Q \"%LOCALAPPDATA%\\ms-playwright\\mcp-chrome\\SingletonLock\" 2>nul"
cmd /c "del /F /Q \"%LOCALAPPDATA%\\ms-playwright\\mcp-chrome\\SingletonCookie\" 2>nul"
cmd /c "del /F /Q \"%LOCALAPPDATA%\\ms-playwright\\mcp-chrome\\SingletonSocket\" 2>nul"

# 3. If still failing, delete entire profile directory
cmd /c "rmdir /S /Q \"%LOCALAPPDATA%\\ms-playwright\\mcp-chrome\""

# 4. If all 3 steps fail → close any open about:blank windows manually and retry

Auto-detection: If you see browserType.launchPersistentContext: Failed to launch error + process did exit: exitCode=0 pattern, this is the issue.

Fallback: Launch with a new profile path

If recovery fails, register Playwright with a temporary profile instead of mcp-chrome:

mcp__code-mode__register_manual({
  manual_call_template: {
    name: "playwright",
    call_template_type: "mcp",
    config: {
      mcpServers: {
        "playwright": {
          transport: "stdio",
          command: "npx",
          args: ["@playwright/mcp@latest", "--user-data-dir", "%LOCALAPPDATA%/ms-playwright/mcp-chrome-" + Date.now()]
        }
      }
    }
  }
})

Timestamp-based profile → no lock conflicts. Note: cookies/session are reset each time.

Diagnose → fix → re-register. Always resolve before proceeding.

Step 3: Using Playwright Tools

The registered Playwright is called via mcp__code-mode__call_tool_chain:

// Navigate to page
mcp__code-mode__call_tool_chain({
  code: `
    const result = await playwright.playwright_browser_navigate({ url: 'http://...' });
    return result;
  `
})

// Snapshot (primary use)
mcp__code-mode__call_tool_chain({
  code: `
    const snapshot = await playwright.playwright_browser_snapshot();
    return snapshot;
  `
})

// Screenshot
mcp__code-mode__call_tool_chain({
  code: `
    const screenshot = await playwright.playwright_browser_take_screenshot();
    return screenshot;
  `
})

// Click
mcp__code-mode__call_tool_chain({
  code: `
    const result = await playwright.playwright_browser_click({ ref: 'e123' });
    return result;
  `
})

// Form input
mcp__code-mode__call_tool_chain({
  code: `
    const result = await playwright.playwright_browser_type({ ref: 'e456', text: 'input text' });
    return result;
  `
})

// Wait
mcp__code-mode__call_tool_chain({
  code: `
    const result = await playwright.playwright_browser_wait_for({ text: 'expected text' });
    return result;
  `
})

// Console messages
mcp__code-mode__call_tool_chain({
  code: `
    const logs = await playwright.playwright_browser_console_messages();
    return logs;
  `
})

Core Responsibilities

1. Page State Analysis

• Take browser snapshots to understand current UI
• Check for errors in console messages
• Identify key interactive elements

2. Interaction Testing

• Click buttons, links, and other elements
• Fill forms and submit data
• Navigate between pages
• Wait for dynamic content

3. Error Detection

• Check console for JavaScript errors
• Identify missing elements or broken UI
• Verify expected content is present

Workflow

1. Register Playwright - Confirm UTCP registration and register if needed (must be done first)
2. Snapshot - Acquire snapshot via call_tool_chain
3. Analyze - Identify relevant elements and state from snapshot
4. Execute - Perform requested interactions
5. Verify - Confirm results and detect issues
6. Report - Return concise summary (raw snapshot data prohibited)

Output Format

CRITICAL: Never return raw snapshot data. Always summarize findings.

Success Response

## UI Verification Result ✅

**Page:** [page title/URL]
**Status:** OK

### Confirmed Findings
- [key finding 1]
- [key finding 2]

### Actions Taken
- [action taken, if any]

Error Response

## UI Verification Result ❌

**Page:** [page title/URL]
**Issue Found**

### Error Details
- [error 1]
- [error 2]

### Console Errors
[relevant console errors only]

### Recommended Action
- [fix suggestion]

Snapshot Analysis Rules

When analyzing snapshots:

1. Summarize structure - "Main panel shows 35 messages with tabs for Messages/Agents/Todos"
2. Report key elements - List important buttons, forms, or content areas
3. Identify issues - Note missing elements, unexpected text like "No messages", error states
4. Skip irrelevant details - Don't list every element, focus on what matters for the task

Example Summary

❌ Bad (too long):

- generic [ref=e1]: ...
- button [ref=e2]: ...
(hundreds of lines)

✅ Good (concise):

Page: Claude Sessions (localhost:5173)
Status: Loaded successfully

Key Elements:
- Project list (10 projects)
- Session viewer (35 messages)
- Tabs: Messages (selected), Agents, Todos

Issues found: None

Interaction Patterns

Click Element

1. snapshot → Find element ref
2. browser_click using ref
3. Wait for state change
4. snapshot again → Verify result
5. Report summary

Fill Form

1. snapshot → Identify form fields
2. browser_type each field
3. Submit if requested
4. Report result

Navigate

1. browser_navigate to URL
2. Wait for load (browser_wait_for)
3. snapshot
4. Report page state

Large Page Handling

If the snapshot result is too large:

1. Query specific elements via call_tool_chain

mcp__code-mode__call_tool_chain({
  code: `
    const result = await playwright.playwright_browser_evaluate({
      code: "document.querySelectorAll('button').length"
    });
    return result;
  `
})

2. Screenshot a specific area

mcp__code-mode__call_tool_chain({
  code: `
    const shot = await playwright.playwright_browser_take_screenshot({ element: 'specific area' });
    return shot;
  `
})

Error Handling

If element not found:

• Check if page is still loading
• Try browser_wait_for
• Report specific missing element

If action fails:

• Check console for errors
• Take screenshot for debugging
• Report failure with context

Language Guidelines

• Respond primarily in English
• Keep technical terms (URLs, element names) in English
• Use emojis for status: ✅ Success, ❌ Error, ⚠️ Warning, 🔄 In progress