cbrowser 8.3.0 → 8.3.1
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 +117 -1
- package/examples/cognitive-journey.ts +146 -0
- package/examples/journeys/cognitive-discovery-journey.json +40 -0
- package/examples/natural-language-tests/provider-discovery-journey.txt +74 -0
- package/examples/personas/cognitive-curious-explorer.json +48 -0
- package/examples/workflows/cognitive-journey-testing.md +199 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -579,6 +579,96 @@ mobile-user | pass | 28.1s | 1 | Scroll issue
|
|
|
579
579
|
|
|
580
580
|
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.
|
|
581
581
|
|
|
582
|
+
### Cognitive User Simulation (v8.2.5)
|
|
583
|
+
|
|
584
|
+
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.
|
|
585
|
+
|
|
586
|
+
**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?"
|
|
587
|
+
|
|
588
|
+
```bash
|
|
589
|
+
# Run a cognitive journey (requires Anthropic API key)
|
|
590
|
+
npx cbrowser config set-api-key
|
|
591
|
+
npx cbrowser cognitive-journey \
|
|
592
|
+
--persona first-timer \
|
|
593
|
+
--start "https://example.com" \
|
|
594
|
+
--goal "sign up for an account"
|
|
595
|
+
|
|
596
|
+
# With options
|
|
597
|
+
npx cbrowser cognitive-journey \
|
|
598
|
+
--persona elderly-user \
|
|
599
|
+
--start "https://example.com" \
|
|
600
|
+
--goal "find the help page" \
|
|
601
|
+
--max-steps 50 \
|
|
602
|
+
--verbose
|
|
603
|
+
```
|
|
604
|
+
|
|
605
|
+
**Cognitive Traits (7 dimensions):**
|
|
606
|
+
|
|
607
|
+
| Trait | What it measures | Example impact |
|
|
608
|
+
|-------|------------------|----------------|
|
|
609
|
+
| `patience` | How quickly they give up | Low patience → abandons after 3 failed attempts |
|
|
610
|
+
| `riskTolerance` | Willingness to click unfamiliar elements | Low risk → avoids buttons without clear labels |
|
|
611
|
+
| `comprehension` | Ability to understand UI conventions | Low comprehension → misreads icons |
|
|
612
|
+
| `persistence` | Tendency to retry vs. try something else | High persistence → keeps trying same approach |
|
|
613
|
+
| `curiosity` | Tendency to explore vs. stay focused | High curiosity → clicks interesting sidebars |
|
|
614
|
+
| `workingMemory` | Remembers what they've tried | Low memory → repeats failed actions |
|
|
615
|
+
| `readingTendency` | Reads content vs. scans for CTAs | High reading → notices inline instructions |
|
|
616
|
+
|
|
617
|
+
**Attention Patterns:**
|
|
618
|
+
|
|
619
|
+
- `targeted` — Direct path to goal (power users)
|
|
620
|
+
- `f-pattern` — Scans top, then left side (web convention)
|
|
621
|
+
- `z-pattern` — Diagonal scanning (marketing pages)
|
|
622
|
+
- `exploratory` — Random exploration (curious users)
|
|
623
|
+
- `sequential` — Top-to-bottom reading (thorough users)
|
|
624
|
+
- `thorough` — Reads everything carefully (careful users)
|
|
625
|
+
- `skim` — Rapid scanning for keywords (impatient users)
|
|
626
|
+
|
|
627
|
+
**Abandonment Detection:**
|
|
628
|
+
|
|
629
|
+
The simulation automatically stops when a realistic user would give up:
|
|
630
|
+
|
|
631
|
+
| Trigger | Threshold | Monologue |
|
|
632
|
+
|---------|-----------|-----------|
|
|
633
|
+
| Patience depleted | `< 0.1` | "This is taking too long..." |
|
|
634
|
+
| Too confused | `> 0.8` for 30s | "I have no idea what to do..." |
|
|
635
|
+
| Too frustrated | `> 0.85` | "This is so frustrating..." |
|
|
636
|
+
| No progress | 10+ steps, `< 0.1` progress | "I'm not getting anywhere..." |
|
|
637
|
+
| Stuck in loop | Same pages 3x | "I keep ending up here..." |
|
|
638
|
+
|
|
639
|
+
**Output includes:**
|
|
640
|
+
- Goal achievement status
|
|
641
|
+
- Abandonment reason (if applicable)
|
|
642
|
+
- Step-by-step decision trace with reasoning
|
|
643
|
+
- Friction points with screenshots
|
|
644
|
+
- Cognitive state over time (patience, confusion, frustration)
|
|
645
|
+
- Full internal monologue
|
|
646
|
+
|
|
647
|
+
**MCP Integration (Claude Desktop/Code):**
|
|
648
|
+
|
|
649
|
+
For Claude Desktop or Claude Code users, use the MCP tools instead:
|
|
650
|
+
|
|
651
|
+
```typescript
|
|
652
|
+
// Initialize cognitive journey
|
|
653
|
+
const profile = await mcp.cognitive_journey_init({
|
|
654
|
+
persona: "first-timer",
|
|
655
|
+
goal: "sign up as a provider",
|
|
656
|
+
startUrl: "https://example.com"
|
|
657
|
+
});
|
|
658
|
+
|
|
659
|
+
// After each action, update state
|
|
660
|
+
const state = await mcp.cognitive_journey_update_state({
|
|
661
|
+
sessionId: profile.sessionId,
|
|
662
|
+
patienceChange: -0.05,
|
|
663
|
+
confusionChange: 0.1,
|
|
664
|
+
currentUrl: "https://example.com/register"
|
|
665
|
+
});
|
|
666
|
+
|
|
667
|
+
if (state.shouldAbandon) {
|
|
668
|
+
console.log(`User gave up: ${state.abandonmentReason}`);
|
|
669
|
+
}
|
|
670
|
+
```
|
|
671
|
+
|
|
582
672
|
**Custom persona creation:**
|
|
583
673
|
|
|
584
674
|
```bash
|
|
@@ -704,7 +794,7 @@ Add to Claude Desktop config (`~/.config/claude-desktop/config.json`):
|
|
|
704
794
|
}
|
|
705
795
|
```
|
|
706
796
|
|
|
707
|
-
### Available MCP Tools (
|
|
797
|
+
### Available MCP Tools (36 total)
|
|
708
798
|
|
|
709
799
|
| Category | Tools |
|
|
710
800
|
|----------|-------|
|
|
@@ -714,6 +804,7 @@ Add to Claude Desktop config (`~/.config/claude-desktop/config.json`):
|
|
|
714
804
|
| **Testing** | `generate_tests`, `test_suite`, `repair_tests`, `flaky_check` |
|
|
715
805
|
| **Visual** | `visual_baseline`, `visual_compare`, `responsive_test`, `cross_browser_test`, `ab_compare` |
|
|
716
806
|
| **Personas** | `journey`, `compare_personas`, `create_persona`, `list_personas` |
|
|
807
|
+
| **Cognitive** | `cognitive_journey_init`, `cognitive_journey_update_state`, `list_cognitive_personas` |
|
|
717
808
|
| **Sessions** | `save_session`, `load_session`, `list_sessions`, `delete_session` |
|
|
718
809
|
| **Analysis** | `hunt_bugs`, `chaos_test`, `performance_audit`, `dismiss_overlay` |
|
|
719
810
|
| **Utilities** | `heal_stats`, `list_baselines`, `status` |
|
|
@@ -784,6 +875,26 @@ Create `.cbrowserrc.json`:
|
|
|
784
875
|
}
|
|
785
876
|
```
|
|
786
877
|
|
|
878
|
+
### API Key Configuration (for Cognitive Journeys)
|
|
879
|
+
|
|
880
|
+
Cognitive journeys require an Anthropic API key for standalone CLI usage:
|
|
881
|
+
|
|
882
|
+
```bash
|
|
883
|
+
# Set your API key (stored in ~/.cbrowserrc.json)
|
|
884
|
+
npx cbrowser config set-api-key
|
|
885
|
+
|
|
886
|
+
# View configured key (masked)
|
|
887
|
+
npx cbrowser config show-api-key
|
|
888
|
+
|
|
889
|
+
# Remove API key
|
|
890
|
+
npx cbrowser config remove-api-key
|
|
891
|
+
|
|
892
|
+
# Set custom model (default: claude-sonnet-4-20250514)
|
|
893
|
+
npx cbrowser config set-model claude-opus-4-20250514
|
|
894
|
+
```
|
|
895
|
+
|
|
896
|
+
**Note:** MCP users (Claude Desktop/Code) don't need API key configuration—cognitive journeys use the existing Claude session.
|
|
897
|
+
|
|
787
898
|
---
|
|
788
899
|
|
|
789
900
|
## Multi-Browser Support
|
|
@@ -893,6 +1004,7 @@ See the [`examples/`](examples/) directory:
|
|
|
893
1004
|
- [`smart-automation.ts`](examples/smart-automation.ts) - Smart click, assertions, test generation
|
|
894
1005
|
- [`visual-testing.ts`](examples/visual-testing.ts) - AI visual regression, cross-browser, responsive, A/B comparison
|
|
895
1006
|
- [`remote-mcp.ts`](examples/remote-mcp.ts) - Remote MCP server, Auth0 OAuth, demo server setup
|
|
1007
|
+
- [`cognitive-journey.ts`](examples/cognitive-journey.ts) - Cognitive user simulation with personas, abandonment, and friction detection
|
|
896
1008
|
|
|
897
1009
|
### Workflow Recipes
|
|
898
1010
|
- [`workflows/e2e-login-checkout.md`](examples/workflows/e2e-login-checkout.md) - End-to-end login and checkout flow with session persistence
|
|
@@ -900,6 +1012,7 @@ See the [`examples/`](examples/) directory:
|
|
|
900
1012
|
- [`workflows/accessibility-audit.md`](examples/workflows/accessibility-audit.md) - Accessibility bug hunting with persona-based a11y testing
|
|
901
1013
|
- [`workflows/chaos-resilience-testing.md`](examples/workflows/chaos-resilience-testing.md) - Chaos engineering: network failures, slow responses, element removal
|
|
902
1014
|
- [`workflows/persona-comparison-report.md`](examples/workflows/persona-comparison-report.md) - Multi-persona comparison with heatmaps and prioritized recommendations
|
|
1015
|
+
- [`workflows/cognitive-journey-testing.md`](examples/workflows/cognitive-journey-testing.md) - Cognitive user simulation with abandonment detection and friction analysis
|
|
903
1016
|
|
|
904
1017
|
### CI/CD Integration
|
|
905
1018
|
- [`ci-cd/github-actions.yml`](examples/ci-cd/github-actions.yml) - GitHub Actions workflow for NL tests, visual and perf regression
|
|
@@ -909,13 +1022,16 @@ See the [`examples/`](examples/) directory:
|
|
|
909
1022
|
### Natural Language Tests
|
|
910
1023
|
- [`natural-language-tests/e-commerce-suite.txt`](examples/natural-language-tests/e-commerce-suite.txt) - E-commerce guest checkout, search, and mobile tests
|
|
911
1024
|
- [`natural-language-tests/auth-flow-suite.txt`](examples/natural-language-tests/auth-flow-suite.txt) - Login, invalid credentials, and password reset flows
|
|
1025
|
+
- [`natural-language-tests/provider-discovery-journey.txt`](examples/natural-language-tests/provider-discovery-journey.txt) - Cognitive journey for provider discovery and registration
|
|
912
1026
|
- [`natural-language-tests/README.md`](examples/natural-language-tests/README.md) - NL test syntax reference and tips
|
|
913
1027
|
|
|
914
1028
|
### Configuration Templates
|
|
915
1029
|
- [`journeys/checkout-flow.json`](examples/journeys/checkout-flow.json) - Checkout journey definition
|
|
916
1030
|
- [`journeys/signup-flow.json`](examples/journeys/signup-flow.json) - User registration journey
|
|
1031
|
+
- [`journeys/cognitive-discovery-journey.json`](examples/journeys/cognitive-discovery-journey.json) - Cognitive journey with custom traits and abandonment thresholds
|
|
917
1032
|
- [`personas/custom-persona.json`](examples/personas/custom-persona.json) - QA tester persona template
|
|
918
1033
|
- [`personas/accessibility-tester.json`](examples/personas/accessibility-tester.json) - Visual impairment persona with screen magnification
|
|
1034
|
+
- [`personas/cognitive-curious-explorer.json`](examples/personas/cognitive-curious-explorer.json) - Full cognitive persona with traits, attention pattern, and internal voice
|
|
919
1035
|
|
|
920
1036
|
## Troubleshooting
|
|
921
1037
|
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Cognitive User Simulation Example
|
|
3
|
+
*
|
|
4
|
+
* This example demonstrates how to run autonomous, goal-driven user simulations
|
|
5
|
+
* where the AI acts as a realistic persona with cognitive traits and abandonment detection.
|
|
6
|
+
*
|
|
7
|
+
* Cognitive journeys go beyond timing and click patterns—they model how users actually
|
|
8
|
+
* think, including frustration, confusion, patience depletion, and genuine abandonment.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
import { runCognitiveJourney, setAnthropicApiKey, isApiKeyConfigured } from 'cbrowser';
|
|
12
|
+
|
|
13
|
+
// Ensure API key is configured
|
|
14
|
+
if (!isApiKeyConfigured()) {
|
|
15
|
+
console.log('API key not configured. Run: npx cbrowser config set-api-key');
|
|
16
|
+
process.exit(1);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// Example 1: Basic cognitive journey
|
|
20
|
+
async function basicJourney() {
|
|
21
|
+
console.log('\n=== Basic Cognitive Journey ===\n');
|
|
22
|
+
|
|
23
|
+
const result = await runCognitiveJourney({
|
|
24
|
+
persona: 'first-timer',
|
|
25
|
+
startUrl: 'https://example.com',
|
|
26
|
+
goal: 'sign up for an account',
|
|
27
|
+
verbose: true,
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
console.log('Goal achieved:', result.goalAchieved);
|
|
31
|
+
console.log('Steps taken:', result.steps.length);
|
|
32
|
+
|
|
33
|
+
if (!result.goalAchieved && result.abandonmentReason) {
|
|
34
|
+
console.log('User gave up:', result.abandonmentReason);
|
|
35
|
+
console.log('Final thought:', result.finalThought);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// Show friction points
|
|
39
|
+
if (result.frictionPoints.length > 0) {
|
|
40
|
+
console.log('\nFriction points detected:');
|
|
41
|
+
for (const fp of result.frictionPoints) {
|
|
42
|
+
console.log(` - ${fp.type}: ${fp.monologue}`);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// Example 2: Journey with custom traits
|
|
48
|
+
async function customTraitsJourney() {
|
|
49
|
+
console.log('\n=== Journey with Custom Traits ===\n');
|
|
50
|
+
|
|
51
|
+
const result = await runCognitiveJourney({
|
|
52
|
+
persona: 'elderly-user',
|
|
53
|
+
startUrl: 'https://example.com',
|
|
54
|
+
goal: 'find the help page',
|
|
55
|
+
customTraits: {
|
|
56
|
+
patience: 0.3, // Very patient
|
|
57
|
+
riskTolerance: 0.2, // Cautious about clicking unfamiliar things
|
|
58
|
+
comprehension: 0.4, // Struggles with UI conventions
|
|
59
|
+
readingTendency: 0.9, // Reads everything carefully
|
|
60
|
+
},
|
|
61
|
+
maxSteps: 30,
|
|
62
|
+
verbose: true,
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
console.log('Journey completed');
|
|
66
|
+
console.log('Average confusion level:',
|
|
67
|
+
result.steps.reduce((sum, s) => sum + s.stateAfter.confusionLevel, 0) / result.steps.length
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Example 3: Journey with step callbacks
|
|
72
|
+
async function journeyWithCallbacks() {
|
|
73
|
+
console.log('\n=== Journey with Step Callbacks ===\n');
|
|
74
|
+
|
|
75
|
+
const result = await runCognitiveJourney({
|
|
76
|
+
persona: 'impatient-user',
|
|
77
|
+
startUrl: 'https://example.com',
|
|
78
|
+
goal: 'complete checkout',
|
|
79
|
+
onStep: (step) => {
|
|
80
|
+
console.log(`Step ${step.stepNumber}: ${step.action}`);
|
|
81
|
+
console.log(` Reasoning: ${step.reasoning}`);
|
|
82
|
+
console.log(` Patience: ${(step.stateAfter.patienceRemaining * 100).toFixed(0)}%`);
|
|
83
|
+
console.log(` Confusion: ${(step.stateAfter.confusionLevel * 100).toFixed(0)}%`);
|
|
84
|
+
|
|
85
|
+
if (step.stateAfter.patienceRemaining < 0.3) {
|
|
86
|
+
console.log(' ⚠️ User patience running low!');
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
console.log('\nJourney finished');
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// Example 4: Compare cognitive traits across personas
|
|
95
|
+
async function comparePersonas() {
|
|
96
|
+
console.log('\n=== Comparing Personas ===\n');
|
|
97
|
+
|
|
98
|
+
const personas = ['power-user', 'first-timer', 'elderly-user', 'impatient-user'];
|
|
99
|
+
const results = [];
|
|
100
|
+
|
|
101
|
+
for (const persona of personas) {
|
|
102
|
+
console.log(`Running journey as ${persona}...`);
|
|
103
|
+
|
|
104
|
+
const result = await runCognitiveJourney({
|
|
105
|
+
persona,
|
|
106
|
+
startUrl: 'https://example.com',
|
|
107
|
+
goal: 'find pricing information',
|
|
108
|
+
maxSteps: 20,
|
|
109
|
+
});
|
|
110
|
+
|
|
111
|
+
results.push({
|
|
112
|
+
persona,
|
|
113
|
+
goalAchieved: result.goalAchieved,
|
|
114
|
+
steps: result.steps.length,
|
|
115
|
+
abandonmentReason: result.abandonmentReason,
|
|
116
|
+
frictionPoints: result.frictionPoints.length,
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
console.log('\n=== Comparison Results ===\n');
|
|
121
|
+
console.log('Persona | Success | Steps | Friction | Abandonment Reason');
|
|
122
|
+
console.log('----------------+---------+-------+----------+-------------------');
|
|
123
|
+
|
|
124
|
+
for (const r of results) {
|
|
125
|
+
console.log(
|
|
126
|
+
`${r.persona.padEnd(15)} | ${r.goalAchieved ? 'pass ' : 'fail '} | ${
|
|
127
|
+
String(r.steps).padStart(5)
|
|
128
|
+
} | ${String(r.frictionPoints).padStart(8)} | ${r.abandonmentReason || '-'}`
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// Run examples
|
|
134
|
+
async function main() {
|
|
135
|
+
try {
|
|
136
|
+
await basicJourney();
|
|
137
|
+
// await customTraitsJourney();
|
|
138
|
+
// await journeyWithCallbacks();
|
|
139
|
+
// await comparePersonas();
|
|
140
|
+
} catch (error) {
|
|
141
|
+
console.error('Error:', error);
|
|
142
|
+
process.exit(1);
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
main();
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "Provider Discovery Journey",
|
|
3
|
+
"description": "Simulates a provider who found the site organically and explores with curiosity before potentially registering",
|
|
4
|
+
"persona": "first-timer",
|
|
5
|
+
"startUrl": "https://example.com",
|
|
6
|
+
"goal": "explore the site and decide whether to register as a provider",
|
|
7
|
+
"customTraits": {
|
|
8
|
+
"patience": 0.7,
|
|
9
|
+
"riskTolerance": 0.5,
|
|
10
|
+
"comprehension": 0.6,
|
|
11
|
+
"persistence": 0.6,
|
|
12
|
+
"curiosity": 0.8,
|
|
13
|
+
"workingMemory": 0.7,
|
|
14
|
+
"readingTendency": 0.6
|
|
15
|
+
},
|
|
16
|
+
"options": {
|
|
17
|
+
"maxSteps": 50,
|
|
18
|
+
"maxTime": 300000,
|
|
19
|
+
"verbose": true
|
|
20
|
+
},
|
|
21
|
+
"expectedBehaviors": [
|
|
22
|
+
"Explores homepage to understand what the site offers",
|
|
23
|
+
"Looks for provider-specific information",
|
|
24
|
+
"Reads about benefits and pricing",
|
|
25
|
+
"Investigates trust signals (reviews, testimonials)",
|
|
26
|
+
"May abandon if value proposition is unclear",
|
|
27
|
+
"May proceed to registration if convinced"
|
|
28
|
+
],
|
|
29
|
+
"successCriteria": [
|
|
30
|
+
"Reaches provider registration page",
|
|
31
|
+
"OR makes informed decision to not register (legitimate abandonment)"
|
|
32
|
+
],
|
|
33
|
+
"frictionPointsToWatch": [
|
|
34
|
+
"Unclear provider vs customer distinction",
|
|
35
|
+
"Hidden pricing information",
|
|
36
|
+
"Confusing navigation",
|
|
37
|
+
"Aggressive signup prompts",
|
|
38
|
+
"Missing social proof"
|
|
39
|
+
]
|
|
40
|
+
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# Test: Provider Discovery Journey
|
|
2
|
+
# Simulates a provider who found the site organically and explores before registering
|
|
3
|
+
# Uses cognitive journey concepts - tests what a real curious first-timer would do
|
|
4
|
+
|
|
5
|
+
# Initial landing
|
|
6
|
+
go to https://example.com
|
|
7
|
+
wait 2 seconds
|
|
8
|
+
verify page contains "Welcome" or "Home"
|
|
9
|
+
take screenshot
|
|
10
|
+
|
|
11
|
+
# Explore to understand what the site offers
|
|
12
|
+
click the main navigation or menu
|
|
13
|
+
wait 1 second
|
|
14
|
+
verify page contains navigation links
|
|
15
|
+
take screenshot
|
|
16
|
+
|
|
17
|
+
# Look for provider-specific information
|
|
18
|
+
click "Providers" or "For Providers" or "Become a Provider"
|
|
19
|
+
wait 2 seconds
|
|
20
|
+
verify url contains "provider" or page contains "provider"
|
|
21
|
+
take screenshot
|
|
22
|
+
|
|
23
|
+
# Read about benefits (curiosity behavior)
|
|
24
|
+
scroll down 3 times
|
|
25
|
+
verify page contains "benefits" or "features" or "why join"
|
|
26
|
+
take screenshot
|
|
27
|
+
|
|
28
|
+
# Look for pricing information
|
|
29
|
+
click "Pricing" or "Plans" or scroll to pricing section
|
|
30
|
+
wait 1 second
|
|
31
|
+
verify page contains "$" or "pricing" or "cost" or "free"
|
|
32
|
+
take screenshot
|
|
33
|
+
|
|
34
|
+
# Check trust signals (reviews, testimonials)
|
|
35
|
+
scroll down
|
|
36
|
+
verify page contains "review" or "testimonial" or "trusted by"
|
|
37
|
+
take screenshot
|
|
38
|
+
|
|
39
|
+
# Make decision - proceed to registration
|
|
40
|
+
click "Sign Up" or "Register" or "Get Started" or "Join"
|
|
41
|
+
wait 2 seconds
|
|
42
|
+
verify url contains "register" or "signup" or page contains "Create"
|
|
43
|
+
take screenshot
|
|
44
|
+
|
|
45
|
+
# Test: Provider Discovery - Confused Path
|
|
46
|
+
# Tests abandonment behavior when value proposition is unclear
|
|
47
|
+
|
|
48
|
+
go to https://example.com
|
|
49
|
+
wait 1 second
|
|
50
|
+
|
|
51
|
+
# Try to find provider info through unclear navigation
|
|
52
|
+
click "Services" or "About" or first navigation link
|
|
53
|
+
wait 2 seconds
|
|
54
|
+
take screenshot
|
|
55
|
+
|
|
56
|
+
# User gets confused - not finding provider-specific content
|
|
57
|
+
scroll down
|
|
58
|
+
verify page contains some content
|
|
59
|
+
take screenshot
|
|
60
|
+
|
|
61
|
+
# Back to try again (persistence behavior)
|
|
62
|
+
click browser back or "Home" or logo
|
|
63
|
+
wait 1 second
|
|
64
|
+
take screenshot
|
|
65
|
+
|
|
66
|
+
# Try a different path
|
|
67
|
+
click "Contact" or "Help" or "FAQ"
|
|
68
|
+
wait 1 second
|
|
69
|
+
verify page loaded
|
|
70
|
+
take screenshot
|
|
71
|
+
|
|
72
|
+
# Note: In a real cognitive journey, the AI would evaluate
|
|
73
|
+
# whether the user would abandon at this point based on
|
|
74
|
+
# patience depletion and confusion level
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "curious-explorer",
|
|
3
|
+
"displayName": "Curious Explorer",
|
|
4
|
+
"description": "A user who found the site through search and wants to understand everything before committing. High curiosity, moderate patience, reads content thoroughly.",
|
|
5
|
+
"behaviorProfile": {
|
|
6
|
+
"avgReactionTime": 1200,
|
|
7
|
+
"reactionTimeVariance": 400,
|
|
8
|
+
"typoRate": 0.02,
|
|
9
|
+
"doubleClickRate": 0.01,
|
|
10
|
+
"missClickRate": 0.03,
|
|
11
|
+
"scrollSpeed": "slow",
|
|
12
|
+
"readingSpeed": "slow",
|
|
13
|
+
"focusDuration": 8000,
|
|
14
|
+
"mouseJitter": 3,
|
|
15
|
+
"pauseBeforeAction": 1500
|
|
16
|
+
},
|
|
17
|
+
"cognitiveTraits": {
|
|
18
|
+
"patience": 0.7,
|
|
19
|
+
"riskTolerance": 0.4,
|
|
20
|
+
"comprehension": 0.7,
|
|
21
|
+
"persistence": 0.5,
|
|
22
|
+
"curiosity": 0.9,
|
|
23
|
+
"workingMemory": 0.6,
|
|
24
|
+
"readingTendency": 0.8
|
|
25
|
+
},
|
|
26
|
+
"attentionPattern": "exploratory",
|
|
27
|
+
"decisionStyle": "deliberate",
|
|
28
|
+
"viewport": {
|
|
29
|
+
"width": 1440,
|
|
30
|
+
"height": 900
|
|
31
|
+
},
|
|
32
|
+
"abandonmentThresholds": {
|
|
33
|
+
"minPatience": 0.15,
|
|
34
|
+
"maxConfusion": 0.75,
|
|
35
|
+
"maxFrustration": 0.80,
|
|
36
|
+
"maxStepsWithoutProgress": 12,
|
|
37
|
+
"loopDetectionThreshold": 3
|
|
38
|
+
},
|
|
39
|
+
"internalVoice": {
|
|
40
|
+
"style": "thoughtful",
|
|
41
|
+
"examples": [
|
|
42
|
+
"Hmm, let me see what this section is about...",
|
|
43
|
+
"Interesting, but I'm not sure if this applies to me",
|
|
44
|
+
"I wonder what happens if I click here",
|
|
45
|
+
"This is taking a while, but I want to understand fully"
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
}
|
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
# Cognitive Journey Testing Workflow
|
|
2
|
+
|
|
3
|
+
This workflow demonstrates how to use CBrowser's cognitive user simulation to test whether real users can complete tasks on your site.
|
|
4
|
+
|
|
5
|
+
## Why Cognitive Testing?
|
|
6
|
+
|
|
7
|
+
Traditional persona testing simulates **motor behavior**: slow clicks, typos, mobile viewport. Cognitive testing simulates **mental behavior**:
|
|
8
|
+
|
|
9
|
+
- "Would a confused user notice that button?"
|
|
10
|
+
- "Would an impatient user give up at this step?"
|
|
11
|
+
- "Does the UI communicate clearly enough for a first-timer?"
|
|
12
|
+
|
|
13
|
+
## Prerequisites
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
# Install CBrowser
|
|
17
|
+
npm install cbrowser
|
|
18
|
+
|
|
19
|
+
# Configure API key (for standalone CLI usage)
|
|
20
|
+
npx cbrowser config set-api-key
|
|
21
|
+
|
|
22
|
+
# Or use via MCP with Claude Desktop/Code (no API key needed)
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Basic Cognitive Journey
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
# Run a cognitive journey as a first-timer
|
|
29
|
+
npx cbrowser cognitive-journey \
|
|
30
|
+
--persona first-timer \
|
|
31
|
+
--start "https://your-site.com" \
|
|
32
|
+
--goal "sign up for an account"
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Understanding the Output
|
|
36
|
+
|
|
37
|
+
A cognitive journey produces:
|
|
38
|
+
|
|
39
|
+
1. **Goal Status**: Did the simulated user achieve their goal?
|
|
40
|
+
2. **Abandonment Reason**: If they gave up, why?
|
|
41
|
+
3. **Decision Trace**: Step-by-step reasoning with internal monologue
|
|
42
|
+
4. **Friction Points**: Moments where the user struggled
|
|
43
|
+
5. **Cognitive State Over Time**: Patience, confusion, frustration levels
|
|
44
|
+
|
|
45
|
+
## Cognitive Traits Explained
|
|
46
|
+
|
|
47
|
+
Each persona has 7 cognitive traits that affect their behavior:
|
|
48
|
+
|
|
49
|
+
| Trait | Low Value Behavior | High Value Behavior |
|
|
50
|
+
|-------|-------------------|---------------------|
|
|
51
|
+
| `patience` | Gives up quickly | Keeps trying for a long time |
|
|
52
|
+
| `riskTolerance` | Only clicks obvious, safe elements | Clicks unfamiliar buttons |
|
|
53
|
+
| `comprehension` | Misinterprets UI conventions | Understands quickly |
|
|
54
|
+
| `persistence` | Tries something different after failure | Keeps retrying same approach |
|
|
55
|
+
| `curiosity` | Stays focused on goal | Explores interesting sidebars |
|
|
56
|
+
| `workingMemory` | Forgets what they tried, repeats failures | Remembers and avoids repetition |
|
|
57
|
+
| `readingTendency` | Scans for buttons, ignores text | Reads instructions carefully |
|
|
58
|
+
|
|
59
|
+
## Testing Strategy
|
|
60
|
+
|
|
61
|
+
### 1. Test Critical Flows with Multiple Personas
|
|
62
|
+
|
|
63
|
+
```bash
|
|
64
|
+
# Test signup with different user types
|
|
65
|
+
for persona in first-timer elderly-user impatient-user power-user; do
|
|
66
|
+
npx cbrowser cognitive-journey \
|
|
67
|
+
--persona $persona \
|
|
68
|
+
--start "https://your-site.com" \
|
|
69
|
+
--goal "complete signup"
|
|
70
|
+
done
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### 2. Identify Abandonment Points
|
|
74
|
+
|
|
75
|
+
Watch for patterns where multiple personas give up:
|
|
76
|
+
|
|
77
|
+
```bash
|
|
78
|
+
npx cbrowser cognitive-journey \
|
|
79
|
+
--persona impatient-user \
|
|
80
|
+
--start "https://your-site.com" \
|
|
81
|
+
--goal "find pricing" \
|
|
82
|
+
--verbose
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
If the impatient user abandons at step 3 with "This is taking too long," you have a friction point to fix.
|
|
86
|
+
|
|
87
|
+
### 3. Test with Custom Traits
|
|
88
|
+
|
|
89
|
+
Create a custom persona that represents your target user:
|
|
90
|
+
|
|
91
|
+
```bash
|
|
92
|
+
# Save to examples/personas/target-customer.json
|
|
93
|
+
{
|
|
94
|
+
"name": "target-customer",
|
|
95
|
+
"cognitiveTraits": {
|
|
96
|
+
"patience": 0.5,
|
|
97
|
+
"riskTolerance": 0.3,
|
|
98
|
+
"comprehension": 0.6,
|
|
99
|
+
"persistence": 0.4,
|
|
100
|
+
"curiosity": 0.7,
|
|
101
|
+
"workingMemory": 0.6,
|
|
102
|
+
"readingTendency": 0.4
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### 4. Compare Personas Side-by-Side
|
|
108
|
+
|
|
109
|
+
```bash
|
|
110
|
+
npx cbrowser compare-personas \
|
|
111
|
+
--start "https://your-site.com" \
|
|
112
|
+
--goal "complete checkout" \
|
|
113
|
+
--personas power-user,first-timer,elderly-user,mobile-user
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
## MCP Integration (Claude Desktop/Code)
|
|
117
|
+
|
|
118
|
+
For Claude users, cognitive journeys integrate via MCP tools:
|
|
119
|
+
|
|
120
|
+
```typescript
|
|
121
|
+
// Initialize the journey
|
|
122
|
+
const profile = await mcp.cognitive_journey_init({
|
|
123
|
+
persona: "first-timer",
|
|
124
|
+
goal: "sign up as a provider",
|
|
125
|
+
startUrl: "https://your-site.com"
|
|
126
|
+
});
|
|
127
|
+
|
|
128
|
+
// Claude now acts as the persona, making decisions
|
|
129
|
+
// After each action, update the cognitive state:
|
|
130
|
+
const state = await mcp.cognitive_journey_update_state({
|
|
131
|
+
sessionId: profile.sessionId,
|
|
132
|
+
patienceChange: -0.05, // Small depletion
|
|
133
|
+
confusionChange: 0.1, // Got a bit confused
|
|
134
|
+
currentUrl: "https://your-site.com/register"
|
|
135
|
+
});
|
|
136
|
+
|
|
137
|
+
// Check if user would abandon
|
|
138
|
+
if (state.shouldAbandon) {
|
|
139
|
+
console.log(`User gave up: ${state.abandonmentReason}`);
|
|
140
|
+
console.log(`Final thought: ${state.finalThought}`);
|
|
141
|
+
}
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
## Interpreting Results
|
|
145
|
+
|
|
146
|
+
### Successful Journey
|
|
147
|
+
```
|
|
148
|
+
Goal achieved: true
|
|
149
|
+
Steps: 8
|
|
150
|
+
Time: 45s
|
|
151
|
+
Final thought: "That was pretty straightforward!"
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
### Abandoned Journey
|
|
155
|
+
```
|
|
156
|
+
Goal achieved: false
|
|
157
|
+
Abandonment reason: patience_depleted
|
|
158
|
+
Final thought: "This is taking too long, I'll try another site."
|
|
159
|
+
Step 12: Confusion peaked at 0.72 when trying to find the signup button
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
### Friction Points
|
|
163
|
+
```json
|
|
164
|
+
{
|
|
165
|
+
"frictionPoints": [
|
|
166
|
+
{
|
|
167
|
+
"step": 5,
|
|
168
|
+
"type": "confusion",
|
|
169
|
+
"monologue": "I'm not sure if 'Get Started' means signup or just learning more...",
|
|
170
|
+
"screenshot": "friction-step-5.png"
|
|
171
|
+
}
|
|
172
|
+
]
|
|
173
|
+
}
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
## Best Practices
|
|
177
|
+
|
|
178
|
+
1. **Test early, test often**: Run cognitive journeys during design, not just before launch
|
|
179
|
+
2. **Focus on abandonment reasons**: These reveal UX issues
|
|
180
|
+
3. **Watch confusion levels**: Sustained confusion > 0.6 indicates unclear UI
|
|
181
|
+
4. **Check the monologue**: The internal thoughts reveal what users are thinking
|
|
182
|
+
5. **Compare across personas**: If only one persona struggles, it's a specific accessibility issue
|
|
183
|
+
|
|
184
|
+
## Common Abandonment Patterns
|
|
185
|
+
|
|
186
|
+
| Pattern | Typical Cause | Fix |
|
|
187
|
+
|---------|---------------|-----|
|
|
188
|
+
| "Taking too long" | Too many steps, slow loading | Simplify flow |
|
|
189
|
+
| "No idea what to do" | Unclear navigation, missing labels | Improve signposting |
|
|
190
|
+
| "So frustrating" | Repeated failures, errors | Better error messages |
|
|
191
|
+
| "Not getting anywhere" | Circular navigation, dead ends | Improve information architecture |
|
|
192
|
+
| "Keep ending up here" | Confusing back navigation | Better breadcrumbs |
|
|
193
|
+
|
|
194
|
+
## Next Steps
|
|
195
|
+
|
|
196
|
+
- Review friction points and prioritize fixes
|
|
197
|
+
- Re-run journeys after changes to verify improvement
|
|
198
|
+
- Add cognitive journey tests to CI/CD pipeline
|
|
199
|
+
- Create custom personas that match your user research
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cbrowser",
|
|
3
|
-
"version": "8.3.
|
|
3
|
+
"version": "8.3.1",
|
|
4
4
|
"description": "AI-powered browser automation with constitutional safety, AI visual regression, persona testing, and natural language test suites. Modular architecture for visual, testing, analysis, and performance modules.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|