cbrowser 11.10.3 → 11.10.5
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/README.md +164 -1134
- package/dist/analysis/accessibility-empathy.d.ts.map +1 -1
- package/dist/analysis/accessibility-empathy.js +44 -30
- package/dist/analysis/accessibility-empathy.js.map +1 -1
- package/dist/analysis/natural-language.d.ts.map +1 -1
- package/dist/analysis/natural-language.js +40 -2
- package/dist/analysis/natural-language.js.map +1 -1
- package/dist/browser.d.ts.map +1 -1
- package/dist/browser.js +13 -7
- package/dist/browser.js.map +1 -1
- package/dist/mcp-server-remote.d.ts.map +1 -1
- package/dist/mcp-server-remote.js +26 -2
- package/dist/mcp-server-remote.js.map +1 -1
- package/dist/mcp-server.d.ts.map +1 -1
- package/dist/mcp-server.js +26 -2
- package/dist/mcp-server.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
# CBrowser
|
|
1
|
+
# CBrowser — Cognitive Browser Automation
|
|
2
2
|
|
|
3
|
-
**
|
|
4
|
-
|
|
5
|
-
Built on Playwright with cognitive user simulation, constitutional safety boundaries, and the only UX testing that models how humans actually think.
|
|
3
|
+
> **Browser automation that thinks like your users.** The only testing framework that models human cognition—patience thresholds, frustration curves, and the exact moment a user gives up.
|
|
6
4
|
|
|
7
5
|
[](https://www.npmjs.com/package/cbrowser)
|
|
8
6
|
[](https://github.com/alexandriashai/cbrowser/actions/workflows/test.yml)
|
|
@@ -13,1006 +11,217 @@ Built on Playwright with cognitive user simulation, constitutional safety bounda
|
|
|
13
11
|
|
|
14
12
|
---
|
|
15
13
|
|
|
16
|
-
## The
|
|
17
|
-
|
|
18
|
-
I spent 16 years in international higher education marketing and UX, where I learned that the biggest accessibility and usability problems are the ones you can't see coming. A button that works perfectly for me might be invisible to a first-generation student in rural Indonesia using a slow connection on a small screen.
|
|
19
|
-
|
|
20
|
-
Traditional testing tools couldn't help—they tested whether buttons clicked, not whether real humans could use them.
|
|
21
|
-
|
|
22
|
-
Then came the AI agent revolution. I watched autonomous agents navigate websites, and I saw two problems:
|
|
23
|
-
|
|
24
|
-
1. **They broke things.** Agents would accidentally submit forms, delete data, or get stuck in infinite loops. There were no guardrails.
|
|
25
|
-
|
|
26
|
-
2. **They exposed how shallow our testing was.** If an AI couldn't figure out a UI, what chance did a confused first-timer have?
|
|
27
|
-
|
|
28
|
-
I realized: **The industry needs tools that think like users, not like developers.** Tools that model patience, frustration, and the moment someone gives up. Tools that prevent autonomous agents from causing harm.
|
|
14
|
+
## The Problem We Solve
|
|
29
15
|
|
|
30
|
-
|
|
16
|
+
Traditional browser automation answers one question: *"Does this button click?"*
|
|
31
17
|
|
|
32
|
-
|
|
18
|
+
CBrowser answers the question that actually matters: *"Will a confused first-timer on a slow connection find this button—and will they give up before they do?"*
|
|
33
19
|
|
|
34
|
-
|
|
35
|
-
|----------|-----|
|
|
36
|
-
| **TypeScript** | Type safety for a complex codebase; better IDE experience for contributors |
|
|
37
|
-
| **Playwright over Puppeteer** | Cross-browser support (Chromium, Firefox, WebKit) out of the box; better auto-waiting |
|
|
38
|
-
| **Constitutional AI safety** | AI agents need boundaries. Borrowed from Anthropic's constitutional AI principles to create risk zones |
|
|
39
|
-
| **Cognitive simulation** | Based on UX research (Nielsen Norman Group, Baymard Institute) on how humans actually scan and interact with pages |
|
|
40
|
-
| **MCP-first architecture** | Built for the Claude ecosystem. MCP is the future of AI tool integration |
|
|
41
|
-
|
|
42
|
-
### What I Learned Building This
|
|
43
|
-
|
|
44
|
-
- **Shipping beats perfecting.** 80+ npm versions taught me to iterate in public
|
|
45
|
-
- **Real users reveal real problems.** Features I thought were clever often weren't useful; user feedback redirected the roadmap
|
|
46
|
-
- **AI safety is a UX problem.** The same patterns that make sites confusing to humans make them dangerous for agents
|
|
20
|
+
Built on Playwright with cognitive user simulation, constitutional AI safety, and research-backed behavioral models, CBrowser is the only testing framework designed for the AI agent era.
|
|
47
21
|
|
|
48
22
|
---
|
|
49
23
|
|
|
50
|
-
##
|
|
51
|
-
|
|
52
|
-
Most browser automation tests if buttons click. CBrowser tests if **real humans** can use your site.
|
|
53
|
-
|
|
54
|
-
### What Makes CBrowser Different
|
|
24
|
+
## Core Differentiators
|
|
55
25
|
|
|
56
|
-
|
|
|
57
|
-
|
|
58
|
-
| **User behavior** | Simulates clicks and
|
|
59
|
-
| **
|
|
60
|
-
| **AI safety** | No guardrails for autonomous agents | **Constitutional safety
|
|
61
|
-
| **
|
|
62
|
-
| **
|
|
63
|
-
|
|
64
|
-
### Also Includes (Table Stakes)
|
|
65
|
-
|
|
66
|
-
- **Session persistence** — State persists across calls (cookies, localStorage)
|
|
67
|
-
- **Self-healing selectors** — Automatically adapts when DOM changes
|
|
68
|
-
- **Natural language interface** — Describe elements instead of CSS selectors
|
|
69
|
-
- **MCP server** — Works with Claude Desktop, claude.ai, and any MCP client
|
|
26
|
+
| Challenge | Traditional Tools | CBrowser |
|
|
27
|
+
|-----------|-------------------|----------|
|
|
28
|
+
| **User behavior** | Simulates clicks and keystrokes | **Simulates human cognition**—patience decay, frustration accumulation, decision fatigue |
|
|
29
|
+
| **Abandonment prediction** | Fails when elements don't exist | **Predicts when users give up** before they do |
|
|
30
|
+
| **AI agent safety** | No guardrails for autonomous agents | **Constitutional AI safety**—risk-classified actions with verification gates |
|
|
31
|
+
| **Selector resilience** | Breaks when DOM changes | **Self-healing ARIA-first selectors** with 0.8+ confidence gating |
|
|
32
|
+
| **Accessibility testing** | WCAG compliance checklists | **Disability empathy simulation**—experience your site as a user with tremors, low vision, or ADHD |
|
|
70
33
|
|
|
71
34
|
---
|
|
72
35
|
|
|
73
36
|
## Quick Start
|
|
74
37
|
|
|
75
|
-
###
|
|
76
|
-
|
|
77
|
-
If you use [Claude Code](https://claude.ai/claude-code), install CBrowser as a skill for seamless AI-assisted browser automation:
|
|
78
|
-
|
|
79
|
-
```bash
|
|
80
|
-
# One-line installation
|
|
81
|
-
curl -fsSL https://raw.githubusercontent.com/alexandriashai/cbrowser/main/scripts/install-skill.sh | bash
|
|
82
|
-
|
|
83
|
-
# Or via npm CLI
|
|
84
|
-
npx cbrowser install-skill
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
This installs CBrowser to `~/.claude/skills/CBrowser/` with full skill structure:
|
|
88
|
-
- `SKILL.md` - Main skill file with workflow routing
|
|
89
|
-
- `Workflows/` - Navigate, Interact, Extract, Test, Journey workflows
|
|
90
|
-
- `Tools/CBrowser.ts` - CLI wrapper
|
|
91
|
-
- `.memory/` - Session, selector, and persona storage
|
|
92
|
-
|
|
93
|
-
After installation, add to your `~/.claude/skills/skill-index.json`:
|
|
94
|
-
|
|
95
|
-
```json
|
|
96
|
-
{
|
|
97
|
-
"CBrowser": "~/.claude/skills/CBrowser/SKILL.md"
|
|
98
|
-
}
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
Then install dependencies:
|
|
102
|
-
|
|
103
|
-
```bash
|
|
104
|
-
npm install -g cbrowser
|
|
105
|
-
npx playwright install
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
### Option 2: npm Installation (Standard)
|
|
38
|
+
### Installation
|
|
109
39
|
|
|
110
40
|
```bash
|
|
111
|
-
# npm
|
|
112
41
|
npm install cbrowser
|
|
113
|
-
|
|
114
|
-
# bun (recommended)
|
|
115
|
-
bun add cbrowser
|
|
116
|
-
|
|
117
|
-
# yarn
|
|
118
|
-
yarn add cbrowser
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
### Install Playwright Browsers
|
|
122
|
-
|
|
123
|
-
```bash
|
|
124
|
-
# Install all browsers (recommended for cross-browser testing)
|
|
125
|
-
npx playwright install
|
|
126
|
-
|
|
127
|
-
# Or just Chromium
|
|
128
42
|
npx playwright install chromium
|
|
129
43
|
```
|
|
130
44
|
|
|
131
|
-
###
|
|
45
|
+
### First Commands
|
|
132
46
|
|
|
133
47
|
```bash
|
|
134
|
-
# Navigate
|
|
135
|
-
npx cbrowser navigate "https://
|
|
48
|
+
# Navigate with intelligent wait detection
|
|
49
|
+
npx cbrowser navigate "https://your-site.com"
|
|
136
50
|
|
|
137
|
-
#
|
|
51
|
+
# Self-healing click with 80%+ confidence threshold
|
|
138
52
|
npx cbrowser smart-click "Add to Cart"
|
|
139
53
|
|
|
140
54
|
# Natural language assertions
|
|
141
|
-
npx cbrowser assert "page contains '
|
|
55
|
+
npx cbrowser assert "page contains 'Order Confirmed'"
|
|
142
56
|
|
|
143
|
-
#
|
|
144
|
-
npx cbrowser
|
|
57
|
+
# Run a cognitive journey—simulate a real user
|
|
58
|
+
npx cbrowser cognitive-journey \
|
|
59
|
+
--persona first-timer \
|
|
60
|
+
--start "https://your-site.com" \
|
|
61
|
+
--goal "complete checkout"
|
|
145
62
|
```
|
|
146
63
|
|
|
147
64
|
---
|
|
148
65
|
|
|
149
|
-
##
|
|
150
|
-
|
|
151
|
-
### Natural Language Interface
|
|
66
|
+
## Constitutional AI Safety
|
|
152
67
|
|
|
153
|
-
|
|
68
|
+
AI agents need boundaries. CBrowser classifies every action by risk level:
|
|
154
69
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
Element selection supports multiple strategies, tried in priority order:
|
|
162
|
-
|
|
163
|
-
```bash
|
|
164
|
-
# Natural language (default)
|
|
165
|
-
cbrowser click "the main navigation menu"
|
|
166
|
-
|
|
167
|
-
# Accessibility-based (ARIA selectors)
|
|
168
|
-
cbrowser click "aria:button/Submit"
|
|
169
|
-
|
|
170
|
-
# Visual description
|
|
171
|
-
cbrowser click "visual:red button in header"
|
|
172
|
-
|
|
173
|
-
# Semantic type
|
|
174
|
-
cbrowser fill "semantic:email" "user@example.com"
|
|
175
|
-
|
|
176
|
-
# Fallback to CSS when needed
|
|
177
|
-
cbrowser click "css:#login-btn"
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
### Session Persistence
|
|
181
|
-
|
|
182
|
-
AI agents typically need multiple calls to complete a task (log in, navigate, fill a form, submit). CBrowser saves and restores browser state so agents can pick up where they left off.
|
|
183
|
-
|
|
184
|
-
```bash
|
|
185
|
-
# Save session (cookies, localStorage, sessionStorage)
|
|
186
|
-
cbrowser session save "logged-in" --url "https://example.com"
|
|
70
|
+
| Zone | Examples | Behavior |
|
|
71
|
+
|------|----------|----------|
|
|
72
|
+
| 🟢 **Green** | Navigate, read, screenshot | Auto-execute |
|
|
73
|
+
| 🟡 **Yellow** | Click buttons, fill forms | Log and proceed |
|
|
74
|
+
| 🔴 **Red** | Submit, delete, purchase | Requires verification |
|
|
75
|
+
| ⬛ **Black** | Bypass auth, inject scripts | Never executes |
|
|
187
76
|
|
|
188
|
-
|
|
189
|
-
cbrowser session load "logged-in"
|
|
77
|
+
An AI agent can freely browse and gather data, but cannot accidentally submit a form, delete records, or make purchases without explicit verification.
|
|
190
78
|
|
|
191
|
-
|
|
192
|
-
cbrowser session list
|
|
193
|
-
|
|
194
|
-
# Show detailed session info
|
|
195
|
-
cbrowser session show "logged-in"
|
|
196
|
-
|
|
197
|
-
# Manage sessions
|
|
198
|
-
cbrowser session cleanup --older-than 30
|
|
199
|
-
cbrowser session export "logged-in" --output session.json
|
|
200
|
-
cbrowser session import session.json --name "restored"
|
|
201
|
-
```
|
|
202
|
-
|
|
203
|
-
### Self-Healing Selectors
|
|
204
|
-
|
|
205
|
-
When an element isn't found, CBrowser automatically:
|
|
206
|
-
1. Checks its selector cache for known alternatives on that domain
|
|
207
|
-
2. Generates alternative selectors (text variants, ARIA roles, attributes)
|
|
208
|
-
3. Tries each alternative with configurable retry logic
|
|
209
|
-
4. Caches working selectors for future use
|
|
210
|
-
|
|
211
|
-
This is particularly useful in CI/CD pipelines where site updates would otherwise break every test run.
|
|
212
|
-
|
|
213
|
-
```bash
|
|
214
|
-
# Smart click with retry
|
|
215
|
-
npx cbrowser smart-click "Submit" --max-retries 5
|
|
216
|
-
|
|
217
|
-
# Navigate then click
|
|
218
|
-
npx cbrowser smart-click "Login" --url "https://example.com"
|
|
219
|
-
```
|
|
220
|
-
|
|
221
|
-
```typescript
|
|
222
|
-
import { CBrowser } from 'cbrowser';
|
|
223
|
-
|
|
224
|
-
const browser = new CBrowser();
|
|
225
|
-
const result = await browser.smartClick("Submit Button", { maxRetries: 3 });
|
|
226
|
-
|
|
227
|
-
console.log(result.success); // true/false
|
|
228
|
-
console.log(result.finalSelector); // The selector that worked
|
|
229
|
-
console.log(result.attempts); // Array of all attempts
|
|
230
|
-
console.log(result.aiSuggestion); // AI suggestion if failed
|
|
231
|
-
```
|
|
232
|
-
|
|
233
|
-
```bash
|
|
234
|
-
# View cache statistics
|
|
235
|
-
npx cbrowser heal-stats
|
|
79
|
+
---
|
|
236
80
|
|
|
237
|
-
|
|
238
|
-
npx cbrowser heal-clear
|
|
239
|
-
```
|
|
81
|
+
## Cognitive User Simulation
|
|
240
82
|
|
|
241
|
-
|
|
83
|
+
CBrowser models 12 research-backed cognitive traits to simulate how real users think and behave:
|
|
242
84
|
|
|
243
|
-
|
|
85
|
+
| Trait | Research Basis | What It Models |
|
|
86
|
+
|-------|---------------|----------------|
|
|
87
|
+
| **Patience** | — | How quickly users abandon on friction |
|
|
88
|
+
| **Frustration** | — | Accumulates with errors, decays with success |
|
|
89
|
+
| **Decision Fatigue** | Baumeister's ego depletion | Users start choosing defaults after too many decisions |
|
|
90
|
+
| **Dual-Process Thinking** | Kahneman (Nobel Prize) | System 1 (fast/automatic) vs System 2 (slow/deliberate) |
|
|
91
|
+
| **Self-Efficacy** | Bandura (1977) | Belief in ability to solve problems; low = faster abandonment |
|
|
92
|
+
| **Satisficing** | Simon (1956) | Accept "good enough" vs. optimize; satisficers decide 50% faster |
|
|
93
|
+
| **Trust Calibration** | Fogg (2003) | Baseline trust affects click-through by 40% |
|
|
94
|
+
| **Interrupt Recovery** | Mark et al. (2005) | Average recovery time 23min; models context preservation |
|
|
244
95
|
|
|
245
|
-
|
|
246
|
-
|------|---------|----------|
|
|
247
|
-
| **Green** | Navigate, read, screenshot | Auto-execute |
|
|
248
|
-
| **Yellow** | Click buttons, fill forms | Log and proceed |
|
|
249
|
-
| **Red** | Submit, delete, purchase | Requires verification |
|
|
250
|
-
| **Black** | Bypass auth, inject scripts | Never executes |
|
|
96
|
+
### Abandonment Detection
|
|
251
97
|
|
|
252
|
-
|
|
98
|
+
The simulation stops when a realistic user would give up:
|
|
253
99
|
|
|
254
100
|
```bash
|
|
255
|
-
|
|
101
|
+
# Output from cognitive journey
|
|
102
|
+
⚠️ ABANDONED after 8 steps
|
|
103
|
+
Reason: Patience depleted (0.08) - "This is taking too long..."
|
|
104
|
+
Friction points:
|
|
105
|
+
1. Password requirements unclear (step 4)
|
|
106
|
+
2. Form validation error not visible (step 6)
|
|
256
107
|
```
|
|
257
108
|
|
|
258
109
|
---
|
|
259
110
|
|
|
260
|
-
## Testing
|
|
261
|
-
|
|
262
|
-
### Natural Language Test Suites
|
|
111
|
+
## Natural Language Testing
|
|
263
112
|
|
|
264
|
-
Write tests in plain English
|
|
265
|
-
|
|
266
|
-
```bash
|
|
267
|
-
# Run tests from a file
|
|
268
|
-
npx cbrowser test-suite login-test.txt --html
|
|
269
|
-
|
|
270
|
-
# Run inline tests
|
|
271
|
-
npx cbrowser test-suite --inline "go to https://example.com ; click login ; verify url contains /dashboard"
|
|
272
|
-
|
|
273
|
-
# Dry run (parse without executing)
|
|
274
|
-
npx cbrowser test-suite tests.txt --dry-run
|
|
275
|
-
|
|
276
|
-
# Fuzzy matching for assertions
|
|
277
|
-
npx cbrowser test-suite tests.txt --fuzzy-match
|
|
278
|
-
```
|
|
279
|
-
|
|
280
|
-
**Test file format:**
|
|
113
|
+
Write tests in plain English:
|
|
281
114
|
|
|
282
115
|
```txt
|
|
283
|
-
# Test:
|
|
284
|
-
go to https://
|
|
285
|
-
click
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
# Test: Search Functionality
|
|
292
|
-
go to https://example.com/search
|
|
293
|
-
type "test query" in search box
|
|
294
|
-
click search button
|
|
295
|
-
verify page contains "results"
|
|
296
|
-
take screenshot
|
|
116
|
+
# Test: Checkout Flow
|
|
117
|
+
go to https://your-site.com/products
|
|
118
|
+
click "Add to Cart" button
|
|
119
|
+
verify page contains "1 item in cart"
|
|
120
|
+
click checkout
|
|
121
|
+
fill email with "test@example.com"
|
|
122
|
+
click "Place Order"
|
|
123
|
+
verify url contains "/confirmation"
|
|
297
124
|
```
|
|
298
125
|
|
|
299
|
-
**Supported instructions:**
|
|
300
|
-
|
|
301
|
-
| Instruction | Examples |
|
|
302
|
-
|-------------|----------|
|
|
303
|
-
| **Navigate** | `go to https://...`, `navigate to https://...`, `open https://...` |
|
|
304
|
-
| **Click** | `click the login button`, `click submit`, `press Enter` |
|
|
305
|
-
| **Fill** | `type "value" in email field`, `fill username with "john"` |
|
|
306
|
-
| **Select** | `select "Option A" from dropdown` |
|
|
307
|
-
| **Scroll** | `scroll down`, `scroll up 5 times` |
|
|
308
|
-
| **Wait** | `wait 2 seconds`, `wait for "Loading" appears` |
|
|
309
|
-
| **Assert** | `verify page contains "Welcome"`, `verify url contains "/home"`, `verify title is "Dashboard"` |
|
|
310
|
-
| **Screenshot** | `take screenshot` |
|
|
311
|
-
|
|
312
|
-
**Output options:**
|
|
313
|
-
|
|
314
126
|
```bash
|
|
315
|
-
|
|
316
|
-
npx cbrowser test-suite tests.txt --continue-on-failure
|
|
317
|
-
|
|
318
|
-
# Save JSON report
|
|
319
|
-
npx cbrowser test-suite tests.txt --output results.json
|
|
320
|
-
|
|
321
|
-
# Generate HTML report
|
|
322
|
-
npx cbrowser test-suite tests.txt --html
|
|
127
|
+
npx cbrowser test-suite checkout-test.txt --html
|
|
323
128
|
```
|
|
324
129
|
|
|
325
|
-
|
|
130
|
+
### Self-Healing Test Repair
|
|
326
131
|
|
|
327
|
-
|
|
328
|
-
import { parseNLTestSuite, runNLTestSuite, formatNLTestReport } from 'cbrowser';
|
|
329
|
-
|
|
330
|
-
const suite = parseNLTestSuite(`
|
|
331
|
-
# Test: Homepage
|
|
332
|
-
go to https://example.com
|
|
333
|
-
verify title contains "Example"
|
|
334
|
-
click the about link
|
|
335
|
-
verify url contains "/about"
|
|
336
|
-
`, "My Test Suite");
|
|
337
|
-
|
|
338
|
-
const result = await runNLTestSuite(suite, {
|
|
339
|
-
continueOnFailure: true,
|
|
340
|
-
screenshotOnFailure: true,
|
|
341
|
-
});
|
|
342
|
-
|
|
343
|
-
console.log(formatNLTestReport(result));
|
|
344
|
-
```
|
|
345
|
-
|
|
346
|
-
### Natural Language Assertions
|
|
347
|
-
|
|
348
|
-
Write assertions in plain English for use in scripts or standalone:
|
|
132
|
+
When tests break due to site changes:
|
|
349
133
|
|
|
350
134
|
```bash
|
|
351
|
-
|
|
352
|
-
npx cbrowser assert "title contains 'Dashboard'"
|
|
353
|
-
npx cbrowser assert "title is 'Home Page'"
|
|
354
|
-
|
|
355
|
-
# URL assertions
|
|
356
|
-
npx cbrowser assert "url contains '/login'"
|
|
357
|
-
|
|
358
|
-
# Content assertions
|
|
359
|
-
npx cbrowser assert "page contains 'Welcome back'"
|
|
360
|
-
|
|
361
|
-
# Element assertions
|
|
362
|
-
npx cbrowser assert "'#submit-btn' exists"
|
|
363
|
-
|
|
364
|
-
# Count assertions
|
|
365
|
-
npx cbrowser assert "5 buttons"
|
|
366
|
-
npx cbrowser assert "3 links"
|
|
135
|
+
npx cbrowser repair-tests broken-test.txt --auto-apply --verify
|
|
367
136
|
```
|
|
368
137
|
|
|
369
|
-
|
|
370
|
-
const result = await browser.assert("page contains 'Success'");
|
|
371
|
-
console.log(result.passed); // true/false
|
|
372
|
-
console.log(result.message); // Human-readable result
|
|
373
|
-
console.log(result.actual); // What was found
|
|
374
|
-
console.log(result.expected); // What was expected
|
|
375
|
-
```
|
|
376
|
-
|
|
377
|
-
### AI Test Generation
|
|
378
|
-
|
|
379
|
-
Analyze any page and generate test scenarios automatically. Useful for bootstrapping test coverage on existing sites.
|
|
380
|
-
|
|
381
|
-
```bash
|
|
382
|
-
# Generate tests for a page
|
|
383
|
-
npx cbrowser generate-tests "https://example.com"
|
|
384
|
-
|
|
385
|
-
# Output specific format
|
|
386
|
-
npx cbrowser generate-tests "https://example.com" --format playwright
|
|
387
|
-
npx cbrowser generate-tests "https://example.com" --format cbrowser
|
|
388
|
-
|
|
389
|
-
# Save to file
|
|
390
|
-
npx cbrowser generate-tests "https://example.com" --output tests.ts
|
|
391
|
-
```
|
|
392
|
-
|
|
393
|
-
```typescript
|
|
394
|
-
const result = await browser.generateTests("https://example.com");
|
|
395
|
-
|
|
396
|
-
console.log(result.analysis); // Page structure analysis
|
|
397
|
-
console.log(result.tests); // Generated test scenarios
|
|
398
|
-
console.log(result.playwrightCode); // Playwright test code
|
|
399
|
-
console.log(result.cbrowserScript); // CBrowser CLI script
|
|
400
|
-
```
|
|
401
|
-
|
|
402
|
-
### AI Test Repair
|
|
403
|
-
|
|
404
|
-
When tests break due to site changes, CBrowser can analyze the failures and suggest or apply repairs automatically. This reduces the maintenance burden of large test suites.
|
|
405
|
-
|
|
406
|
-
```bash
|
|
407
|
-
# Analyze a broken test and see repair suggestions
|
|
408
|
-
npx cbrowser repair-tests broken-test.txt
|
|
409
|
-
|
|
410
|
-
# Automatically apply the best repairs
|
|
411
|
-
npx cbrowser repair-tests tests.txt --auto-apply
|
|
412
|
-
|
|
413
|
-
# Apply repairs and verify they work
|
|
414
|
-
npx cbrowser repair-tests tests.txt --auto-apply --verify
|
|
415
|
-
|
|
416
|
-
# Save repaired tests to a new file
|
|
417
|
-
npx cbrowser repair-tests tests.txt --auto-apply --output fixed-tests.txt
|
|
418
|
-
```
|
|
419
|
-
|
|
420
|
-
**Failure types and repair strategies:**
|
|
421
|
-
|
|
422
|
-
| Failure Type | Detection | Repair Strategy |
|
|
423
|
-
|--------------|-----------|-----------------|
|
|
424
|
-
| `selector_not_found` | Element doesn't exist | Find alternative selectors on page |
|
|
425
|
-
| `assertion_failed` | Verify statement false | Suggest updated assertions based on page content |
|
|
426
|
-
| `timeout` | Step took too long | Add wait statements |
|
|
427
|
-
| `element_not_interactable` | Element hidden/disabled | Add scroll/wait before interaction |
|
|
428
|
-
|
|
429
|
-
**API usage:**
|
|
430
|
-
|
|
431
|
-
```typescript
|
|
432
|
-
import { repairTestSuite, formatRepairReport, exportRepairedTest } from 'cbrowser';
|
|
433
|
-
|
|
434
|
-
const result = await repairTestSuite(suite, {
|
|
435
|
-
autoApply: true,
|
|
436
|
-
verifyRepairs: true,
|
|
437
|
-
});
|
|
438
|
-
|
|
439
|
-
console.log(formatRepairReport(result));
|
|
440
|
-
|
|
441
|
-
for (const testResult of result.testResults) {
|
|
442
|
-
console.log(exportRepairedTest(testResult));
|
|
443
|
-
}
|
|
444
|
-
```
|
|
445
|
-
|
|
446
|
-
### Flaky Test Detection
|
|
447
|
-
|
|
448
|
-
Identify unreliable tests by running them multiple times and analyzing consistency. Useful for catching timing-sensitive tests before they cause CI failures.
|
|
449
|
-
|
|
450
|
-
```bash
|
|
451
|
-
# Run tests 5 times (default) and detect flakiness
|
|
452
|
-
npx cbrowser flaky-check tests.txt
|
|
453
|
-
|
|
454
|
-
# Custom number of runs
|
|
455
|
-
npx cbrowser flaky-check tests.txt --runs 10
|
|
456
|
-
|
|
457
|
-
# Set custom flakiness threshold (default: 20%)
|
|
458
|
-
npx cbrowser flaky-check tests.txt --threshold 30
|
|
459
|
-
|
|
460
|
-
# Save report to file
|
|
461
|
-
npx cbrowser flaky-check tests.txt --output flaky-report.json
|
|
462
|
-
```
|
|
463
|
-
|
|
464
|
-
**What it measures:**
|
|
465
|
-
|
|
466
|
-
| Metric | Description |
|
|
467
|
-
|--------|-------------|
|
|
468
|
-
| **Flakiness Score** | 0% = perfectly stable, 100% = maximally flaky (50/50 pass/fail) |
|
|
469
|
-
| **Classification** | `stable_pass`, `stable_fail`, `flaky`, `mostly_pass`, `mostly_fail` |
|
|
470
|
-
| **Per-Step Analysis** | Identifies which specific steps are unreliable |
|
|
471
|
-
| **Duration Variance** | Detects timing-sensitive tests |
|
|
472
|
-
|
|
473
|
-
**API usage:**
|
|
474
|
-
|
|
475
|
-
```typescript
|
|
476
|
-
import { parseNLTestSuite, detectFlakyTests, formatFlakyTestReport } from 'cbrowser';
|
|
477
|
-
|
|
478
|
-
const suite = parseNLTestSuite(testContent, "My Tests");
|
|
479
|
-
|
|
480
|
-
const result = await detectFlakyTests(suite, {
|
|
481
|
-
runs: 10,
|
|
482
|
-
flakinessThreshold: 25,
|
|
483
|
-
delayBetweenRuns: 1000,
|
|
484
|
-
});
|
|
485
|
-
|
|
486
|
-
console.log(formatFlakyTestReport(result));
|
|
487
|
-
|
|
488
|
-
for (const test of result.testAnalyses) {
|
|
489
|
-
if (test.isFlaky) {
|
|
490
|
-
console.log(`${test.testName}: ${test.flakinessScore}% flaky`);
|
|
491
|
-
for (const step of test.stepAnalysis) {
|
|
492
|
-
if (step.isFlaky) {
|
|
493
|
-
console.log(` - ${step.instruction}: ${step.flakinessScore}% flaky`);
|
|
494
|
-
}
|
|
495
|
-
}
|
|
496
|
-
}
|
|
497
|
-
}
|
|
498
|
-
```
|
|
138
|
+
CBrowser analyzes failures, generates alternative selectors, and repairs tests automatically.
|
|
499
139
|
|
|
500
140
|
---
|
|
501
141
|
|
|
502
|
-
## Visual Testing
|
|
142
|
+
## Visual Testing Suite
|
|
503
143
|
|
|
504
144
|
### AI Visual Regression
|
|
505
145
|
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
```bash
|
|
509
|
-
# Capture a baseline
|
|
510
|
-
npx cbrowser ai-visual capture "https://example.com" --name homepage
|
|
511
|
-
|
|
512
|
-
# Compare against baseline
|
|
513
|
-
npx cbrowser ai-visual test "https://staging.example.com" homepage --html
|
|
514
|
-
|
|
515
|
-
# List baselines
|
|
516
|
-
npx cbrowser ai-visual list
|
|
517
|
-
```
|
|
518
|
-
|
|
519
|
-
### Cross-Browser Visual Testing
|
|
520
|
-
|
|
521
|
-
Compare how a page renders across Chrome, Firefox, and Safari to catch browser-specific layout issues:
|
|
522
|
-
|
|
523
|
-
```bash
|
|
524
|
-
npx cbrowser cross-browser "https://example.com" --html
|
|
525
|
-
npx cbrowser cross-browser "https://example.com" --browsers chromium,firefox,webkit
|
|
526
|
-
```
|
|
527
|
-
|
|
528
|
-
### Responsive Visual Testing
|
|
529
|
-
|
|
530
|
-
Test across viewport sizes (mobile, tablet, desktop) to verify responsive layouts:
|
|
531
|
-
|
|
532
|
-
```bash
|
|
533
|
-
npx cbrowser responsive "https://example.com" --html
|
|
534
|
-
npx cbrowser responsive "https://example.com" --viewports mobile,tablet,desktop-lg
|
|
535
|
-
npx cbrowser responsive viewports # list available presets
|
|
536
|
-
```
|
|
537
|
-
|
|
538
|
-
### A/B Visual Comparison
|
|
539
|
-
|
|
540
|
-
Compare two different URLs side by side (e.g., staging vs production, old design vs new):
|
|
541
|
-
|
|
542
|
-
```bash
|
|
543
|
-
npx cbrowser ab "https://staging.example.com" "https://example.com" --html
|
|
544
|
-
npx cbrowser ab "https://old.site.com" "https://new.site.com" --label-a "Old" --label-b "New"
|
|
545
|
-
```
|
|
546
|
-
|
|
547
|
-
---
|
|
548
|
-
|
|
549
|
-
## Analysis
|
|
550
|
-
|
|
551
|
-
### Autonomous Bug Hunting
|
|
552
|
-
|
|
553
|
-
Rather than waiting for you to specify what to test, `hunt_bugs` explores a site autonomously and reports issues it finds: broken links, console errors, accessibility violations, and UX problems.
|
|
554
|
-
|
|
555
|
-
```bash
|
|
556
|
-
npx cbrowser hunt-bugs "https://your-site.com" --depth 3
|
|
557
|
-
```
|
|
558
|
-
|
|
559
|
-
### Chaos Engineering
|
|
560
|
-
|
|
561
|
-
Inject controlled failures to verify how your site handles degraded conditions:
|
|
562
|
-
|
|
563
|
-
```bash
|
|
564
|
-
npx cbrowser chaos-test "https://your-site.com" \
|
|
565
|
-
--inject network-slowdown,random-timeouts,failed-assets
|
|
566
|
-
```
|
|
567
|
-
|
|
568
|
-
This is useful for verifying error states, loading indicators, and graceful degradation before they happen in production.
|
|
569
|
-
|
|
570
|
-
### Page Analysis
|
|
571
|
-
|
|
572
|
-
Understand any page's structure:
|
|
573
|
-
|
|
574
|
-
```bash
|
|
575
|
-
npx cbrowser analyze "https://example.com"
|
|
576
|
-
```
|
|
577
|
-
|
|
578
|
-
Output:
|
|
579
|
-
```
|
|
580
|
-
Page Analysis:
|
|
581
|
-
Title: Example Domain
|
|
582
|
-
Forms: 1
|
|
583
|
-
- form#login (3 fields)
|
|
584
|
-
Login form detected
|
|
585
|
-
Buttons: 5
|
|
586
|
-
Links: 12
|
|
587
|
-
Has Login: yes
|
|
588
|
-
Has Search: no
|
|
589
|
-
Has Navigation: yes
|
|
590
|
-
```
|
|
591
|
-
|
|
592
|
-
---
|
|
593
|
-
|
|
594
|
-
## Persona-Based Testing
|
|
595
|
-
|
|
596
|
-
Test your site from different user perspectives. Each persona has realistic timing, error rates, and attention patterns that simulate how different types of users actually interact with interfaces.
|
|
597
|
-
|
|
598
|
-
```bash
|
|
599
|
-
# Quick exploration (free, heuristic-based)
|
|
600
|
-
cbrowser explore "first-timer" \
|
|
601
|
-
--start "https://mysite.com" \
|
|
602
|
-
--goal "Complete signup"
|
|
603
|
-
|
|
604
|
-
# Cognitive journey (API-powered, realistic user simulation)
|
|
605
|
-
cbrowser cognitive-journey \
|
|
606
|
-
--persona "first-timer" \
|
|
607
|
-
--start "https://mysite.com" \
|
|
608
|
-
--goal "Complete signup" \
|
|
609
|
-
--verbose
|
|
610
|
-
|
|
611
|
-
# Compare how different user types experience the same flow
|
|
612
|
-
npx cbrowser compare-personas \
|
|
613
|
-
--start "https://example.com" \
|
|
614
|
-
--goal "Complete checkout" \
|
|
615
|
-
--personas power-user,first-timer,elderly-user,mobile-user
|
|
616
|
-
```
|
|
617
|
-
|
|
618
|
-
**Built-in Personas:**
|
|
619
|
-
|
|
620
|
-
| Persona | Description |
|
|
621
|
-
|---------|-------------|
|
|
622
|
-
| `power-user` | Fast, efficient, uses keyboard shortcuts |
|
|
623
|
-
| `first-timer` | Slow, exploratory, reads everything |
|
|
624
|
-
| `mobile-user` | Touch interface, small screen |
|
|
625
|
-
| `elderly-user` | Larger text needs, slower interactions |
|
|
626
|
-
| `impatient-user` | Quick to abandon on friction |
|
|
627
|
-
|
|
628
|
-
**Example comparison output:**
|
|
629
|
-
|
|
630
|
-
```
|
|
631
|
-
Persona | Success | Time | Friction | Key Issues
|
|
632
|
-
-----------------+---------+---------+----------+------------------
|
|
633
|
-
power-user | pass | 12.5s | 0 | -
|
|
634
|
-
first-timer | pass | 45.2s | 2 | Confusing CTA
|
|
635
|
-
elderly-user | fail | 120.3s | 5 | Small buttons
|
|
636
|
-
mobile-user | pass | 28.1s | 1 | Scroll issue
|
|
637
|
-
```
|
|
638
|
-
|
|
639
|
-
This helps identify which user groups struggle with your interface and where the friction points are, so you can prioritize UX improvements based on data rather than assumptions.
|
|
640
|
-
|
|
641
|
-
### Cognitive User Simulation (v10.0.0)
|
|
642
|
-
|
|
643
|
-
Go beyond timing and click patterns—simulate how users actually **think**. Cognitive journeys model realistic decision-making with abandonment detection, frustration tracking, and genuine cognitive traits—now grounded in **peer-reviewed cognitive science research**.
|
|
644
|
-
|
|
645
|
-
**Why it matters:** Traditional persona testing simulates motor behavior (slow clicks, typos). Cognitive simulation models mental behavior: "Would a confused first-timer give up here? Would they even notice that button?"
|
|
646
|
-
|
|
647
|
-
```bash
|
|
648
|
-
# Run a cognitive journey (requires Anthropic API key)
|
|
649
|
-
npx cbrowser config set-api-key
|
|
650
|
-
npx cbrowser cognitive-journey \
|
|
651
|
-
--persona first-timer \
|
|
652
|
-
--start "https://example.com" \
|
|
653
|
-
--goal "sign up for an account"
|
|
654
|
-
|
|
655
|
-
# With vision mode (v8.4.0) - sends screenshots to Claude for visual understanding
|
|
656
|
-
npx cbrowser cognitive-journey \
|
|
657
|
-
--persona elderly-user \
|
|
658
|
-
--start "https://example.com" \
|
|
659
|
-
--goal "find the help page" \
|
|
660
|
-
--vision \
|
|
661
|
-
--verbose
|
|
662
|
-
|
|
663
|
-
# With all options
|
|
664
|
-
npx cbrowser cognitive-journey \
|
|
665
|
-
--persona elderly-user \
|
|
666
|
-
--start "https://example.com" \
|
|
667
|
-
--goal "find the help page" \
|
|
668
|
-
--max-steps 50 \
|
|
669
|
-
--max-time 180 \
|
|
670
|
-
--vision \
|
|
671
|
-
--headless \
|
|
672
|
-
--verbose
|
|
673
|
-
```
|
|
674
|
-
|
|
675
|
-
**Vision Mode (v8.4.0):** Enable `--vision` to send actual screenshots to Claude. This dramatically improves accuracy for:
|
|
676
|
-
- Complex layouts with multiple similar elements
|
|
677
|
-
- Dropdown menus that need hover to reveal items
|
|
678
|
-
- Visual cues that aren't captured in element text
|
|
679
|
-
- Pages with dynamic content
|
|
680
|
-
|
|
681
|
-
**Cognitive Traits (12 dimensions):**
|
|
682
|
-
|
|
683
|
-
| Trait | What it measures | Example impact |
|
|
684
|
-
|-------|------------------|----------------|
|
|
685
|
-
| `patience` | How quickly they give up | Low patience → abandons after 3 failed attempts |
|
|
686
|
-
| `riskTolerance` | Willingness to click unfamiliar elements | Low risk → avoids buttons without clear labels |
|
|
687
|
-
| `comprehension` | Ability to understand UI conventions | Low comprehension → misreads icons |
|
|
688
|
-
| `persistence` | Tendency to retry vs. try something else | High persistence → keeps trying same approach |
|
|
689
|
-
| `curiosity` | Tendency to explore vs. stay focused | High curiosity → clicks interesting sidebars |
|
|
690
|
-
| `workingMemory` | Remembers what they've tried | Low memory → repeats failed actions |
|
|
691
|
-
| `readingTendency` | Reads content vs. scans for CTAs | High reading → notices inline instructions |
|
|
692
|
-
| `resilience` | Ability to recover emotionally from setbacks | High resilience → frustration drops after success |
|
|
693
|
-
| `selfEfficacy` | Belief in ability to solve problems | Low efficacy → gives up on first error |
|
|
694
|
-
| `satisficing` | Accept "good enough" vs. seek optimal | High satisficing → picks first reasonable option |
|
|
695
|
-
| `trustCalibration` | Baseline trust toward websites | Low trust → scrutinizes security indicators |
|
|
696
|
-
| `interruptRecovery` | Ability to resume after interruption | Low recovery → restarts from beginning |
|
|
697
|
-
|
|
698
|
-
**Attention Patterns:**
|
|
699
|
-
|
|
700
|
-
- `targeted` — Direct path to goal (power users)
|
|
701
|
-
- `f-pattern` — Scans top, then left side (web convention)
|
|
702
|
-
- `z-pattern` — Diagonal scanning (marketing pages)
|
|
703
|
-
- `exploratory` — Random exploration (curious users)
|
|
704
|
-
- `sequential` — Top-to-bottom reading (thorough users)
|
|
705
|
-
- `thorough` — Reads everything carefully (careful users)
|
|
706
|
-
- `skim` — Rapid scanning for keywords (impatient users)
|
|
707
|
-
|
|
708
|
-
**Abandonment Detection:**
|
|
709
|
-
|
|
710
|
-
The simulation automatically stops when a realistic user would give up:
|
|
711
|
-
|
|
712
|
-
| Trigger | Threshold | Monologue |
|
|
713
|
-
|---------|-----------|-----------|
|
|
714
|
-
| Patience depleted | `< 0.1` | "This is taking too long..." |
|
|
715
|
-
| Too confused | `> 0.8` for 30s | "I have no idea what to do..." |
|
|
716
|
-
| Too frustrated | `> 0.85` | "This is so frustrating..." |
|
|
717
|
-
| No progress | 10+ steps, `< 0.1` progress | "I'm not getting anywhere..." |
|
|
718
|
-
| Stuck in loop | Same pages 3x | "I keep ending up here..." |
|
|
719
|
-
| Decision fatigue (v9.9.0) | Fatigue > threshold | "I'll just pick the first option..." |
|
|
720
|
-
|
|
721
|
-
**Cognitive Science Foundations (v9.9.0-v10.2.0):**
|
|
722
|
-
|
|
723
|
-
CBrowser's simulation is grounded in established cognitive science research:
|
|
724
|
-
|
|
725
|
-
| Feature | Research Basis | What It Models |
|
|
726
|
-
|---------|---------------|----------------|
|
|
727
|
-
| **Decision Fatigue** (v9.9.0) | Baumeister's ego depletion | Fatigue accumulates logarithmically per decision; users start choosing defaults |
|
|
728
|
-
| **Fitts' Law** (v9.9.0) | Motor control research | Mouse timing: `MT = a + b × log₂(D/W + 1)` with age/tremor modifiers |
|
|
729
|
-
| **Dual-Process Theory** (v10.0.0) | Kahneman (Nobel Prize) | System 1 (automatic/fast) vs System 2 (deliberate/slow) switching |
|
|
730
|
-
| **GOMS/KLM Timing** (v10.0.0) | Card, Moran & Newell | Keystroke timing: 120ms (expert) to 500ms (novice) per key |
|
|
731
|
-
| **F-Pattern Degradation** (v10.1.0) | Eye-tracking research | Scan pattern narrows under cognitive load → tunnel vision |
|
|
732
|
-
| **Prospect Theory** (v10.1.0) | Kahneman & Tversky (Nobel) | Loss-framed CTAs ("Don't miss out!") boost clicks; gain-framed reduce |
|
|
733
|
-
| **Saliency Attention** (v10.2.0) | WebGazer.js visual attention | Size, contrast, position, motion → what grabs attention first |
|
|
734
|
-
| **Gaze-Mouse Lag** (v10.2.0) | Eye-tracking research | Eyes lead mouse by 200-500ms depending on age |
|
|
735
|
-
| **Tunnel Vision** (v10.2.0) | Yerkes-Dodson Law | High stress/arousal reduces peripheral vision to 30% |
|
|
736
|
-
| **Banner Blindness** (v10.2.0) | Habituation research | Repeated exposure → patterns become invisible (cookie banners, popups) |
|
|
737
|
-
| **Resilience** (v10.6.0) | [Brief Resilience Scale](https://pubmed.ncbi.nlm.nih.gov/18696313/) (Smith et al., 2008) | Frustration decay rate + success recovery; high resilience = rapid emotional bounce-back |
|
|
738
|
-
| **Self-Efficacy** (v11.5.0) | [Bandura (1977)](https://psycnet.apa.org/record/1977-25733-001) - Self-efficacy theory | Belief in problem-solving ability; low efficacy → 40% faster abandonment on first error |
|
|
739
|
-
| **Satisficing** (v11.5.0) | [Simon (1956)](https://doi.org/10.2307/1884852) - Bounded rationality | Accept "good enough" vs. maximize; satisficers decide 50% faster with similar outcomes |
|
|
740
|
-
| **Trust Calibration** (v11.5.0) | [Fogg (2003)](https://www.amazon.com/dp/1558606432) - Stanford Persuasive Tech Lab | Baseline trust affects CTA click-through by 40%; 8 trust signal types evaluated |
|
|
741
|
-
| **Interrupt Recovery** (v11.5.0) | [Mark et al. (2005)](https://dl.acm.org/doi/10.1145/1054972.1055017) - Fragmented work | Average recovery time 23min; models context preservation and resumption outcomes |
|
|
146
|
+
Semantic comparison—understands what changed, not just pixel differences:
|
|
742
147
|
|
|
743
148
|
```bash
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
# Decision fatigue: 67%
|
|
747
|
-
# ⚠️ Was choosing defaults (high fatigue)
|
|
748
|
-
# Time in System 1: 45.2s (automatic)
|
|
749
|
-
# Time in System 2: 12.8s (deliberate)
|
|
750
|
-
# 👁️ Tunnel vision: scanning only left 30% of viewport
|
|
751
|
-
# 👁️ Banner blindness: now ignoring "cookie-banner" patterns
|
|
149
|
+
npx cbrowser ai-visual capture "https://your-site.com" --name homepage
|
|
150
|
+
npx cbrowser ai-visual test "https://staging.your-site.com" homepage --html
|
|
752
151
|
```
|
|
753
152
|
|
|
754
|
-
|
|
755
|
-
- Goal achievement status
|
|
756
|
-
- Abandonment reason (if applicable)
|
|
757
|
-
- Step-by-step decision trace with reasoning
|
|
758
|
-
- Friction points with screenshots
|
|
759
|
-
- Cognitive state over time (patience, confusion, frustration)
|
|
760
|
-
- Full internal monologue
|
|
761
|
-
|
|
762
|
-
**MCP Integration (Claude Desktop/Code):**
|
|
763
|
-
|
|
764
|
-
For Claude Desktop or Claude Code users, use the MCP tools instead:
|
|
765
|
-
|
|
766
|
-
```typescript
|
|
767
|
-
// Initialize cognitive journey
|
|
768
|
-
const profile = await mcp.cognitive_journey_init({
|
|
769
|
-
persona: "first-timer",
|
|
770
|
-
goal: "sign up as a provider",
|
|
771
|
-
startUrl: "https://example.com"
|
|
772
|
-
});
|
|
773
|
-
|
|
774
|
-
// After each action, update state
|
|
775
|
-
const state = await mcp.cognitive_journey_update_state({
|
|
776
|
-
sessionId: profile.sessionId,
|
|
777
|
-
patienceChange: -0.05,
|
|
778
|
-
confusionChange: 0.1,
|
|
779
|
-
currentUrl: "https://example.com/register"
|
|
780
|
-
});
|
|
781
|
-
|
|
782
|
-
if (state.shouldAbandon) {
|
|
783
|
-
console.log(`User gave up: ${state.abandonmentReason}`);
|
|
784
|
-
}
|
|
785
|
-
```
|
|
786
|
-
|
|
787
|
-
**Custom persona creation:**
|
|
153
|
+
### Cross-Browser & Responsive
|
|
788
154
|
|
|
789
155
|
```bash
|
|
790
|
-
#
|
|
791
|
-
npx cbrowser
|
|
792
|
-
npx cbrowser persona create "elderly grandmother new to computers" --name grandma
|
|
793
|
-
|
|
794
|
-
# List all personas (built-in + custom)
|
|
795
|
-
npx cbrowser persona list
|
|
796
|
-
|
|
797
|
-
# View, export, import, delete
|
|
798
|
-
npx cbrowser persona show speed-demon
|
|
799
|
-
npx cbrowser persona export speed-demon
|
|
800
|
-
npx cbrowser persona import custom-persona.json
|
|
801
|
-
npx cbrowser persona delete speed-demon
|
|
802
|
-
```
|
|
156
|
+
# Compare Chrome, Firefox, Safari rendering
|
|
157
|
+
npx cbrowser cross-browser "https://your-site.com" --html
|
|
803
158
|
|
|
804
|
-
|
|
159
|
+
# Test across mobile, tablet, desktop
|
|
160
|
+
npx cbrowser responsive "https://your-site.com" --html
|
|
805
161
|
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
```bash
|
|
809
|
-
# JSON report
|
|
810
|
-
npx cbrowser compare-personas --start "..." --goal "..." --output report.json
|
|
811
|
-
|
|
812
|
-
# HTML report
|
|
813
|
-
npx cbrowser compare-personas --start "..." --goal "..." --html
|
|
162
|
+
# A/B comparison (staging vs production)
|
|
163
|
+
npx cbrowser ab "https://staging.your-site.com" "https://your-site.com" --html
|
|
814
164
|
```
|
|
815
165
|
|
|
816
166
|
---
|
|
817
167
|
|
|
818
|
-
## UX Analysis Suite
|
|
819
|
-
|
|
820
|
-
CBrowser v9 introduces four breakthrough features for understanding and improving user experience at scale.
|
|
168
|
+
## UX Analysis Suite
|
|
821
169
|
|
|
822
170
|
### Agent-Ready Audit
|
|
823
171
|
|
|
824
|
-
Analyze any website for AI-agent friendliness
|
|
172
|
+
Analyze any website for AI-agent friendliness:
|
|
825
173
|
|
|
826
174
|
```bash
|
|
827
|
-
npx cbrowser agent-ready-audit "https://
|
|
828
|
-
```
|
|
829
|
-
|
|
830
|
-
**Output includes:**
|
|
831
|
-
- **Findability score** — Can agents locate elements? (aria-labels, data-testid, semantic HTML)
|
|
832
|
-
- **Stability score** — Will selectors break? (hidden inputs, sticky overlays, custom dropdowns)
|
|
833
|
-
- **Accessibility score** — ARIA/semantic HTML quality
|
|
834
|
-
- **Semantics score** — Meaningful labels and text content
|
|
835
|
-
- **Letter grade (A-F)** with prioritized remediation recommendations
|
|
836
|
-
- Code examples for each fix
|
|
837
|
-
|
|
838
|
-
**Example output:**
|
|
175
|
+
npx cbrowser agent-ready-audit "https://your-site.com" --html
|
|
839
176
|
```
|
|
840
|
-
🤖 AGENT-READY AUDIT: example.com
|
|
841
|
-
|
|
842
|
-
SCORE: 67/100 GRADE: D
|
|
843
|
-
|
|
844
|
-
┌────────────────┬────────────────┬────────────────┐
|
|
845
|
-
│ Findability │ Stability │ Accessibility │
|
|
846
|
-
│ 72/100 │ 58/100 │ 71/100 │
|
|
847
|
-
└────────────────┴────────────────┴────────────────┘
|
|
848
|
-
|
|
849
|
-
TOP RECOMMENDATIONS
|
|
850
177
|
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
<button onclick="..."> instead of <div onclick="...">
|
|
856
|
-
```
|
|
178
|
+
Returns:
|
|
179
|
+
- **Findability score** — Can agents locate elements? (ARIA labels, semantic HTML)
|
|
180
|
+
- **Stability score** — Will selectors break? (hidden inputs, overlays)
|
|
181
|
+
- **Letter grade (A-F)** with prioritized remediation and code examples
|
|
857
182
|
|
|
858
183
|
### Competitive UX Benchmark
|
|
859
184
|
|
|
860
|
-
Run identical cognitive journeys across your site
|
|
185
|
+
Run identical cognitive journeys across your site and competitors:
|
|
861
186
|
|
|
862
187
|
```bash
|
|
863
188
|
npx cbrowser competitive-benchmark \
|
|
864
|
-
--sites "https://
|
|
189
|
+
--sites "https://your-site.com,https://competitor-a.com,https://competitor-b.com" \
|
|
865
190
|
--goal "sign up for free trial" \
|
|
866
|
-
--persona
|
|
191
|
+
--persona first-timer \
|
|
867
192
|
--html
|
|
868
193
|
```
|
|
869
194
|
|
|
870
|
-
**Features:**
|
|
871
|
-
- **Parallel site testing** — Runs journeys concurrently across all sites
|
|
872
|
-
- **Abandonment risk scale (1-10)** with descriptive labels
|
|
873
|
-
- **Comparative rankings** with strengths/weaknesses per site
|
|
874
|
-
- **Competitive recommendations** — "Competitor A does this better"
|
|
875
|
-
|
|
876
|
-
**Abandonment Risk Scale:**
|
|
877
|
-
| Score | Label | Meaning |
|
|
878
|
-
|-------|-------|---------|
|
|
879
|
-
| 1-2 | Very Low | Users likely to complete. Smooth experience. |
|
|
880
|
-
| 3-4 | Low | Minor friction. Most users persist. |
|
|
881
|
-
| 5-6 | Medium | Noticeable friction. Some users may leave. |
|
|
882
|
-
| 7-8 | High | Significant obstacles. Many users abandon. |
|
|
883
|
-
| 9-10 | Very High | Critical barriers. Most users will leave. |
|
|
884
|
-
|
|
885
195
|
### Accessibility Empathy Mode
|
|
886
196
|
|
|
887
|
-
Simulate how users with disabilities
|
|
197
|
+
Simulate how users with disabilities experience your site:
|
|
888
198
|
|
|
889
199
|
```bash
|
|
890
|
-
npx cbrowser empathy-audit "https://
|
|
200
|
+
npx cbrowser empathy-audit "https://your-site.com" \
|
|
891
201
|
--goal "complete signup" \
|
|
892
202
|
--disabilities "motor-tremor,low-vision,adhd" \
|
|
893
203
|
--html
|
|
894
204
|
```
|
|
895
205
|
|
|
896
|
-
**
|
|
897
|
-
|
|
898
|
-
| Persona | Simulates |
|
|
899
|
-
|---------|-----------|
|
|
900
|
-
| `motor-tremor` | Essential tremor, Parkinson's — hand jitter, reduced precision |
|
|
901
|
-
| `low-vision` | Macular degeneration, cataracts — needs 3x magnification, high contrast |
|
|
902
|
-
| `cognitive-adhd` | ADHD — reduced attention span, high distraction rate |
|
|
903
|
-
| `dyslexic` | Dyslexia — slower reading, word jumbling |
|
|
904
|
-
| `deaf` | Deaf/hard of hearing — no audio cues, relies on captions |
|
|
905
|
-
| `elderly` | Age-related decline — slower reactions, larger touch targets needed |
|
|
906
|
-
|
|
907
|
-
**Barrier Detection:**
|
|
908
|
-
- Motor precision issues (touch targets < 44x44px)
|
|
909
|
-
- Visual clarity problems (contrast ratio < 4.5:1)
|
|
910
|
-
- Cognitive load overload (too many options, complex forms)
|
|
911
|
-
- Timing issues (timeouts, auto-advancing carousels)
|
|
912
|
-
|
|
913
|
-
**WCAG Mapping:** Each barrier links to specific WCAG criteria (2.5.5 touch targets, 1.4.3 contrast, etc.)
|
|
914
|
-
|
|
915
|
-
### Probabilistic Focus Hierarchies
|
|
916
|
-
|
|
917
|
-
Realistic attention simulation based on eye-tracking research. Different task types focus on different page areas.
|
|
918
|
-
|
|
919
|
-
**Task Types:**
|
|
920
|
-
|
|
921
|
-
| Type | Prioritizes | Based on |
|
|
922
|
-
|------|-------------|----------|
|
|
923
|
-
| `find_information` | Headings (95%), Navigation (85%), Search (75%) | Looking for specific info |
|
|
924
|
-
| `complete_action` | CTAs (95%), Forms (90%), Navigation (80%) | Trying to do something |
|
|
925
|
-
| `explore` | Hero (85%), Headings (80%), Navigation (75%) | Just browsing |
|
|
926
|
-
| `compare` | Content (90%), Headings (85%), Navigation (70%) | Comparing options |
|
|
927
|
-
| `troubleshoot` | Search (90%), Navigation (85%), Content (80%) | Fixing a problem |
|
|
928
|
-
|
|
929
|
-
**Distraction Filtering:**
|
|
930
|
-
- Cookie banners: 85% ignore rate
|
|
931
|
-
- Newsletter popups: 90% ignore rate
|
|
932
|
-
- Chat widgets: 80% ignore rate
|
|
933
|
-
- Social share buttons: 80% ignore rate
|
|
934
|
-
|
|
935
|
-
Based on research from Nielsen Norman Group (F-pattern scanning), Baymard Institute (e-commerce UX), and WebAIM (accessibility patterns).
|
|
936
|
-
|
|
937
|
-
---
|
|
938
|
-
|
|
939
|
-
## Performance
|
|
940
|
-
|
|
941
|
-
### Performance Metrics
|
|
942
|
-
|
|
943
|
-
```bash
|
|
944
|
-
# Core Web Vitals
|
|
945
|
-
npx cbrowser perf "https://example.com"
|
|
946
|
-
|
|
947
|
-
# With budget
|
|
948
|
-
npx cbrowser perf audit "https://example.com" --budget-lcp 2500
|
|
949
|
-
```
|
|
950
|
-
|
|
951
|
-
### Performance Regression Detection
|
|
952
|
-
|
|
953
|
-
Track performance baselines and detect regressions with configurable sensitivity to avoid false positives:
|
|
954
|
-
|
|
955
|
-
```bash
|
|
956
|
-
npx cbrowser visual-baseline "https://your-site.com" --with-performance
|
|
957
|
-
npx cbrowser visual-compare --check-perf-regression
|
|
958
|
-
|
|
959
|
-
# Sensitivity profiles: strict (CI/CD), normal (default), lenient (development)
|
|
960
|
-
npx cbrowser perf-regression "https://example.com" baseline.json --sensitivity strict
|
|
961
|
-
```
|
|
962
|
-
|
|
963
|
-
---
|
|
964
|
-
|
|
965
|
-
## Modular Architecture
|
|
966
|
-
|
|
967
|
-
CBrowser is split into tree-shakeable modules so you can import only what you need:
|
|
968
|
-
|
|
969
|
-
```typescript
|
|
970
|
-
// Import everything
|
|
971
|
-
import { CBrowser, runVisualRegression, detectFlakyTests } from 'cbrowser';
|
|
972
|
-
|
|
973
|
-
// Import specific modules
|
|
974
|
-
import { runVisualRegression, runCrossBrowserTest } from 'cbrowser/visual';
|
|
975
|
-
import { runNLTestSuite, detectFlakyTests, repairTest } from 'cbrowser/testing';
|
|
976
|
-
import { huntBugs, runChaosTest, findElementByIntent } from 'cbrowser/analysis';
|
|
977
|
-
import { capturePerformanceBaseline, detectPerformanceRegression } from 'cbrowser/performance';
|
|
978
|
-
```
|
|
979
|
-
|
|
980
|
-
| Module | Purpose |
|
|
981
|
-
|--------|---------|
|
|
982
|
-
| `cbrowser/visual` | Visual testing (regression, cross-browser, responsive, A/B) |
|
|
983
|
-
| `cbrowser/testing` | Test automation (NL suites, repair, flaky detection, coverage) |
|
|
984
|
-
| `cbrowser/analysis` | AI analysis (bug hunting, chaos testing, persona comparison) |
|
|
985
|
-
| `cbrowser/performance` | Performance (baselines, regression detection) |
|
|
206
|
+
**Available personas:** `motor-tremor`, `low-vision`, `cognitive-adhd`, `dyslexic`, `deaf`, `elderly`
|
|
986
207
|
|
|
987
208
|
---
|
|
988
209
|
|
|
989
210
|
## MCP Server Integration
|
|
990
211
|
|
|
991
|
-
CBrowser runs as an MCP server for
|
|
212
|
+
CBrowser runs as an MCP server for Claude Desktop and claude.ai.
|
|
992
213
|
|
|
993
214
|
### Remote MCP (claude.ai)
|
|
994
215
|
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
3. Add URL: `https://your-cbrowser-domain.com/mcp`
|
|
216
|
+
**Public Demo Server** (rate-limited, no auth):
|
|
217
|
+
```
|
|
218
|
+
https://cbrowser-mcp-demo.wyldfyre.ai/mcp
|
|
219
|
+
```
|
|
1000
220
|
|
|
1001
|
-
|
|
1002
|
-
- No authentication required
|
|
1003
|
-
- Rate limit: 5 requests/minute, burst of 10
|
|
1004
|
-
- For evaluation purposes only
|
|
221
|
+
Deploy your own: see [Remote MCP Server Guide](docs/REMOTE-MCP-SERVER.md)
|
|
1005
222
|
|
|
1006
223
|
### Local MCP (Claude Desktop)
|
|
1007
224
|
|
|
1008
|
-
Run CBrowser locally for Claude Desktop:
|
|
1009
|
-
|
|
1010
|
-
```bash
|
|
1011
|
-
npx cbrowser mcp-server
|
|
1012
|
-
```
|
|
1013
|
-
|
|
1014
|
-
Add to Claude Desktop config (`~/.config/claude-desktop/config.json`):
|
|
1015
|
-
|
|
1016
225
|
```json
|
|
1017
226
|
{
|
|
1018
227
|
"mcpServers": {
|
|
@@ -1024,69 +233,83 @@ Add to Claude Desktop config (`~/.config/claude-desktop/config.json`):
|
|
|
1024
233
|
}
|
|
1025
234
|
```
|
|
1026
235
|
|
|
1027
|
-
###
|
|
236
|
+
### 43 MCP Tools
|
|
1028
237
|
|
|
1029
238
|
| Category | Tools |
|
|
1030
239
|
|----------|-------|
|
|
1031
240
|
| **Navigation** | `navigate`, `screenshot`, `extract` |
|
|
1032
|
-
| **Interaction** | `click`, `smart_click`, `fill`, `scroll
|
|
1033
|
-
| **
|
|
1034
|
-
| **Testing** | `generate_tests`, `test_suite`, `repair_tests`, `flaky_check` |
|
|
241
|
+
| **Interaction** | `click`, `smart_click`, `fill`, `scroll` |
|
|
242
|
+
| **Testing** | `test_suite`, `repair_tests`, `flaky_check` |
|
|
1035
243
|
| **Visual** | `visual_baseline`, `visual_compare`, `responsive_test`, `cross_browser_test`, `ab_compare` |
|
|
1036
|
-
| **
|
|
1037
|
-
| **
|
|
1038
|
-
| **Persona Comparison (Session Bridge)** | `compare_personas_init`, `compare_personas_record_result`, `compare_personas_summarize` |
|
|
1039
|
-
| **Sessions** | `save_session`, `load_session`, `list_sessions`, `delete_session` |
|
|
1040
|
-
| **Analysis** | `hunt_bugs`, `chaos_test`, `performance_audit`, `dismiss_overlay`, `agent_ready_audit`, `competitive_benchmark`, `empathy_audit` |
|
|
1041
|
-
| **Utilities** | `heal_stats`, `list_baselines`, `status` |
|
|
244
|
+
| **Cognitive** | `cognitive_journey_init`, `cognitive_journey_update_state`, `compare_personas` |
|
|
245
|
+
| **Analysis** | `hunt_bugs`, `chaos_test`, `agent_ready_audit`, `competitive_benchmark`, `empathy_audit` |
|
|
1042
246
|
|
|
1043
|
-
|
|
247
|
+
---
|
|
248
|
+
|
|
249
|
+
## CI/CD Integration
|
|
1044
250
|
|
|
1045
|
-
|
|
251
|
+
### GitHub Actions
|
|
1046
252
|
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
253
|
+
```yaml
|
|
254
|
+
name: CBrowser Tests
|
|
255
|
+
on: [pull_request]
|
|
256
|
+
|
|
257
|
+
jobs:
|
|
258
|
+
test:
|
|
259
|
+
runs-on: ubuntu-latest
|
|
260
|
+
steps:
|
|
261
|
+
- uses: actions/checkout@v4
|
|
262
|
+
- uses: alexandriashai/cbrowser@v11
|
|
263
|
+
with:
|
|
264
|
+
test-file: tests/e2e/checkout.txt
|
|
265
|
+
sensitivity: strict
|
|
266
|
+
```
|
|
1053
267
|
|
|
1054
|
-
|
|
268
|
+
### Docker
|
|
1055
269
|
|
|
1056
|
-
|
|
270
|
+
```bash
|
|
271
|
+
docker run --rm -v $(pwd)/tests:/work/tests ghcr.io/alexandriashai/cbrowser:latest \
|
|
272
|
+
test-suite tests/checkout.txt --html
|
|
273
|
+
```
|
|
1057
274
|
|
|
1058
275
|
---
|
|
1059
276
|
|
|
1060
|
-
##
|
|
277
|
+
## Modular Architecture
|
|
278
|
+
|
|
279
|
+
Tree-shakeable imports for minimal bundle size:
|
|
280
|
+
|
|
281
|
+
```typescript
|
|
282
|
+
// Import specific modules
|
|
283
|
+
import { runVisualRegression, runCrossBrowserTest } from 'cbrowser/visual';
|
|
284
|
+
import { runNLTestSuite, detectFlakyTests, repairTest } from 'cbrowser/testing';
|
|
285
|
+
import { huntBugs, runChaosTest, findElementByIntent } from 'cbrowser/analysis';
|
|
286
|
+
import { capturePerformanceBaseline, detectPerformanceRegression } from 'cbrowser/performance';
|
|
287
|
+
```
|
|
288
|
+
|
|
289
|
+
---
|
|
290
|
+
|
|
291
|
+
## API Reference
|
|
1061
292
|
|
|
1062
293
|
```typescript
|
|
1063
294
|
import { CBrowser } from 'cbrowser';
|
|
1064
295
|
|
|
1065
296
|
const browser = new CBrowser({
|
|
1066
297
|
headless: true,
|
|
1067
|
-
persistent: true, //
|
|
298
|
+
persistent: true, // Maintain cookies between sessions
|
|
1068
299
|
});
|
|
1069
300
|
|
|
1070
|
-
// Navigate
|
|
1071
301
|
await browser.navigate('https://example.com');
|
|
1072
302
|
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
await browser.fill('email', 'user@example.com');
|
|
303
|
+
const result = await browser.smartClick('Sign In', {
|
|
304
|
+
maxRetries: 3,
|
|
305
|
+
minConfidence: 0.8 // v11.11.0: Raised threshold for reliable healing
|
|
306
|
+
});
|
|
1078
307
|
|
|
1079
|
-
// Assert
|
|
1080
308
|
const assertion = await browser.assert("page contains 'Welcome'");
|
|
1081
309
|
if (!assertion.passed) {
|
|
1082
310
|
console.error(assertion.message);
|
|
1083
311
|
}
|
|
1084
312
|
|
|
1085
|
-
// Generate tests
|
|
1086
|
-
const tests = await browser.generateTests();
|
|
1087
|
-
console.log(tests.playwrightCode);
|
|
1088
|
-
|
|
1089
|
-
// Cleanup
|
|
1090
313
|
await browser.close();
|
|
1091
314
|
```
|
|
1092
315
|
|
|
@@ -1099,241 +322,48 @@ await browser.close();
|
|
|
1099
322
|
| Variable | Default | Description |
|
|
1100
323
|
|----------|---------|-------------|
|
|
1101
324
|
| `CBROWSER_DATA_DIR` | `~/.cbrowser` | Data storage directory |
|
|
1102
|
-
| `CBROWSER_HEADLESS` | `true` | Run headless
|
|
325
|
+
| `CBROWSER_HEADLESS` | `true` | Run headless |
|
|
1103
326
|
| `CBROWSER_BROWSER` | `chromium` | Browser engine |
|
|
1104
327
|
| `CBROWSER_TIMEOUT` | `30000` | Default timeout (ms) |
|
|
1105
328
|
|
|
1106
|
-
###
|
|
1107
|
-
|
|
1108
|
-
Create `.cbrowserrc.json`:
|
|
1109
|
-
|
|
1110
|
-
```json
|
|
1111
|
-
{
|
|
1112
|
-
"headless": true,
|
|
1113
|
-
"timeout": 60000,
|
|
1114
|
-
"persistent": true,
|
|
1115
|
-
"viewport": {
|
|
1116
|
-
"width": 1920,
|
|
1117
|
-
"height": 1080
|
|
1118
|
-
}
|
|
1119
|
-
}
|
|
1120
|
-
```
|
|
1121
|
-
|
|
1122
|
-
### API Key Configuration (for Cognitive Journeys)
|
|
1123
|
-
|
|
1124
|
-
Cognitive journeys require an Anthropic API key for standalone CLI usage:
|
|
329
|
+
### API Key (for Cognitive Journeys)
|
|
1125
330
|
|
|
1126
331
|
```bash
|
|
1127
|
-
# Set your API key (stored in ~/.cbrowserrc.json)
|
|
1128
332
|
npx cbrowser config set-api-key
|
|
1129
|
-
|
|
1130
|
-
# View configured key (masked)
|
|
1131
|
-
npx cbrowser config show-api-key
|
|
1132
|
-
|
|
1133
|
-
# Remove API key
|
|
1134
|
-
npx cbrowser config remove-api-key
|
|
1135
|
-
|
|
1136
|
-
# Set custom model (default: claude-sonnet-4-20250514)
|
|
1137
|
-
npx cbrowser config set-model claude-opus-4-20250514
|
|
1138
|
-
```
|
|
1139
|
-
|
|
1140
|
-
**Note:** MCP users (Claude Desktop/Code) don't need API key configuration—cognitive journeys use the existing Claude session.
|
|
1141
|
-
|
|
1142
|
-
---
|
|
1143
|
-
|
|
1144
|
-
## Multi-Browser Support
|
|
1145
|
-
|
|
1146
|
-
```bash
|
|
1147
|
-
# Firefox
|
|
1148
|
-
npx cbrowser navigate "https://example.com" --browser firefox
|
|
1149
|
-
|
|
1150
|
-
# WebKit (Safari)
|
|
1151
|
-
npx cbrowser navigate "https://example.com" --browser webkit
|
|
1152
|
-
```
|
|
1153
|
-
|
|
1154
|
-
### Device Emulation
|
|
1155
|
-
|
|
1156
|
-
```bash
|
|
1157
|
-
# Mobile
|
|
1158
|
-
npx cbrowser navigate "https://example.com" --device iphone-15
|
|
1159
|
-
|
|
1160
|
-
# Tablet
|
|
1161
|
-
npx cbrowser navigate "https://example.com" --device ipad-pro-12
|
|
1162
|
-
|
|
1163
|
-
# List devices
|
|
1164
|
-
npx cbrowser device list
|
|
1165
|
-
```
|
|
1166
|
-
|
|
1167
|
-
### Persistent Browser Context
|
|
1168
|
-
|
|
1169
|
-
Enable persistent mode to keep cookies and localStorage between CLI calls:
|
|
1170
|
-
|
|
1171
|
-
```bash
|
|
1172
|
-
npx cbrowser navigate "https://example.com" --persistent
|
|
1173
|
-
```
|
|
1174
|
-
|
|
1175
|
-
---
|
|
1176
|
-
|
|
1177
|
-
## Performance
|
|
1178
|
-
|
|
1179
|
-
CBrowser uses optimized Chromium launch flags for fast startup:
|
|
1180
|
-
|
|
1181
|
-
- ~1 second browser cold start (vs 3-5s default)
|
|
1182
|
-
- Persistent context keeps cookies between calls
|
|
1183
|
-
- Self-healing cache reduces retry overhead
|
|
1184
|
-
|
|
1185
|
-
---
|
|
1186
|
-
|
|
1187
|
-
## CI/CD Integration
|
|
1188
|
-
|
|
1189
|
-
CBrowser provides native integrations for CI/CD pipelines. Add browser automation, visual regression, and NL test validation to every pull request.
|
|
1190
|
-
|
|
1191
|
-
### GitHub Actions
|
|
1192
|
-
|
|
1193
|
-
Use the official GitHub Action for zero-config setup:
|
|
1194
|
-
|
|
1195
|
-
```yaml
|
|
1196
|
-
# .github/workflows/cbrowser.yml
|
|
1197
|
-
name: CBrowser Tests
|
|
1198
|
-
on: [pull_request]
|
|
1199
|
-
|
|
1200
|
-
jobs:
|
|
1201
|
-
test:
|
|
1202
|
-
runs-on: ubuntu-latest
|
|
1203
|
-
steps:
|
|
1204
|
-
- uses: actions/checkout@v4
|
|
1205
|
-
- uses: alexandriashai/cbrowser@v9
|
|
1206
|
-
with:
|
|
1207
|
-
test-file: tests/e2e/checkout.txt
|
|
1208
|
-
sensitivity: strict
|
|
1209
333
|
```
|
|
1210
334
|
|
|
1211
|
-
Available inputs: `test-file`, `url`, `command`, `browsers`, `sensitivity`.
|
|
1212
|
-
|
|
1213
|
-
### GitLab CI
|
|
1214
|
-
|
|
1215
|
-
Include the reusable component:
|
|
1216
|
-
|
|
1217
|
-
```yaml
|
|
1218
|
-
include:
|
|
1219
|
-
- component: gitlab.com/alexandriashai/cbrowser/.gitlab-ci-component.yml
|
|
1220
|
-
inputs:
|
|
1221
|
-
test-file: tests/e2e/checkout.txt
|
|
1222
|
-
sensitivity: strict
|
|
1223
|
-
```
|
|
1224
|
-
|
|
1225
|
-
### Docker
|
|
1226
|
-
|
|
1227
|
-
Run CBrowser in any CI system using the Docker image:
|
|
1228
|
-
|
|
1229
|
-
```bash
|
|
1230
|
-
docker run --rm -v $(pwd)/tests:/work/tests ghcr.io/alexandriashai/cbrowser:latest \
|
|
1231
|
-
test-suite tests/checkout.txt --output results.json --html
|
|
1232
|
-
```
|
|
1233
|
-
|
|
1234
|
-
### Exit Codes
|
|
1235
|
-
|
|
1236
|
-
CBrowser exits with code 1 on test failure, making it compatible with any CI system that uses exit codes to determine pass/fail status.
|
|
1237
|
-
|
|
1238
|
-
For detailed setup guides and examples, see [`examples/ci-cd/`](examples/ci-cd/).
|
|
1239
|
-
|
|
1240
335
|
---
|
|
1241
336
|
|
|
1242
337
|
## Examples
|
|
1243
338
|
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
- [`cognitive-journey.ts`](examples/cognitive-journey.ts) - Cognitive user simulation with personas, abandonment, and friction detection
|
|
1252
|
-
|
|
1253
|
-
### Workflow Recipes
|
|
1254
|
-
- [`workflows/e2e-login-checkout.md`](examples/workflows/e2e-login-checkout.md) - End-to-end login and checkout flow with session persistence
|
|
1255
|
-
- [`workflows/visual-regression-ci.md`](examples/workflows/visual-regression-ci.md) - Visual regression testing with baselines, cross-browser, and responsive checks
|
|
1256
|
-
- [`workflows/accessibility-audit.md`](examples/workflows/accessibility-audit.md) - Accessibility bug hunting with persona-based a11y testing
|
|
1257
|
-
- [`workflows/chaos-resilience-testing.md`](examples/workflows/chaos-resilience-testing.md) - Chaos engineering: network failures, slow responses, element removal
|
|
1258
|
-
- [`workflows/persona-comparison-report.md`](examples/workflows/persona-comparison-report.md) - Multi-persona comparison with heatmaps and prioritized recommendations
|
|
1259
|
-
- [`workflows/cognitive-journey-testing.md`](examples/workflows/cognitive-journey-testing.md) - Cognitive user simulation with abandonment detection and friction analysis
|
|
1260
|
-
|
|
1261
|
-
### CI/CD Integration
|
|
1262
|
-
- [`ci-cd/github-actions.yml`](examples/ci-cd/github-actions.yml) - GitHub Actions workflow for NL tests, visual and perf regression
|
|
1263
|
-
- [`ci-cd/gitlab-ci.yml`](examples/ci-cd/gitlab-ci.yml) - GitLab CI pipeline with staged checks
|
|
1264
|
-
- [`ci-cd/README.md`](examples/ci-cd/README.md) - Setup guide and baseline management
|
|
1265
|
-
|
|
1266
|
-
### Natural Language Tests
|
|
1267
|
-
- [`natural-language-tests/e-commerce-suite.txt`](examples/natural-language-tests/e-commerce-suite.txt) - E-commerce guest checkout, search, and mobile tests
|
|
1268
|
-
- [`natural-language-tests/auth-flow-suite.txt`](examples/natural-language-tests/auth-flow-suite.txt) - Login, invalid credentials, and password reset flows
|
|
1269
|
-
- [`natural-language-tests/provider-discovery-journey.txt`](examples/natural-language-tests/provider-discovery-journey.txt) - Cognitive journey for provider discovery and registration
|
|
1270
|
-
- [`natural-language-tests/README.md`](examples/natural-language-tests/README.md) - NL test syntax reference and tips
|
|
1271
|
-
|
|
1272
|
-
### Configuration Templates
|
|
1273
|
-
- [`journeys/checkout-flow.json`](examples/journeys/checkout-flow.json) - Checkout journey definition
|
|
1274
|
-
- [`journeys/signup-flow.json`](examples/journeys/signup-flow.json) - User registration journey
|
|
1275
|
-
- [`journeys/cognitive-discovery-journey.json`](examples/journeys/cognitive-discovery-journey.json) - Cognitive journey with custom traits and abandonment thresholds
|
|
1276
|
-
- [`personas/custom-persona.json`](examples/personas/custom-persona.json) - QA tester persona template
|
|
1277
|
-
- [`personas/accessibility-tester.json`](examples/personas/accessibility-tester.json) - Visual impairment persona with screen magnification
|
|
1278
|
-
- [`personas/cognitive-curious-explorer.json`](examples/personas/cognitive-curious-explorer.json) - Full cognitive persona with traits, attention pattern, and internal voice
|
|
1279
|
-
|
|
1280
|
-
## Troubleshooting
|
|
1281
|
-
|
|
1282
|
-
### Browser Not Starting
|
|
1283
|
-
|
|
1284
|
-
```bash
|
|
1285
|
-
npx playwright install chromium --force
|
|
1286
|
-
```
|
|
1287
|
-
|
|
1288
|
-
### Display Issues (Linux)
|
|
1289
|
-
|
|
1290
|
-
CBrowser runs headless by default. For GUI mode:
|
|
1291
|
-
|
|
1292
|
-
```bash
|
|
1293
|
-
CBROWSER_HEADLESS=false npx cbrowser navigate "https://example.com"
|
|
1294
|
-
```
|
|
1295
|
-
|
|
1296
|
-
### Self-Healing Not Working
|
|
1297
|
-
|
|
1298
|
-
```bash
|
|
1299
|
-
# Check cache status
|
|
1300
|
-
npx cbrowser heal-stats
|
|
1301
|
-
|
|
1302
|
-
# Clear if corrupted
|
|
1303
|
-
npx cbrowser heal-clear
|
|
1304
|
-
```
|
|
1305
|
-
|
|
1306
|
-
## Contributing
|
|
1307
|
-
|
|
1308
|
-
```bash
|
|
1309
|
-
git clone https://github.com/alexandriashai/cbrowser.git
|
|
1310
|
-
cd cbrowser
|
|
1311
|
-
bun install
|
|
1312
|
-
bun run dev
|
|
1313
|
-
```
|
|
339
|
+
| Example | Description |
|
|
340
|
+
|---------|-------------|
|
|
341
|
+
| [`examples/basic-usage.ts`](examples/basic-usage.ts) | Navigation, extraction, sessions |
|
|
342
|
+
| [`examples/cognitive-journey.ts`](examples/cognitive-journey.ts) | Cognitive simulation with personas |
|
|
343
|
+
| [`examples/visual-testing.ts`](examples/visual-testing.ts) | Visual regression, cross-browser, A/B |
|
|
344
|
+
| [`examples/workflows/`](examples/workflows/) | E2E recipes for common scenarios |
|
|
345
|
+
| [`examples/ci-cd/`](examples/ci-cd/) | GitHub Actions, GitLab CI setup |
|
|
1314
346
|
|
|
1315
|
-
|
|
347
|
+
---
|
|
1316
348
|
|
|
1317
349
|
## License
|
|
1318
350
|
|
|
1319
351
|
**Business Source License 1.1 (BSL-1.1)**
|
|
1320
352
|
|
|
1321
|
-
|
|
1322
|
-
- ✅
|
|
1323
|
-
-
|
|
1324
|
-
- ✅ Contribute to the project
|
|
1325
|
-
|
|
1326
|
-
**Production use** (commercial services, revenue-generating applications, internal business operations) requires a commercial license.
|
|
353
|
+
- ✅ Free for non-production use (development, testing, evaluation, personal projects)
|
|
354
|
+
- ✅ Read, modify, and contribute to the source
|
|
355
|
+
- ⚠️ Production use requires a commercial license
|
|
1327
356
|
|
|
1328
|
-
|
|
357
|
+
Converts to **Apache 2.0** on February 5, 2030.
|
|
1329
358
|
|
|
1330
359
|
For commercial licensing: [alexandria.shai.eden@gmail.com](mailto:alexandria.shai.eden@gmail.com)
|
|
1331
360
|
|
|
1332
|
-
|
|
361
|
+
---
|
|
1333
362
|
|
|
1334
363
|
## Links
|
|
1335
364
|
|
|
1336
365
|
- [NPM Package](https://www.npmjs.com/package/cbrowser)
|
|
1337
366
|
- [GitHub Repository](https://github.com/alexandriashai/cbrowser)
|
|
1338
367
|
- [Issue Tracker](https://github.com/alexandriashai/cbrowser/issues)
|
|
368
|
+
- [Remote MCP Server Guide](docs/REMOTE-MCP-SERVER.md)
|
|
1339
369
|
- [Roadmap](ROADMAP.md)
|