浏览器交互记录服务

npx playwright install chromium
npm run example:quick     # Quick start demo
npm run agent:task        # Task agent demo
npm run agent:browser     # Browser automation agent demo

npm install
npm run build

node build/browser-capture-index.js

start-browser-capture.bat

### With VS Code

Create `.vscode/mcp.json`:

```json
{
  "servers": {
    "step-recorder": {
      "type": "stdio",
      "command": "node",
      "args": ["C:\\mcp\\build\\browser-capture-
      "args": ["C:\\mcp\\build\\index.js"]
    }
  }
}
```Output

### Sample `browser-interactions.txt`:

// Get all captured interactions
const result = await client.request({
  method: "tools/call",
  params: {
    name: "get_steps",
    arguments: {}
  }
});
// Returns: List of all captured browser interactions

// Clear captured interactions
await client.request({
  method: "tools/call",
  params: {
    name: "clear_steps",
    arguments: {}
  }
});
// Clears all recorded interactions

// Add a manual note
await client.request({
  method: "tools/call",
  params: {
    name: "record_manual_note",
    arguments: { note: "Starting checkout flow test" }
  }
});
// Adds custom note to the recording
User: I need to record my browser interactions
AI: I'll record the browser operations for you.

[User clicks on login button]
AI: [Calls record_browser_operation with operation="click", element="login button"]
    Browser operation recorded: Clicked on login button

[User navigates to dashboard]
AI: [Calls record_browser_operation with operation="navigate", url="https://example.com/dashboard"]
    Browser operation recorded: Navigated to https://example.com/dashboard

[User enters username]
AI: [Calls record_browser_operation with operation="type", element="username field", value="john@example.com"]
    Browser operation recorded: Entered "john@example.com" into username field

User: Show me all recorded steps
AI: [Calls get_steps]
    Here are all your recorded steps:
    1. [2026-01-20T05:30:00.000Z] Clicked on login button
    2. [2026-01-20T05:30:15.000Z] Navigated to https://example.com/dashboard
    3. [2026-01-20T05:30:30.000Z] Entered "john@example.com" into username field

c:\mcp\
├── src/
│   └── index.ts          # Main server implementation
├── build/                # Compiled JavaScript output
├── package.json          # Project configuration
├── tsconfig.json         # TypeScript configuration
└── README.md            # This file

npm run build

c:\mcp\
├── src/
│   ├── browser-capture-index.ts    # Auto browser capture server (NEW!)
│   ├── index.ts                     # Original step recorder
│   └── auto-browser-recorder.ts     # Standalone recorder
├── build/                           # Compiled JavaScript output
├── browser-interactions.txt         # Captured interactions (generated)
├── start-browser-capture.bat        # Quick start script
├── package.json
├── tsconfig.json
└── README.md

npm run build

# Auto browser capture mode (recommended)
node build/browser-capture-index.js

# Original step recorder
node build/index.js
```Key Benefits

✅ **Zero Setup** - Just start the server, browser launches automatically  
✅ **No Code Required** - Use the browser normally, everything captured  
✅ **Real Interactions** - Captures actual user actions, not simulations  
✅ **English Descriptions** - Clear, numbered steps anyone can understand  
✅ **Silent Mode** - No permission prompts or interruptions  
✅ **Auto-Save** - Real-time file updates, nothing lost  
✅ **Session Tracking** - Full timeline of all interactions  

## Use Cases

- 🧪 **Manual Testing** - Document test execution steps automatically
- 📝 **Bug Reports** - Provide detailed reproduction steps
- 📚 **Documentation** - Create user guides from real usage
- 🎓 **Training** - Record workflows for training materials  
- 🔍 **Analysis** - Understand user behavior patterns
- ✅ **QA Validation** - Verify feature usage and flows

## Troubleshooting

**Browser doesn't open:**
```bash
npx playwright install chromium