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 CHANGED
@@ -1,8 +1,6 @@
1
- # CBrowser (Cognitive Browser)
1
+ # CBrowser Cognitive Browser Automation
2
2
 
3
- **The browser automation that thinks like your users.** Simulate real user cognition with patience thresholds, frustration tracking, and abandonment detection know when users give up before they do.
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
  [![npm version](https://img.shields.io/npm/v/cbrowser.svg)](https://www.npmjs.com/package/cbrowser)
8
6
  [![Tests](https://github.com/alexandriashai/cbrowser/actions/workflows/test.yml/badge.svg)](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 Story Behind CBrowser
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
- So I built CBrowser.
16
+ Traditional browser automation answers one question: *"Does this button click?"*
31
17
 
32
- ### Why These Technical Choices
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
- | Decision | Why |
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
- ## Why CBrowser?
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
- | Problem | Traditional Tools | CBrowser |
57
- |---------|-------------------|----------|
58
- | **User behavior** | Simulates clicks and typing | **Simulates how users THINK** — patience, frustration, confusion |
59
- | **UX friction** | Fails when buttons don't work | **Detects when users would give up** before they do |
60
- | **AI safety** | No guardrails for autonomous agents | **Constitutional safety** — risk zones prevent destructive actions |
61
- | **Resilience** | Tests happy paths | **Chaos engineering** inject failures to test error handling |
62
- | **Bug discovery** | Tests what you specify | **Autonomous bug hunting** finds issues you didn't know to look for |
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
- ### Option 1: Claude Code Skill Installation
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
- ### Basic Usage
45
+ ### First Commands
132
46
 
133
47
  ```bash
134
- # Navigate to a URL
135
- npx cbrowser navigate "https://example.com"
48
+ # Navigate with intelligent wait detection
49
+ npx cbrowser navigate "https://your-site.com"
136
50
 
137
- # Click with auto-retry and self-healing
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 'Welcome'"
55
+ npx cbrowser assert "page contains 'Order Confirmed'"
142
56
 
143
- # Generate tests from any page
144
- npx cbrowser generate-tests "https://example.com"
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
- ## Core Capabilities
150
-
151
- ### Natural Language Interface
66
+ ## Constitutional AI Safety
152
67
 
153
- CBrowser accepts natural language descriptions for element selection, assertions, and test definitions. This is useful when AI agents need to interact with pages they haven't seen before, since they can describe what they want rather than knowing exact selectors.
68
+ AI agents need boundaries. CBrowser classifies every action by risk level:
154
69
 
155
- ```bash
156
- npx cbrowser smart-click "the blue submit button in the checkout form"
157
- npx cbrowser fill "email field" "user@example.com"
158
- npx cbrowser assert "page shows order confirmation with total over $50"
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
- # Load session in a later invocation
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
- # List saved sessions with metadata
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
- # Clear the cache
238
- npx cbrowser heal-clear
239
- ```
81
+ ## Cognitive User Simulation
240
82
 
241
- ### Constitutional Safety
83
+ CBrowser models 12 research-backed cognitive traits to simulate how real users think and behave:
242
84
 
243
- When AI agents operate browsers autonomously, they need guardrails to prevent destructive actions. CBrowser classifies every action by risk level:
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
- | Zone | Actions | Behavior |
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
- This means an AI agent can freely browse and gather information, but cannot accidentally submit a form or delete data without explicit verification. For testing scenarios where you need to override this:
98
+ The simulation stops when a realistic user would give up:
253
99
 
254
100
  ```bash
255
- cbrowser click "Delete Account" --force
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 instead of code. Useful for QA teams or AI agents that need to define and run tests without writing Playwright scripts.
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: Login Flow
284
- go to https://example.com
285
- click the login button
286
- type "user@example.com" in email field
287
- type "password123" in password field
288
- click submit
289
- verify url contains "/dashboard"
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
- # Continue after failures
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
- **API usage:**
130
+ ### Self-Healing Test Repair
326
131
 
327
- ```typescript
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
- # Title assertions
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
- ```typescript
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
- Compare screenshots semantically rather than pixel-by-pixel. Traditional pixel diffing flags every minor rendering difference (anti-aliasing, font hinting). AI-based comparison understands what actually changed: a button moved, text was updated, a new section was added.
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 comparisonunderstands what changed, not just pixel differences:
742
147
 
743
148
  ```bash
744
- # v10.2.0+ output now includes cognitive science metrics:
745
- # Decisions made: 12
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
- **Output includes:**
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
- # Describe the user - AI generates appropriate parameters
791
- npx cbrowser persona create "impatient developer who hates slow UIs" --name speed-demon
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
- The AI generates appropriate timing, error rates, mouse behavior, attention patterns, and viewport based on your description.
159
+ # Test across mobile, tablet, desktop
160
+ npx cbrowser responsive "https://your-site.com" --html
805
161
 
806
- **Generate reports:**
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 (v9.0.0)
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. Find out why your site is hard for AI agents to automate.
172
+ Analyze any website for AI-agent friendliness:
825
173
 
826
174
  ```bash
827
- npx cbrowser agent-ready-audit "https://example.com" --html
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
- 1. [HIGH] Add aria-label to search button
852
- <button aria-label="Search">
853
-
854
- 2. [HIGH] Replace div onclick with button
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 AND competitors. Get head-to-head UX comparison.
185
+ Run identical cognitive journeys across your site and competitors:
861
186
 
862
187
  ```bash
863
188
  npx cbrowser competitive-benchmark \
864
- --sites "https://yoursite.com,https://competitor.com,https://another-competitor.com" \
189
+ --sites "https://your-site.com,https://competitor-a.com,https://competitor-b.com" \
865
190
  --goal "sign up for free trial" \
866
- --persona "first-timer" \
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 *experience* your site — not just WCAG compliance checking.
197
+ Simulate how users with disabilities experience your site:
888
198
 
889
199
  ```bash
890
- npx cbrowser empathy-audit "https://example.com" \
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
- **6 Disability-Focused Personas:**
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 both Claude Desktop (local) and claude.ai (remote).
212
+ CBrowser runs as an MCP server for Claude Desktop and claude.ai.
992
213
 
993
214
  ### Remote MCP (claude.ai)
994
215
 
995
- Connect claude.ai directly to a remote CBrowser server:
996
-
997
- 1. Deploy CBrowser on your server ([full guide](docs/REMOTE-MCP-SERVER.md))
998
- 2. In claude.ai: Settings > Connectors > Add Custom Connector
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
- **Public Demo (rate-limited):** `https://cbrowser-mcp-demo.wyldfyre.ai/mcp`
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
- ### Available MCP Tools (43 total)
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`, `press_key` |
1033
- | **Assertions** | `assert`, `analyze_page` |
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
- | **Personas** | `journey`, `compare_personas`, `create_persona`, `list_personas` |
1037
- | **Cognitive** | `cognitive_journey_init`, `cognitive_journey_update_state`, `list_cognitive_personas` |
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
- ### API-Free Cognitive Features (v9.7.0+)
247
+ ---
248
+
249
+ ## CI/CD Integration
1044
250
 
1045
- When using CBrowser via MCP (Claude.ai or Claude Code), many cognitive features work **without an Anthropic API key** on the server:
251
+ ### GitHub Actions
1046
252
 
1047
- | Feature | via MCP | Standalone CLI |
1048
- |---------|---------|----------------|
1049
- | `cognitive_journey_init` / `update_state` | ❌ No API key needed | ❌ No API key needed |
1050
- | `compare_personas_init` / `record` / `summarize` | ❌ No API key needed | N/A |
1051
- | `compare_personas` (fire-and-forget) | ✅ API key required | ✅ API key required |
1052
- | `cognitive-journey` CLI command | N/A | ✅ API key required |
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
- **How it works:** Session bridge tools return data/calculations, Claude provides the reasoning. The MCP server does math and browser automation; Claude IS the brain.
268
+ ### Docker
1055
269
 
1056
- See [Remote MCP Server Guide](docs/REMOTE-MCP-SERVER.md) for full deployment instructions.
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
- ## API Usage
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, // Persist cookies between sessions
298
+ persistent: true, // Maintain cookies between sessions
1068
299
  });
1069
300
 
1070
- // Navigate
1071
301
  await browser.navigate('https://example.com');
1072
302
 
1073
- // Smart click with retry
1074
- const clickResult = await browser.smartClick('Sign In');
1075
-
1076
- // Fill form
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 (set to `false` for GUI) |
325
+ | `CBROWSER_HEADLESS` | `true` | Run headless |
1103
326
  | `CBROWSER_BROWSER` | `chromium` | Browser engine |
1104
327
  | `CBROWSER_TIMEOUT` | `30000` | Default timeout (ms) |
1105
328
 
1106
- ### Config File
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
- See the [`examples/`](examples/) directory:
1245
-
1246
- ### TypeScript Examples
1247
- - [`basic-usage.ts`](examples/basic-usage.ts) - Navigation, extraction, sessions
1248
- - [`smart-automation.ts`](examples/smart-automation.ts) - Smart click, assertions, test generation
1249
- - [`visual-testing.ts`](examples/visual-testing.ts) - AI visual regression, cross-browser, responsive, A/B comparison
1250
- - [`remote-mcp.ts`](examples/remote-mcp.ts) - Remote MCP server setup and demo server connection
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
- See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
347
+ ---
1316
348
 
1317
349
  ## License
1318
350
 
1319
351
  **Business Source License 1.1 (BSL-1.1)**
1320
352
 
1321
- CBrowser is source-available software. You can:
1322
- - ✅ Use freely for **non-production** purposes (development, testing, evaluation, personal projects)
1323
- - Read, modify, and learn from the source code
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
- On **February 5, 2030**, the license automatically converts to **Apache 2.0** (fully open source).
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
- See [LICENSE](LICENSE) for full terms.
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)