create-harness-vibe-coding 0.6.2 → 0.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
# /wf-browser [task]
|
|
2
|
+
|
|
3
|
+
AI-driven browser automation via Browser Use (89.1% WebVoyager benchmark). Dual mode: CLI (~50ms per call, no LLM needed) + Python Agent API (multi-step AI reasoning).
|
|
4
|
+
|
|
5
|
+
## Required
|
|
6
|
+
|
|
7
|
+
- Load `wf-browser` skill.
|
|
8
|
+
- Load `Harness/workflows/browser-e2e.md` for evidence contract and fallback paths.
|
|
9
|
+
- Real-browser evidence required for every browser/UI claim (screenshot, state snapshot, or console output).
|
|
10
|
+
|
|
11
|
+
## Modes
|
|
12
|
+
|
|
13
|
+
**CLI (fast iteration):** `browser-use open/state/click/screenshot/close` — Claude Code reasons, CLI executes.
|
|
14
|
+
**Agent (complex flows):** Python API with LLM observation→decision→action loop.
|
|
15
|
+
|
|
16
|
+
## Flow
|
|
17
|
+
|
|
18
|
+
```text
|
|
19
|
+
open page → state (inspect elements)
|
|
20
|
+
→ click/input (interact)
|
|
21
|
+
→ state/screenshot (verify)
|
|
22
|
+
→ close (cleanup)
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Keep browser evidence in `Harness/tasks/<task-id>/evidence/*.png`.
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: wf-browser
|
|
3
|
+
description: AI-driven browser automation for E2E testing, web scraping, form filling, and UI verification. Powered by Browser Use (89.1% WebVoyager benchmark). Use for /wf-browser, browser testing, web automation, page interaction, form filling, screenshot verification, or any task requiring real browser control. Dual mode: CLI (fast iteration, no LLM needed) + Python Agent API (complex multi-step workflows with AI reasoning).
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# WF Browser — AI Browser Automation
|
|
7
|
+
|
|
8
|
+
Load:
|
|
9
|
+
|
|
10
|
+
- `Harness/workflows/browser-e2e.md`
|
|
11
|
+
- Official `browser-use` skill at `~/.claude/skills/browser-use/SKILL.md` (auto-installed if missing)
|
|
12
|
+
- `Harness/PROGRESS.md` when work is active
|
|
13
|
+
|
|
14
|
+
## Modes
|
|
15
|
+
|
|
16
|
+
Choose based on task complexity:
|
|
17
|
+
|
|
18
|
+
### Mode 1: CLI (fast iteration, ~50ms per call)
|
|
19
|
+
|
|
20
|
+
Best for: single-page checks, quick screenshots, form fills, element inspection. No LLM needed — Claude Code reasons and issues CLI commands.
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
browser-use --headed open https://example.com # Open page (headed = visible browser)
|
|
24
|
+
browser-use state # Get page title, text, interactive elements with indices
|
|
25
|
+
browser-use screenshot evidence.png # Capture screenshot as evidence
|
|
26
|
+
browser-use click 5 # Click element by index from state output
|
|
27
|
+
browser-use input 3 "user@example.com" # Fill input field by index
|
|
28
|
+
browser-use eval "document.title" # Run JavaScript in page
|
|
29
|
+
browser-use close # Close browser when done
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Daemon keeps the browser open between commands — no cold-start per action.
|
|
33
|
+
|
|
34
|
+
### Mode 2: Python Agent API (multi-step AI reasoning)
|
|
35
|
+
|
|
36
|
+
Best for: complex multi-page workflows, dynamic navigation, data extraction across pages. Needs LLM API key.
|
|
37
|
+
|
|
38
|
+
```python
|
|
39
|
+
from browser_use.beta import Agent, BrowserProfile
|
|
40
|
+
from browser_use.llm import ChatAnthropic
|
|
41
|
+
|
|
42
|
+
agent = Agent(
|
|
43
|
+
task="Go to github.com, search for 'browser-use', click the first result, and report the star count",
|
|
44
|
+
llm=ChatAnthropic(model="claude-haiku-4-5-20251001"),
|
|
45
|
+
browser_profile=BrowserProfile(headless=False),
|
|
46
|
+
)
|
|
47
|
+
history = await agent.run()
|
|
48
|
+
print(history.final_result())
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Environment Setup
|
|
52
|
+
|
|
53
|
+
Run once per machine:
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
# 1. Install browser-use with CLI extras
|
|
57
|
+
pip install "browser-use[cli]"
|
|
58
|
+
|
|
59
|
+
# 2. Install Chromium browser
|
|
60
|
+
browser-use install
|
|
61
|
+
|
|
62
|
+
# 3. Verify installation
|
|
63
|
+
browser-use doctor
|
|
64
|
+
|
|
65
|
+
# 4. (Optional) Set LLM API key for Agent mode
|
|
66
|
+
# Create .env file with: ANTHROPIC_API_KEY=sk-ant-...
|
|
67
|
+
# Or: OPENAI_API_KEY=sk-...
|
|
68
|
+
# Or: BROWSER_USE_API_KEY=bu-...
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Windows GBK Encoding Fix
|
|
72
|
+
|
|
73
|
+
If you see `UnicodeEncodeError: 'gbk' codec can't encode character`, the install is auto-patched. If not, set env var before commands:
|
|
74
|
+
|
|
75
|
+
```bash
|
|
76
|
+
set PYTHONIOENCODING=utf-8
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Requirements
|
|
80
|
+
|
|
81
|
+
| Requirement | Version | Check |
|
|
82
|
+
|-------------|---------|-------|
|
|
83
|
+
| Python | >= 3.11 | `python --version` |
|
|
84
|
+
| pip | any | `pip --version` |
|
|
85
|
+
| Chromium | auto-installed | `browser-use doctor` |
|
|
86
|
+
| LLM API key | for Agent mode only | check `.env` |
|
|
87
|
+
|
|
88
|
+
## Common Patterns
|
|
89
|
+
|
|
90
|
+
### Login Persistence
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
# Use real Chrome profile (preserves cookies/logins)
|
|
94
|
+
browser-use --profile "Default" open https://app.target.com
|
|
95
|
+
# Or connect to running Chrome with remote debugging
|
|
96
|
+
browser-use connect
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### E2E Test Flow
|
|
100
|
+
|
|
101
|
+
```bash
|
|
102
|
+
browser-use --headed open https://yourapp.local
|
|
103
|
+
browser-use state # Verify page loaded
|
|
104
|
+
browser-use screenshot step1-landing.png # Evidence
|
|
105
|
+
browser-use input 3 "test@email.com" # Fill email
|
|
106
|
+
browser-use input 5 "password123" # Fill password
|
|
107
|
+
browser-use click 8 # Click login button
|
|
108
|
+
browser-use wait text "Dashboard" # Wait for navigation text
|
|
109
|
+
browser-use state # Verify logged in
|
|
110
|
+
browser-use screenshot step2-dashboard.png # Evidence
|
|
111
|
+
browser-use close
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### Console & Network Log Capture
|
|
115
|
+
|
|
116
|
+
```bash
|
|
117
|
+
browser-use eval "console.log('checkpoint');" # Inject log marker
|
|
118
|
+
browser-use eval "document.title" # Read page state via JS
|
|
119
|
+
browser-use get text 5 # Get text of element index 5
|
|
120
|
+
browser-use get value 3 # Get value of input element index 3
|
|
121
|
+
# For full console/network: use Python Agent mode with Playwright's page.on('console') and page.on('request')
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### Error Recovery
|
|
125
|
+
|
|
126
|
+
```bash
|
|
127
|
+
# If daemon crashes or gets stuck:
|
|
128
|
+
browser-use close # Clean shutdown
|
|
129
|
+
# Then restart:
|
|
130
|
+
browser-use open <url> # Fresh daemon starts automatically
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
## Verification Contract
|
|
134
|
+
|
|
135
|
+
Every browser task must produce:
|
|
136
|
+
|
|
137
|
+
1. **State evidence**: `browser-use state` output or screenshot
|
|
138
|
+
2. **Action log**: sequence of commands issued
|
|
139
|
+
3. **Result assertion**: explicit before/after state comparison
|
|
140
|
+
|
|
141
|
+
No browser/UI claim without real-browser evidence.
|
|
142
|
+
|
|
143
|
+
## Architecture Note
|
|
144
|
+
|
|
145
|
+
Browser Use wraps Playwright with AI reasoning. The daemon keeps Chromium running between CLI commands (~50ms latency). The Agent mode adds an LLM observation→decision→action loop on top. This replaces fragile CSS-selector scripts with semantic element targeting via accessibility tree snapshots.
|
|
146
|
+
|
|
147
|
+
Benchmarks: 89.1% WebVoyager (SOTA), 78k+ GitHub stars, MIT license.
|
|
148
|
+
|
|
149
|
+
## Security
|
|
150
|
+
|
|
151
|
+
- **Never log or screenshot credentials** — redact password fields, API keys, tokens before capturing evidence
|
|
152
|
+
- **Chrome profiles contain sensitive data** — only use `--profile` with explicit user approval; never share profile data
|
|
153
|
+
- **Screenshots may capture PII** — review before saving to task evidence directory
|
|
154
|
+
- **Scraping targets need approval** — confirm the target site's ToS allow automated access before scraping
|
|
155
|
+
- **`browser-use input` commands with passwords** — use placeholder values in documentation; never hardcode real credentials
|
|
156
|
+
- **Agent mode sandbox** — run Agent API with `allowed_domains` restriction when possible
|
|
157
|
+
|
|
158
|
+
## Return
|
|
159
|
+
|
|
160
|
+
- CLI commands issued and their output
|
|
161
|
+
- screenshot paths
|
|
162
|
+
- agent history (if Agent mode used)
|
|
163
|
+
- verification pass/fail with evidence
|
|
164
|
+
- remaining risks (flaky selectors, auth issues, CAPTCHAs)
|
|
@@ -1,42 +1,63 @@
|
|
|
1
1
|
# Browser E2E Workflow
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
- Save screenshot, trace, video, or result artifact paths and record them in `Harness/PLAN.md` or the feature doc.
|
|
23
|
-
- Clean up any dev server or browser processes started for verification.
|
|
24
|
-
|
|
25
|
-
## Common Commands
|
|
26
|
-
|
|
27
|
-
```powershell
|
|
28
|
-
npm run dev
|
|
29
|
-
npx playwright test
|
|
30
|
-
npx playwright test --headed
|
|
31
|
-
npx playwright show-report
|
|
32
|
-
```
|
|
3
|
+
Optional workflow for browser-visible testing and automation. Installed when `browser-use` CLI is available.
|
|
4
|
+
|
|
5
|
+
## When Active
|
|
6
|
+
|
|
7
|
+
This workflow is active when:
|
|
8
|
+
1. `browser-use` CLI is installed and `browser-use doctor` passes
|
|
9
|
+
2. `Harness/workflows/browser-e2e.md` exists (this file)
|
|
10
|
+
3. A task explicitly references `/wf-browser` or browser E2E testing
|
|
11
|
+
|
|
12
|
+
## Contract
|
|
13
|
+
|
|
14
|
+
Browser evidence in this project follows the contract:
|
|
15
|
+
|
|
16
|
+
1. **Every browser claim needs real-browser evidence** — screenshot, state snapshot, or console output
|
|
17
|
+
2. **CLI mode is preferred for deterministic steps** — use `browser-use open/state/click/screenshot` for predictable flows
|
|
18
|
+
3. **Agent mode is for dynamic exploration** — use Browser Use Agent API when the page structure is unknown or changing
|
|
19
|
+
4. **Evidence goes to the task directory** — `Harness/tasks/<task-id>/evidence/*.png`
|
|
20
|
+
|
|
21
|
+
## Quick Install
|
|
33
22
|
|
|
34
|
-
|
|
23
|
+
```bash
|
|
24
|
+
# One-time setup
|
|
25
|
+
pip install "browser-use[cli]"
|
|
26
|
+
browser-use install
|
|
27
|
+
browser-use doctor
|
|
28
|
+
|
|
29
|
+
# Windows: if you see GBK encoding errors, set:
|
|
30
|
+
set PYTHONIOENCODING=utf-8
|
|
31
|
+
|
|
32
|
+
# Verify
|
|
33
|
+
browser-use open https://example.com
|
|
34
|
+
browser-use state
|
|
35
|
+
browser-use screenshot test.png
|
|
36
|
+
browser-use close
|
|
37
|
+
```
|
|
35
38
|
|
|
36
39
|
## Fallback
|
|
37
40
|
|
|
38
|
-
|
|
41
|
+
If `browser-use` is not installed, fall back to:
|
|
42
|
+
|
|
43
|
+
1. Playwright/Puppeteer MCP server (if configured)
|
|
44
|
+
2. Chrome DevTools Protocol (CDP) manual inspection
|
|
45
|
+
3. `Harness/WF.md#Browser And API Evidence` manual check contract
|
|
46
|
+
|
|
47
|
+
## Integration Points
|
|
48
|
+
|
|
49
|
+
- **wf-mode**: references this file at line 16 and 42 of `.claude/skills/wf-mode/SKILL.md`
|
|
50
|
+
- **wf-browser**: the `/wf-browser` slash command loads this workflow + the skill via `.claude/commands/wf-browser.md`
|
|
51
|
+
- **MEMORY.md**: registered as optional workflow skill
|
|
52
|
+
- **README.md**: routing table row "Browser E2E testing or automation" → browser-e2e
|
|
39
53
|
|
|
40
|
-
##
|
|
54
|
+
## File Locations
|
|
41
55
|
|
|
42
|
-
|
|
56
|
+
| File | Purpose |
|
|
57
|
+
|------|---------|
|
|
58
|
+
| `.claude/skills/wf-browser/SKILL.md` | Skill definition |
|
|
59
|
+
| `.claude/commands/wf-browser.md` | Slash command bridge |
|
|
60
|
+
| `Harness/workflows/browser-e2e.md` | This file — workflow contract and install guide |
|
|
61
|
+
| `~/.claude/skills/browser-use/SKILL.md` | Official Browser Use skill (user-level, auto-downloaded) |
|
|
62
|
+
| `pip show browser-use \| findstr Location` | Python package install location (run to find) |
|
|
63
|
+
| `~/.browser-use/` | Daemon state and browser profiles |
|