chrome-cdp-cli 2.0.4 → 2.1.0
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/dist/cli/ArgumentParser.js +172 -91
- package/dist/cli/CLIApplication.js +181 -57
- package/dist/cli/CommandRouter.js +98 -74
- package/dist/cli/CommandSchemaRegistry.js +506 -398
- package/dist/cli/EnhancedCLIInterface.js +2 -1
- package/dist/cli/HelpSystem.js +286 -256
- package/dist/handlers/ClickHandler.js +91 -27
- package/dist/handlers/InstallClaudeSkillHandler.js +220 -220
- package/dist/handlers/InstallCursorCommandHandler.js +60 -60
- package/dist/handlers/ListConsoleMessagesHandler.js +126 -178
- package/dist/handlers/ListNetworkRequestsHandler.js +128 -108
- package/dist/handlers/RestartProxyHandler.js +4 -4
- package/dist/handlers/TakeScreenshotHandler.js +70 -59
- package/dist/handlers/TakeSnapshotHandler.js +223 -165
- package/dist/handlers/index.js +0 -1
- package/dist/monitors/ConsoleMonitor.js +29 -0
- package/dist/monitors/NetworkMonitor.js +43 -19
- package/dist/proxy/server/CDPProxyServer.js +5 -1
- package/dist/proxy/server/CommandExecutionService.js +1 -1
- package/dist/proxy/server/ProxyAPIServer.js +11 -6
- package/package.json +3 -2
|
@@ -62,9 +62,9 @@ To install Claude skills:
|
|
|
62
62
|
4. Use --force to install anyway
|
|
63
63
|
|
|
64
64
|
Examples:
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
65
|
+
cdp install-claude-skill --skill-type personal
|
|
66
|
+
cdp install-claude-skill --target-directory /path/to/.claude/skills
|
|
67
|
+
cdp install-claude-skill --force`
|
|
68
68
|
};
|
|
69
69
|
}
|
|
70
70
|
}
|
|
@@ -163,7 +163,7 @@ Use this skill when the user needs advanced browser automation with:
|
|
|
163
163
|
Use YAML/JSON configuration files with profiles for different environments:
|
|
164
164
|
|
|
165
165
|
\`\`\`yaml
|
|
166
|
-
# .
|
|
166
|
+
# .cdp.yaml
|
|
167
167
|
profiles:
|
|
168
168
|
development:
|
|
169
169
|
host: localhost
|
|
@@ -210,11 +210,11 @@ The CLI provides contextual help and suggestions when commands fail:
|
|
|
210
210
|
|
|
211
211
|
\`\`\`bash
|
|
212
212
|
# Automatic contextual help on errors
|
|
213
|
-
|
|
213
|
+
cdp click "#nonexistent-element"
|
|
214
214
|
# Shows: selector validation tips, alternatives, related help topics
|
|
215
215
|
|
|
216
216
|
# Debug mode for detailed error information
|
|
217
|
-
|
|
217
|
+
cdp --debug --verbose click "#problematic-element"
|
|
218
218
|
# Shows: execution logs, CDP messages, timing information
|
|
219
219
|
\`\`\`
|
|
220
220
|
|
|
@@ -222,89 +222,89 @@ chrome-cdp-cli --debug --verbose click "#problematic-element"
|
|
|
222
222
|
|
|
223
223
|
### JavaScript Execution
|
|
224
224
|
- **eval**: Execute JavaScript code with enhanced error handling
|
|
225
|
-
\`
|
|
226
|
-
\`
|
|
227
|
-
\`
|
|
225
|
+
\`cdp --profile development eval "document.title"\`
|
|
226
|
+
\`cdp --format json eval "performance.timing"\`
|
|
227
|
+
\`cdp eval --file automation-script.js\`
|
|
228
228
|
|
|
229
229
|
### Visual Capture with Enhanced Options
|
|
230
230
|
- **screenshot**: Advanced screenshot capture
|
|
231
|
-
\`
|
|
232
|
-
\`
|
|
231
|
+
\`cdp --profile testing screenshot --filename test-result.png\`
|
|
232
|
+
\`cdp screenshot --full-page --format jpeg --quality 90\`
|
|
233
233
|
- **snapshot**: Complete DOM snapshots with metadata
|
|
234
|
-
\`
|
|
234
|
+
\`cdp --format json snapshot --filename dom-analysis.json\`
|
|
235
235
|
|
|
236
236
|
### Enhanced Element Interaction
|
|
237
237
|
- **click**: Click with retry and error recovery
|
|
238
|
-
\`
|
|
239
|
-
\`
|
|
238
|
+
\`cdp --debug click "#submit-button"\`
|
|
239
|
+
\`cdp click ".slow-loading-button" --timeout 15000\`
|
|
240
240
|
- **hover**: Hover with timing control
|
|
241
|
-
\`
|
|
241
|
+
\`cdp hover "#dropdown-trigger" --timeout 5000\`
|
|
242
242
|
- **fill**: Form filling with validation
|
|
243
|
-
\`
|
|
243
|
+
\`cdp fill "#username" "john@example.com" --no-clear\`
|
|
244
244
|
- **fill_form**: Batch form operations with error handling
|
|
245
|
-
\`
|
|
245
|
+
\`cdp fill_form --fields-file form-data.json --continue-on-error\`
|
|
246
246
|
|
|
247
247
|
### Advanced Interactions
|
|
248
248
|
- **drag**: Enhanced drag and drop
|
|
249
|
-
\`
|
|
249
|
+
\`cdp --verbose drag "#draggable" "#dropzone"\`
|
|
250
250
|
- **press_key**: Keyboard simulation with element targeting
|
|
251
|
-
\`
|
|
252
|
-
\`
|
|
251
|
+
\`cdp press_key "Enter" --selector "#search-input"\`
|
|
252
|
+
\`cdp press_key "s" --modifiers Ctrl,Shift\`
|
|
253
253
|
- **upload_file**: File upload with validation
|
|
254
|
-
\`
|
|
254
|
+
\`cdp upload_file "input[type='file']" "./document.pdf"\`
|
|
255
255
|
- **wait_for**: Advanced waiting with conditions
|
|
256
|
-
\`
|
|
257
|
-
\`
|
|
256
|
+
\`cdp wait_for "#loading" --condition hidden --timeout 30000\`
|
|
257
|
+
\`cdp wait_for "#submit-btn" --condition enabled\`
|
|
258
258
|
- **handle_dialog**: Dialog handling with text input
|
|
259
|
-
\`
|
|
259
|
+
\`cdp handle_dialog accept --text "confirmation text"\`
|
|
260
260
|
|
|
261
261
|
### Enhanced Monitoring
|
|
262
262
|
- **console**: Console monitoring with filtering
|
|
263
|
-
\`
|
|
264
|
-
\`
|
|
263
|
+
\`cdp --format json console --latest\`
|
|
264
|
+
\`cdp console --types error,warn\`
|
|
265
265
|
- **network**: Network monitoring with filters
|
|
266
|
-
\`
|
|
267
|
-
\`
|
|
266
|
+
\`cdp --format json network --latest\`
|
|
267
|
+
\`cdp network --filter '{"methods":["POST"],"statusCodes":[200,201]}'\`
|
|
268
268
|
|
|
269
269
|
### Help System
|
|
270
270
|
- **help**: Comprehensive help with topics
|
|
271
|
-
\`
|
|
272
|
-
\`
|
|
273
|
-
\`
|
|
274
|
-
\`
|
|
275
|
-
\`
|
|
276
|
-
\`
|
|
271
|
+
\`cdp help\` - General help with categorized commands
|
|
272
|
+
\`cdp help eval\` - Command-specific help with examples
|
|
273
|
+
\`cdp help topic configuration\` - Configuration management
|
|
274
|
+
\`cdp help topic selectors\` - CSS selector guide
|
|
275
|
+
\`cdp help topic automation\` - Best practices
|
|
276
|
+
\`cdp help topic debugging\` - Troubleshooting guide
|
|
277
277
|
|
|
278
278
|
## Enhanced Automation Workflows
|
|
279
279
|
|
|
280
280
|
### Configuration-Driven Testing
|
|
281
281
|
\`\`\`bash
|
|
282
282
|
# Load testing profile
|
|
283
|
-
|
|
283
|
+
cdp --profile testing --config test-config.yaml
|
|
284
284
|
|
|
285
285
|
# Execute test suite with error recovery
|
|
286
|
-
|
|
286
|
+
cdp eval --file test-suite.js || {
|
|
287
287
|
echo "Test failed, capturing evidence..."
|
|
288
|
-
|
|
289
|
-
|
|
288
|
+
cdp capture-evidence
|
|
289
|
+
cdp check-console
|
|
290
290
|
exit 1
|
|
291
291
|
}
|
|
292
292
|
|
|
293
293
|
# Generate structured report
|
|
294
|
-
|
|
294
|
+
cdp --format json eval "generateTestReport()" > test-results.json
|
|
295
295
|
\`\`\`
|
|
296
296
|
|
|
297
297
|
### Performance Monitoring Workflow
|
|
298
298
|
\`\`\`bash
|
|
299
299
|
# Set up performance monitoring
|
|
300
|
-
|
|
300
|
+
cdp --profile performance --verbose
|
|
301
301
|
|
|
302
302
|
# Navigate and collect metrics
|
|
303
|
-
|
|
304
|
-
|
|
303
|
+
cdp eval "window.location.href = 'https://example.com'"
|
|
304
|
+
cdp wait_for "#main-content" --timeout 30000
|
|
305
305
|
|
|
306
306
|
# Collect comprehensive performance data
|
|
307
|
-
|
|
307
|
+
cdp --format json eval "
|
|
308
308
|
const timing = performance.timing;
|
|
309
309
|
const navigation = performance.getEntriesByType('navigation')[0];
|
|
310
310
|
const resources = performance.getEntriesByType('resource');
|
|
@@ -322,17 +322,17 @@ chrome-cdp-cli --format json eval "
|
|
|
322
322
|
### Advanced Form Testing
|
|
323
323
|
\`\`\`bash
|
|
324
324
|
# Configure for form testing
|
|
325
|
-
|
|
325
|
+
cdp --profile development --debug
|
|
326
326
|
|
|
327
327
|
# Batch form filling with comprehensive error handling
|
|
328
|
-
|
|
328
|
+
cdp fill_form --fields-file form-test-data.json --continue-on-error --timeout 15000
|
|
329
329
|
|
|
330
330
|
# Validate form submission with evidence capture
|
|
331
|
-
|
|
332
|
-
|
|
331
|
+
cdp click "#submit-button"
|
|
332
|
+
cdp wait_for ".success-message, .error-message" --timeout 10000
|
|
333
333
|
|
|
334
334
|
# Capture validation results
|
|
335
|
-
|
|
335
|
+
cdp --format json eval "
|
|
336
336
|
const form = document.querySelector('#test-form');
|
|
337
337
|
const errors = Array.from(form.querySelectorAll('.error')).map(e => e.textContent);
|
|
338
338
|
const success = document.querySelector('.success-message');
|
|
@@ -351,15 +351,15 @@ chrome-cdp-cli --format json eval "
|
|
|
351
351
|
chrome --headless --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-ci &
|
|
352
352
|
|
|
353
353
|
# Execute tests with CI profile
|
|
354
|
-
|
|
354
|
+
cdp --profile ci --quiet eval --file ci-test-suite.js
|
|
355
355
|
|
|
356
356
|
# Generate JUnit-compatible reports
|
|
357
|
-
|
|
357
|
+
cdp --format json eval "generateJUnitReport()" > test-results.xml
|
|
358
358
|
|
|
359
359
|
# Capture evidence on failures
|
|
360
360
|
if [ $? -ne 0 ]; then
|
|
361
|
-
|
|
362
|
-
|
|
361
|
+
cdp screenshot --filename failure-evidence.png
|
|
362
|
+
cdp console --types error > console-errors.json
|
|
363
363
|
fi
|
|
364
364
|
\`\`\`
|
|
365
365
|
|
|
@@ -378,7 +378,7 @@ chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug --no-first
|
|
|
378
378
|
\`\`\`
|
|
379
379
|
|
|
380
380
|
### Configuration File Setup
|
|
381
|
-
Create \`.
|
|
381
|
+
Create \`.cdp.yaml\` in your project root with appropriate profiles for your environments.
|
|
382
382
|
|
|
383
383
|
## Documentation and Support
|
|
384
384
|
|
|
@@ -399,12 +399,12 @@ Commands automatically provide contextual help when they fail, including:
|
|
|
399
399
|
|
|
400
400
|
### Plugin System
|
|
401
401
|
Extend functionality with plugins:
|
|
402
|
-
\`
|
|
402
|
+
\`cdp --plugin-dir ./plugins custom-command\`
|
|
403
403
|
|
|
404
404
|
For comprehensive documentation, see:
|
|
405
405
|
- Configuration Guide: docs/CONFIGURATION.md
|
|
406
406
|
- Plugin Development: docs/PLUGIN_DEVELOPMENT.md
|
|
407
|
-
- Advanced Help Topics: \`
|
|
407
|
+
- Advanced Help Topics: \`cdp help topic <topic>\`
|
|
408
408
|
- \`--verbose\`: Enable detailed logging
|
|
409
409
|
- \`--timeout <ms>\`: Operation timeout`,
|
|
410
410
|
allowedTools: ['Execute', 'Read', 'Write']
|
|
@@ -416,7 +416,7 @@ name: ${skill.name}
|
|
|
416
416
|
description: ${skill.description}
|
|
417
417
|
version: 2.0.0
|
|
418
418
|
category: browser-automation
|
|
419
|
-
tools: [
|
|
419
|
+
tools: [cdp]
|
|
420
420
|
${skill.allowedTools ? `allowedTools: [${skill.allowedTools.map(t => `"${t}"`).join(', ')}]` : ''}
|
|
421
421
|
---
|
|
422
422
|
|
|
@@ -430,51 +430,51 @@ ${skill.allowedTools ? `allowedTools: [${skill.allowedTools.map(t => `"${t}"`).j
|
|
|
430
430
|
|
|
431
431
|
### Get Page Information
|
|
432
432
|
\`\`\`bash
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
433
|
+
cdp eval "document.title"
|
|
434
|
+
cdp eval "window.location.href"
|
|
435
|
+
cdp eval "document.querySelectorAll('a').length"
|
|
436
|
+
cdp eval "({title: document.title, url: location.href, links: document.links.length})"
|
|
437
437
|
\`\`\`
|
|
438
438
|
|
|
439
439
|
### Interact with Elements
|
|
440
440
|
\`\`\`bash
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
441
|
+
cdp eval "document.querySelector('#button').click()"
|
|
442
|
+
cdp eval "document.querySelector('#input').value = 'Hello World'"
|
|
443
|
+
cdp eval "document.querySelector('#form').submit()"
|
|
444
444
|
\`\`\`
|
|
445
445
|
|
|
446
446
|
### Async Operations
|
|
447
447
|
\`\`\`bash
|
|
448
|
-
|
|
449
|
-
|
|
448
|
+
cdp eval "fetch('/api/data').then(r => r.json())"
|
|
449
|
+
cdp eval "new Promise(resolve => setTimeout(() => resolve('Done'), 1000))"
|
|
450
450
|
\`\`\`
|
|
451
451
|
|
|
452
452
|
## Element Interaction Commands
|
|
453
453
|
|
|
454
454
|
### Clicking Elements
|
|
455
455
|
\`\`\`bash
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
456
|
+
cdp click "#submit-button"
|
|
457
|
+
cdp click ".menu-item"
|
|
458
|
+
cdp click "button[type='submit']"
|
|
459
|
+
cdp click "#slow-button" --timeout 10000
|
|
460
460
|
\`\`\`
|
|
461
461
|
|
|
462
462
|
### Hovering Over Elements
|
|
463
463
|
\`\`\`bash
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
464
|
+
cdp hover "#dropdown-trigger"
|
|
465
|
+
cdp hover ".tooltip-element"
|
|
466
|
+
cdp hover "#menu-item" --timeout 5000
|
|
467
467
|
\`\`\`
|
|
468
468
|
|
|
469
469
|
### Form Filling
|
|
470
470
|
\`\`\`bash
|
|
471
471
|
# Single field
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
472
|
+
cdp fill "#username" "john@example.com"
|
|
473
|
+
cdp fill "input[name='password']" "secret123"
|
|
474
|
+
cdp fill "#message" "This is a test message"
|
|
475
475
|
|
|
476
476
|
# Multiple fields at once
|
|
477
|
-
|
|
477
|
+
cdp fill_form '{
|
|
478
478
|
"#username": "john@example.com",
|
|
479
479
|
"#password": "secret123",
|
|
480
480
|
"#confirm-password": "secret123",
|
|
@@ -484,103 +484,103 @@ chrome-cdp-cli fill_form '{
|
|
|
484
484
|
|
|
485
485
|
### Drag and Drop
|
|
486
486
|
\`\`\`bash
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
487
|
+
cdp drag "#draggable-item" "#drop-zone"
|
|
488
|
+
cdp drag ".file-item" ".upload-area"
|
|
489
|
+
cdp drag "#source-element" "#target-container"
|
|
490
490
|
\`\`\`
|
|
491
491
|
|
|
492
492
|
### Keyboard Input
|
|
493
493
|
\`\`\`bash
|
|
494
494
|
# Basic key presses
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
495
|
+
cdp press_key "Enter"
|
|
496
|
+
cdp press_key "Escape"
|
|
497
|
+
cdp press_key "Tab"
|
|
498
498
|
|
|
499
499
|
# With modifiers
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
500
|
+
cdp press_key "a" --modifiers Ctrl # Ctrl+A (Select All)
|
|
501
|
+
cdp press_key "s" --modifiers Ctrl # Ctrl+S (Save)
|
|
502
|
+
cdp press_key "c" --modifiers Ctrl,Shift # Ctrl+Shift+C
|
|
503
503
|
|
|
504
504
|
# Target specific elements
|
|
505
|
-
|
|
506
|
-
|
|
505
|
+
cdp press_key "Enter" --selector "#search-input"
|
|
506
|
+
cdp press_key "ArrowDown" --selector "#dropdown"
|
|
507
507
|
\`\`\`
|
|
508
508
|
|
|
509
509
|
### File Upload
|
|
510
510
|
\`\`\`bash
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
511
|
+
cdp upload_file "input[type='file']" "./document.pdf"
|
|
512
|
+
cdp upload_file "#file-input" "/path/to/image.jpg"
|
|
513
|
+
cdp upload_file ".upload-field" "./test-data.csv"
|
|
514
514
|
\`\`\`
|
|
515
515
|
|
|
516
516
|
### Waiting for Elements
|
|
517
517
|
\`\`\`bash
|
|
518
518
|
# Wait for element to exist
|
|
519
|
-
|
|
519
|
+
cdp wait_for "#loading-spinner"
|
|
520
520
|
|
|
521
521
|
# Wait for element to be visible
|
|
522
|
-
|
|
522
|
+
cdp wait_for "#modal" --condition visible
|
|
523
523
|
|
|
524
524
|
# Wait for element to be hidden
|
|
525
|
-
|
|
525
|
+
cdp wait_for "#loading" --condition hidden
|
|
526
526
|
|
|
527
527
|
# Wait for element to be enabled
|
|
528
|
-
|
|
528
|
+
cdp wait_for "#submit-btn" --condition enabled
|
|
529
529
|
|
|
530
530
|
# Wait for element to be disabled
|
|
531
|
-
|
|
531
|
+
cdp wait_for "#processing-btn" --condition disabled
|
|
532
532
|
|
|
533
533
|
# Custom timeout
|
|
534
|
-
|
|
534
|
+
cdp wait_for "#slow-element" --timeout 30000
|
|
535
535
|
\`\`\`
|
|
536
536
|
|
|
537
537
|
### Dialog Handling
|
|
538
538
|
\`\`\`bash
|
|
539
539
|
# Accept dialogs
|
|
540
|
-
|
|
540
|
+
cdp handle_dialog accept
|
|
541
541
|
|
|
542
542
|
# Dismiss dialogs
|
|
543
|
-
|
|
543
|
+
cdp handle_dialog dismiss
|
|
544
544
|
|
|
545
545
|
# Handle prompt with text input
|
|
546
|
-
|
|
547
|
-
|
|
546
|
+
cdp handle_dialog accept --text "John Doe"
|
|
547
|
+
cdp handle_dialog accept --text "" # Empty input
|
|
548
548
|
|
|
549
549
|
# Wait for dialog to appear
|
|
550
|
-
|
|
550
|
+
cdp handle_dialog accept --timeout 10000
|
|
551
551
|
\`\`\`
|
|
552
552
|
|
|
553
553
|
## Visual Capture
|
|
554
554
|
|
|
555
555
|
### Screenshots
|
|
556
556
|
\`\`\`bash
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
557
|
+
cdp screenshot --filename homepage.png
|
|
558
|
+
cdp screenshot --filename fullpage.png --fullpage
|
|
559
|
+
cdp screenshot --filename reports/test-result.png
|
|
560
560
|
\`\`\`
|
|
561
561
|
|
|
562
562
|
### DOM Snapshots
|
|
563
563
|
\`\`\`bash
|
|
564
|
-
|
|
565
|
-
|
|
564
|
+
cdp snapshot --filename page-structure.json
|
|
565
|
+
cdp snapshot --filename form-state.json
|
|
566
566
|
\`\`\`
|
|
567
567
|
|
|
568
568
|
## Monitoring
|
|
569
569
|
|
|
570
570
|
### Console Messages
|
|
571
571
|
\`\`\`bash
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
572
|
+
cdp console --latest
|
|
573
|
+
cdp console
|
|
574
|
+
cdp console --types error
|
|
575
|
+
cdp console --types warn
|
|
576
576
|
\`\`\`
|
|
577
577
|
|
|
578
578
|
### Network Requests
|
|
579
579
|
\`\`\`bash
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
580
|
+
cdp network --latest
|
|
581
|
+
cdp network
|
|
582
|
+
cdp network --filter '{"methods":["POST"]}'
|
|
583
|
+
cdp network --filter '{"methods":["GET"]}'
|
|
584
584
|
\`\`\`
|
|
585
585
|
|
|
586
586
|
## Complete Workflow Examples
|
|
@@ -588,78 +588,78 @@ chrome-cdp-cli network --filter '{"methods":["GET"]}'
|
|
|
588
588
|
### Login Form Testing
|
|
589
589
|
\`\`\`bash
|
|
590
590
|
# 1. Wait for login form to be visible
|
|
591
|
-
|
|
591
|
+
cdp wait_for "#login-form" --condition visible
|
|
592
592
|
|
|
593
593
|
# 2. Fill login credentials
|
|
594
|
-
|
|
595
|
-
|
|
594
|
+
cdp fill "#email" "test@example.com"
|
|
595
|
+
cdp fill "#password" "password123"
|
|
596
596
|
|
|
597
597
|
# 3. Submit form
|
|
598
|
-
|
|
598
|
+
cdp click "#login-button"
|
|
599
599
|
|
|
600
600
|
# 4. Wait for redirect or success message
|
|
601
|
-
|
|
601
|
+
cdp wait_for "#dashboard" --condition visible --timeout 10000
|
|
602
602
|
|
|
603
603
|
# 5. Capture success state
|
|
604
|
-
|
|
604
|
+
cdp screenshot --filename login-success.png
|
|
605
605
|
|
|
606
606
|
# 6. Check for any errors
|
|
607
|
-
|
|
607
|
+
cdp console --types error
|
|
608
608
|
\`\`\`
|
|
609
609
|
|
|
610
610
|
### File Upload Workflow
|
|
611
611
|
\`\`\`bash
|
|
612
612
|
# 1. Navigate to upload page
|
|
613
|
-
|
|
613
|
+
cdp eval "window.location.href = '/upload'"
|
|
614
614
|
|
|
615
615
|
# 2. Wait for upload form
|
|
616
|
-
|
|
616
|
+
cdp wait_for "#upload-form" --condition visible
|
|
617
617
|
|
|
618
618
|
# 3. Click upload button to open file dialog
|
|
619
|
-
|
|
619
|
+
cdp click "#upload-trigger"
|
|
620
620
|
|
|
621
621
|
# 4. Upload file
|
|
622
|
-
|
|
622
|
+
cdp upload_file "input[type='file']" "./test-document.pdf"
|
|
623
623
|
|
|
624
624
|
# 5. Wait for upload completion
|
|
625
|
-
|
|
625
|
+
cdp wait_for ".upload-success" --condition visible
|
|
626
626
|
|
|
627
627
|
# 6. Verify uploaded file name
|
|
628
|
-
|
|
628
|
+
cdp eval "document.querySelector('.file-name').textContent"
|
|
629
629
|
|
|
630
630
|
# 7. Capture final state
|
|
631
|
-
|
|
631
|
+
cdp screenshot --filename upload-complete.png
|
|
632
632
|
\`\`\`
|
|
633
633
|
|
|
634
634
|
### E-commerce Shopping Flow
|
|
635
635
|
\`\`\`bash
|
|
636
636
|
# 1. Search for product
|
|
637
|
-
|
|
638
|
-
|
|
637
|
+
cdp fill "#search-input" "laptop"
|
|
638
|
+
cdp press_key "Enter" --selector "#search-input"
|
|
639
639
|
|
|
640
640
|
# 2. Wait for search results
|
|
641
|
-
|
|
641
|
+
cdp wait_for ".search-results" --condition visible
|
|
642
642
|
|
|
643
643
|
# 3. Click on first product
|
|
644
|
-
|
|
644
|
+
cdp click ".product-item:first-child"
|
|
645
645
|
|
|
646
646
|
# 4. Wait for product page
|
|
647
|
-
|
|
647
|
+
cdp wait_for "#product-details" --condition visible
|
|
648
648
|
|
|
649
649
|
# 5. Add to cart
|
|
650
|
-
|
|
650
|
+
cdp click "#add-to-cart"
|
|
651
651
|
|
|
652
652
|
# 6. Handle any confirmation dialogs
|
|
653
|
-
|
|
653
|
+
cdp handle_dialog accept
|
|
654
654
|
|
|
655
655
|
# 7. Go to cart
|
|
656
|
-
|
|
656
|
+
cdp click "#cart-icon"
|
|
657
657
|
|
|
658
658
|
# 8. Proceed to checkout
|
|
659
|
-
|
|
659
|
+
cdp click "#checkout-button"
|
|
660
660
|
|
|
661
661
|
# 9. Fill shipping information
|
|
662
|
-
|
|
662
|
+
cdp fill_form '{
|
|
663
663
|
"#first-name": "John",
|
|
664
664
|
"#last-name": "Doe",
|
|
665
665
|
"#address": "123 Main St",
|
|
@@ -668,78 +668,78 @@ chrome-cdp-cli fill_form '{
|
|
|
668
668
|
}'
|
|
669
669
|
|
|
670
670
|
# 10. Capture checkout page
|
|
671
|
-
|
|
671
|
+
cdp screenshot --filename checkout-form.png
|
|
672
672
|
\`\`\`
|
|
673
673
|
|
|
674
674
|
### Form Validation Testing
|
|
675
675
|
\`\`\`bash
|
|
676
676
|
# 1. Try to submit empty form
|
|
677
|
-
|
|
677
|
+
cdp click "#submit-button"
|
|
678
678
|
|
|
679
679
|
# 2. Check for validation errors
|
|
680
|
-
|
|
680
|
+
cdp eval "document.querySelectorAll('.error-message').length"
|
|
681
681
|
|
|
682
682
|
# 3. Fill invalid email
|
|
683
|
-
|
|
684
|
-
|
|
683
|
+
cdp fill "#email" "invalid-email"
|
|
684
|
+
cdp click "#submit-button"
|
|
685
685
|
|
|
686
686
|
# 4. Check specific error message
|
|
687
|
-
|
|
687
|
+
cdp eval "document.querySelector('#email-error').textContent"
|
|
688
688
|
|
|
689
689
|
# 5. Fill valid data
|
|
690
|
-
|
|
691
|
-
|
|
690
|
+
cdp fill "#email" "valid@example.com"
|
|
691
|
+
cdp fill "#phone" "555-1234"
|
|
692
692
|
|
|
693
693
|
# 6. Submit and verify success
|
|
694
|
-
|
|
695
|
-
|
|
694
|
+
cdp click "#submit-button"
|
|
695
|
+
cdp wait_for "#success-message" --condition visible
|
|
696
696
|
|
|
697
697
|
# 7. Capture final state
|
|
698
|
-
|
|
698
|
+
cdp screenshot --filename form-success.png
|
|
699
699
|
\`\`\`
|
|
700
700
|
|
|
701
701
|
### Drag and Drop Testing
|
|
702
702
|
\`\`\`bash
|
|
703
703
|
# 1. Wait for drag source and target
|
|
704
|
-
|
|
705
|
-
|
|
704
|
+
cdp wait_for "#draggable-item" --condition visible
|
|
705
|
+
cdp wait_for "#drop-zone" --condition visible
|
|
706
706
|
|
|
707
707
|
# 2. Capture initial state
|
|
708
|
-
|
|
708
|
+
cdp screenshot --filename before-drag.png
|
|
709
709
|
|
|
710
710
|
# 3. Perform drag and drop
|
|
711
|
-
|
|
711
|
+
cdp drag "#draggable-item" "#drop-zone"
|
|
712
712
|
|
|
713
713
|
# 4. Wait for drop animation to complete
|
|
714
|
-
|
|
714
|
+
cdp wait_for "#drop-zone .dropped-item" --condition visible
|
|
715
715
|
|
|
716
716
|
# 5. Verify drop result
|
|
717
|
-
|
|
717
|
+
cdp eval "document.querySelector('#drop-zone').children.length"
|
|
718
718
|
|
|
719
719
|
# 6. Capture final state
|
|
720
|
-
|
|
720
|
+
cdp screenshot --filename after-drag.png
|
|
721
721
|
\`\`\`
|
|
722
722
|
|
|
723
723
|
### Keyboard Navigation Testing
|
|
724
724
|
\`\`\`bash
|
|
725
725
|
# 1. Focus on first input
|
|
726
|
-
|
|
726
|
+
cdp click "#first-input"
|
|
727
727
|
|
|
728
728
|
# 2. Navigate using Tab
|
|
729
|
-
|
|
730
|
-
|
|
729
|
+
cdp press_key "Tab"
|
|
730
|
+
cdp press_key "Tab"
|
|
731
731
|
|
|
732
732
|
# 3. Use arrow keys in dropdown
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
733
|
+
cdp press_key "ArrowDown" --selector "#dropdown"
|
|
734
|
+
cdp press_key "ArrowDown"
|
|
735
|
+
cdp press_key "Enter"
|
|
736
736
|
|
|
737
737
|
# 4. Use keyboard shortcuts
|
|
738
|
-
|
|
739
|
-
|
|
738
|
+
cdp press_key "a" --modifiers Ctrl # Select all
|
|
739
|
+
cdp press_key "c" --modifiers Ctrl # Copy
|
|
740
740
|
|
|
741
741
|
# 5. Submit with Enter
|
|
742
|
-
|
|
742
|
+
cdp press_key "Enter" --selector "#submit-button"
|
|
743
743
|
\`\`\`
|
|
744
744
|
`;
|
|
745
745
|
}
|
|
@@ -753,22 +753,22 @@ chrome-cdp-cli press_key "Enter" --selector "#submit-button"
|
|
|
753
753
|
#### eval
|
|
754
754
|
Execute JavaScript code in the browser context.
|
|
755
755
|
|
|
756
|
-
**Syntax:** \`
|
|
756
|
+
**Syntax:** \`cdp eval <expression>\`
|
|
757
757
|
|
|
758
758
|
**Options:**
|
|
759
759
|
- \`--timeout <ms>\`: Execution timeout in milliseconds
|
|
760
760
|
- \`--await-promise\`: Wait for Promise resolution (default: true)
|
|
761
761
|
|
|
762
762
|
**Examples:**
|
|
763
|
-
- \`
|
|
764
|
-
- \`
|
|
763
|
+
- \`cdp eval "document.title"\`
|
|
764
|
+
- \`cdp eval "fetch('/api').then(r => r.text())"\`
|
|
765
765
|
|
|
766
766
|
### Visual Capture
|
|
767
767
|
|
|
768
768
|
#### screenshot
|
|
769
769
|
Capture a screenshot of the current page.
|
|
770
770
|
|
|
771
|
-
**Syntax:** \`
|
|
771
|
+
**Syntax:** \`cdp screenshot [options]\`
|
|
772
772
|
|
|
773
773
|
**Options:**
|
|
774
774
|
- \`--filename <path>\`: Output filename (default: screenshot.png)
|
|
@@ -778,7 +778,7 @@ Capture a screenshot of the current page.
|
|
|
778
778
|
#### snapshot
|
|
779
779
|
Capture a complete DOM snapshot with layout information.
|
|
780
780
|
|
|
781
|
-
**Syntax:** \`
|
|
781
|
+
**Syntax:** \`cdp snapshot [options]\`
|
|
782
782
|
|
|
783
783
|
**Options:**
|
|
784
784
|
- \`--filename <path>\`: Output filename (default: snapshot.json)
|
|
@@ -790,20 +790,20 @@ Capture a complete DOM snapshot with layout information.
|
|
|
790
790
|
#### click
|
|
791
791
|
Click on an element using CSS selector.
|
|
792
792
|
|
|
793
|
-
**Syntax:** \`
|
|
793
|
+
**Syntax:** \`cdp click <selector> [options]\`
|
|
794
794
|
|
|
795
795
|
**Options:**
|
|
796
796
|
- \`--wait-for-element\`: Wait for element to be available (default: true)
|
|
797
797
|
- \`--timeout <ms>\`: Timeout for waiting for element (default: 5000ms)
|
|
798
798
|
|
|
799
799
|
**Examples:**
|
|
800
|
-
- \`
|
|
801
|
-
- \`
|
|
800
|
+
- \`cdp click "#submit-button"\`
|
|
801
|
+
- \`cdp click ".menu-item" --timeout 10000\`
|
|
802
802
|
|
|
803
803
|
#### hover
|
|
804
804
|
Hover over an element using CSS selector.
|
|
805
805
|
|
|
806
|
-
**Syntax:** \`
|
|
806
|
+
**Syntax:** \`cdp hover <selector> [options]\`
|
|
807
807
|
|
|
808
808
|
**Options:**
|
|
809
809
|
- \`--wait-for-element\`: Wait for element to be available (default: true)
|
|
@@ -812,7 +812,7 @@ Hover over an element using CSS selector.
|
|
|
812
812
|
#### fill
|
|
813
813
|
Fill a form field with text using CSS selector.
|
|
814
814
|
|
|
815
|
-
**Syntax:** \`
|
|
815
|
+
**Syntax:** \`cdp fill <selector> <text> [options]\`
|
|
816
816
|
|
|
817
817
|
**Options:**
|
|
818
818
|
- \`--wait-for-element\`: Wait for element to be available (default: true)
|
|
@@ -820,39 +820,39 @@ Fill a form field with text using CSS selector.
|
|
|
820
820
|
- \`--clear-first\`: Clear field before filling (default: true)
|
|
821
821
|
|
|
822
822
|
**Examples:**
|
|
823
|
-
- \`
|
|
824
|
-
- \`
|
|
823
|
+
- \`cdp fill "#username" "john@example.com"\`
|
|
824
|
+
- \`cdp fill "input[name='password']" "secret123"\`
|
|
825
825
|
|
|
826
826
|
#### fill_form
|
|
827
827
|
Fill multiple form fields at once.
|
|
828
828
|
|
|
829
|
-
**Syntax:** \`
|
|
829
|
+
**Syntax:** \`cdp fill_form <json> [options]\`
|
|
830
830
|
|
|
831
831
|
**Options:**
|
|
832
832
|
- \`--wait-for-elements\`: Wait for all elements to be available (default: true)
|
|
833
833
|
- \`--timeout <ms>\`: Timeout for waiting for elements (default: 5000ms)
|
|
834
834
|
|
|
835
835
|
**Examples:**
|
|
836
|
-
- \`
|
|
836
|
+
- \`cdp fill_form '{"#username": "john", "#password": "secret"}'\`
|
|
837
837
|
|
|
838
838
|
### Advanced Interactions
|
|
839
839
|
|
|
840
840
|
#### drag
|
|
841
841
|
Perform drag and drop operation from source to target element.
|
|
842
842
|
|
|
843
|
-
**Syntax:** \`
|
|
843
|
+
**Syntax:** \`cdp drag <sourceSelector> <targetSelector> [options]\`
|
|
844
844
|
|
|
845
845
|
**Options:**
|
|
846
846
|
- \`--wait-for-element\`: Wait for elements to be available (default: true)
|
|
847
847
|
- \`--timeout <ms>\`: Timeout for waiting for elements (default: 5000ms)
|
|
848
848
|
|
|
849
849
|
**Examples:**
|
|
850
|
-
- \`
|
|
850
|
+
- \`cdp drag "#draggable" "#dropzone"\`
|
|
851
851
|
|
|
852
852
|
#### press_key
|
|
853
853
|
Simulate keyboard input.
|
|
854
854
|
|
|
855
|
-
**Syntax:** \`
|
|
855
|
+
**Syntax:** \`cdp press_key <key> [options]\`
|
|
856
856
|
|
|
857
857
|
**Options:**
|
|
858
858
|
- \`--selector <selector>\`: CSS selector to focus element first
|
|
@@ -861,26 +861,26 @@ Simulate keyboard input.
|
|
|
861
861
|
- \`--timeout <ms>\`: Timeout for waiting for element (default: 5000ms)
|
|
862
862
|
|
|
863
863
|
**Examples:**
|
|
864
|
-
- \`
|
|
865
|
-
- \`
|
|
866
|
-
- \`
|
|
864
|
+
- \`cdp press_key "Enter"\`
|
|
865
|
+
- \`cdp press_key "a" --modifiers Ctrl\`
|
|
866
|
+
- \`cdp press_key "Enter" --selector "#input-field"\`
|
|
867
867
|
|
|
868
868
|
#### upload_file
|
|
869
869
|
Upload a file to a file input element.
|
|
870
870
|
|
|
871
|
-
**Syntax:** \`
|
|
871
|
+
**Syntax:** \`cdp upload_file <selector> <filePath> [options]\`
|
|
872
872
|
|
|
873
873
|
**Options:**
|
|
874
874
|
- \`--wait-for-element\`: Wait for element to be available (default: true)
|
|
875
875
|
- \`--timeout <ms>\`: Timeout for waiting for element (default: 5000ms)
|
|
876
876
|
|
|
877
877
|
**Examples:**
|
|
878
|
-
- \`
|
|
878
|
+
- \`cdp upload_file "input[type='file']" "./document.pdf"\`
|
|
879
879
|
|
|
880
880
|
#### wait_for
|
|
881
881
|
Wait for an element to appear or meet specific conditions.
|
|
882
882
|
|
|
883
|
-
**Syntax:** \`
|
|
883
|
+
**Syntax:** \`cdp wait_for <selector> [options]\`
|
|
884
884
|
|
|
885
885
|
**Options:**
|
|
886
886
|
- \`--timeout <ms>\`: Maximum time to wait (default: 10000ms)
|
|
@@ -895,13 +895,13 @@ Wait for an element to appear or meet specific conditions.
|
|
|
895
895
|
- \`disabled\`: Element exists and is disabled
|
|
896
896
|
|
|
897
897
|
**Examples:**
|
|
898
|
-
- \`
|
|
899
|
-
- \`
|
|
898
|
+
- \`cdp wait_for "#loading" --condition hidden\`
|
|
899
|
+
- \`cdp wait_for "#submit-btn" --condition enabled\`
|
|
900
900
|
|
|
901
901
|
#### handle_dialog
|
|
902
902
|
Handle browser dialogs (alert, confirm, prompt).
|
|
903
903
|
|
|
904
|
-
**Syntax:** \`
|
|
904
|
+
**Syntax:** \`cdp handle_dialog <action> [options]\`
|
|
905
905
|
|
|
906
906
|
**Arguments:**
|
|
907
907
|
- \`<action>\`: Action to take: "accept" or "dismiss"
|
|
@@ -912,15 +912,15 @@ Handle browser dialogs (alert, confirm, prompt).
|
|
|
912
912
|
- \`--timeout <ms>\`: Timeout for waiting for dialog (default: 5000ms)
|
|
913
913
|
|
|
914
914
|
**Examples:**
|
|
915
|
-
- \`
|
|
916
|
-
- \`
|
|
915
|
+
- \`cdp handle_dialog accept\`
|
|
916
|
+
- \`cdp handle_dialog accept --text "John Doe"\`
|
|
917
917
|
|
|
918
918
|
### Monitoring
|
|
919
919
|
|
|
920
920
|
#### console
|
|
921
921
|
List console messages or get the latest message.
|
|
922
922
|
|
|
923
|
-
**Syntax:** \`
|
|
923
|
+
**Syntax:** \`cdp console [options]\`
|
|
924
924
|
|
|
925
925
|
**Options:**
|
|
926
926
|
- \`--latest\`: Get only the latest message
|
|
@@ -931,7 +931,7 @@ List console messages or get the latest message.
|
|
|
931
931
|
#### network
|
|
932
932
|
List network requests or get the latest request.
|
|
933
933
|
|
|
934
|
-
**Syntax:** \`
|
|
934
|
+
**Syntax:** \`cdp network [options]\`
|
|
935
935
|
|
|
936
936
|
**Options:**
|
|
937
937
|
- \`--latest\`: Get only the latest request
|
|
@@ -942,7 +942,7 @@ List network requests or get the latest request.
|
|
|
942
942
|
#### install_cursor_command
|
|
943
943
|
Install Cursor IDE commands for Chrome browser automation.
|
|
944
944
|
|
|
945
|
-
**Syntax:** \`
|
|
945
|
+
**Syntax:** \`cdp install_cursor_command [options]\`
|
|
946
946
|
|
|
947
947
|
**Options:**
|
|
948
948
|
- \`--target-directory <path>\`: Custom installation directory (default: .cursor/commands)
|
|
@@ -951,7 +951,7 @@ Install Cursor IDE commands for Chrome browser automation.
|
|
|
951
951
|
#### install_claude_skill
|
|
952
952
|
Install Claude Code skill for Chrome browser automation.
|
|
953
953
|
|
|
954
|
-
**Syntax:** \`
|
|
954
|
+
**Syntax:** \`cdp install_claude_skill [options]\`
|
|
955
955
|
|
|
956
956
|
**Options:**
|
|
957
957
|
- \`--skill-type <type>\`: Installation type: 'project' or 'personal' (default: project)
|
|
@@ -1086,18 +1086,18 @@ Element is present and disabled (for form elements):
|
|
|
1086
1086
|
sleep 2
|
|
1087
1087
|
|
|
1088
1088
|
# Navigate to application
|
|
1089
|
-
|
|
1089
|
+
cdp eval "window.location.href = 'http://localhost:3000'"
|
|
1090
1090
|
|
|
1091
1091
|
# Run comprehensive tests
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1092
|
+
cdp wait_for "#app" --condition visible
|
|
1093
|
+
cdp fill "#username" "testuser"
|
|
1094
|
+
cdp fill "#password" "testpass"
|
|
1095
|
+
cdp click "#login-button"
|
|
1096
|
+
cdp wait_for "#dashboard" --condition visible
|
|
1097
|
+
cdp screenshot --filename test-result.png
|
|
1098
1098
|
|
|
1099
1099
|
# Check for errors
|
|
1100
|
-
|
|
1100
|
+
cdp console --types error
|
|
1101
1101
|
\`\`\`
|
|
1102
1102
|
|
|
1103
1103
|
### Automated Testing Script
|
|
@@ -1116,33 +1116,33 @@ sleep 2
|
|
|
1116
1116
|
echo "Running comprehensive web tests..."
|
|
1117
1117
|
|
|
1118
1118
|
# Navigation test
|
|
1119
|
-
|
|
1120
|
-
|
|
1119
|
+
cdp eval "window.location.href = 'http://localhost:3000'"
|
|
1120
|
+
cdp wait_for "#app" --condition visible
|
|
1121
1121
|
|
|
1122
1122
|
# Form interaction test
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1123
|
+
cdp fill "#search-input" "test query"
|
|
1124
|
+
cdp press_key "Enter" --selector "#search-input"
|
|
1125
|
+
cdp wait_for ".search-results" --condition visible
|
|
1126
1126
|
|
|
1127
1127
|
# File upload test
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1128
|
+
cdp click "#upload-button"
|
|
1129
|
+
cdp upload_file "input[type='file']" "./test-file.pdf"
|
|
1130
|
+
cdp wait_for ".upload-success" --condition visible
|
|
1131
1131
|
|
|
1132
1132
|
# Dialog handling test
|
|
1133
|
-
|
|
1134
|
-
|
|
1133
|
+
cdp click "#delete-button"
|
|
1134
|
+
cdp handle_dialog accept
|
|
1135
1135
|
|
|
1136
1136
|
# Drag and drop test
|
|
1137
|
-
|
|
1138
|
-
|
|
1137
|
+
cdp drag "#draggable" "#dropzone"
|
|
1138
|
+
cdp wait_for "#dropzone .dropped-item" --condition visible
|
|
1139
1139
|
|
|
1140
1140
|
# Capture final state
|
|
1141
|
-
|
|
1142
|
-
|
|
1141
|
+
cdp screenshot --filename final-state.png
|
|
1142
|
+
cdp snapshot --filename final-dom.json
|
|
1143
1143
|
|
|
1144
1144
|
# Check for errors
|
|
1145
|
-
ERROR_COUNT=$(
|
|
1145
|
+
ERROR_COUNT=$(cdp console --types error | jq length)
|
|
1146
1146
|
if [ "$ERROR_COUNT" -gt 0 ]; then
|
|
1147
1147
|
echo "Test failed: $ERROR_COUNT console errors found"
|
|
1148
1148
|
exit 1
|