chrome-cdp-cli 1.2.4 → 1.3.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.
@@ -145,35 +145,110 @@ Examples:
145
145
  generateClaudeSkill() {
146
146
  return {
147
147
  name: 'cdp-cli',
148
- description: 'Chrome browser automation and testing using DevTools Protocol. Use when user needs to control Chrome browser, execute JavaScript, take screenshots, monitor console/network, or perform web automation tasks.',
148
+ description: 'Chrome browser automation and testing using DevTools Protocol. Use when user needs to control Chrome browser, execute JavaScript, take screenshots, interact with elements, monitor console/network, upload files, handle dialogs, or perform comprehensive web automation tasks.',
149
149
  instructions: `# Chrome Browser Automation
150
150
 
151
151
  ## Instructions
152
152
  Use this skill when the user needs to:
153
153
  - Execute JavaScript code in Chrome browser
154
- - Take screenshots of web pages
155
- - Capture DOM snapshots with layout information
154
+ - Take screenshots of web pages and DOM snapshots
155
+ - Interact with page elements (click, hover, fill forms, drag & drop)
156
+ - Simulate keyboard input and handle file uploads
157
+ - Wait for elements and handle browser dialogs
156
158
  - Monitor console messages and network requests
157
- - Perform web automation and testing
158
-
159
- ## Available Commands
160
- 1. **eval**: Execute JavaScript code in browser context
161
- 2. **screenshot**: Capture page screenshots
162
- 3. **snapshot**: Capture complete DOM snapshots
163
- 4. **get_console_message**: Get latest console message
164
- 5. **list_console_messages**: List all console messages
165
- 6. **get_network_request**: Get latest network request
166
- 7. **list_network_requests**: List all network requests
167
-
168
- ## Usage Examples
169
- - Execute: chrome-cdp-cli eval "document.title"
170
- - Screenshot: chrome-cdp-cli screenshot --filename page.png
171
- - Console: chrome-cdp-cli get_console_message
172
- - Network: chrome-cdp-cli list_network_requests
159
+ - Perform comprehensive web automation and testing
160
+
161
+ ## Complete Command List
162
+
163
+ ### JavaScript Execution
164
+ - **eval**: Execute JavaScript code in browser context
165
+ \`chrome-cdp-cli eval "document.title"\`
166
+ \`chrome-cdp-cli eval "fetch('/api/data').then(r => r.json())"\`
167
+
168
+ ### Visual Capture
169
+ - **screenshot**: Capture page screenshots
170
+ \`chrome-cdp-cli screenshot --filename page.png\`
171
+ - **snapshot**: Capture complete DOM snapshots with layout info
172
+ \`chrome-cdp-cli snapshot --filename dom-snapshot.json\`
173
+
174
+ ### Element Interaction
175
+ - **click**: Click on elements using CSS selectors
176
+ \`chrome-cdp-cli click "#submit-button"\`
177
+ - **hover**: Hover over elements
178
+ \`chrome-cdp-cli hover "#dropdown-trigger"\`
179
+ - **fill**: Fill form fields with text
180
+ \`chrome-cdp-cli fill "#username" "john@example.com"\`
181
+ - **fill_form**: Fill multiple form fields at once
182
+ \`chrome-cdp-cli fill_form '{"#username": "john", "#password": "secret"}'\`
183
+
184
+ ### Advanced Interactions
185
+ - **drag**: Perform drag and drop operations
186
+ \`chrome-cdp-cli drag "#draggable" "#dropzone"\`
187
+ - **press_key**: Simulate keyboard input with modifiers
188
+ \`chrome-cdp-cli press_key "Enter"\`
189
+ \`chrome-cdp-cli press_key "a" --modifiers Ctrl\`
190
+ - **upload_file**: Upload files to file input elements
191
+ \`chrome-cdp-cli upload_file "input[type='file']" "./document.pdf"\`
192
+ - **wait_for**: Wait for elements to appear or meet conditions
193
+ \`chrome-cdp-cli wait_for "#loading" --condition hidden\`
194
+ \`chrome-cdp-cli wait_for "#submit-btn" --condition enabled\`
195
+ - **handle_dialog**: Handle browser dialogs (alert, confirm, prompt)
196
+ \`chrome-cdp-cli handle_dialog accept\`
197
+ \`chrome-cdp-cli handle_dialog accept --text "user input"\`
198
+
199
+ ### Monitoring
200
+ - **get_console_message**: Get latest console message
201
+ \`chrome-cdp-cli get_console_message\`
202
+ - **list_console_messages**: List all console messages
203
+ \`chrome-cdp-cli list_console_messages --type error\`
204
+ - **get_network_request**: Get latest network request
205
+ \`chrome-cdp-cli get_network_request\`
206
+ - **list_network_requests**: List all network requests
207
+ \`chrome-cdp-cli list_network_requests --method POST\`
208
+
209
+ ### IDE Integration
210
+ - **install_cursor_command**: Install Cursor IDE commands
211
+ \`chrome-cdp-cli install_cursor_command\`
212
+ - **install_claude_skill**: Install Claude Code skills
213
+ \`chrome-cdp-cli install_claude_skill --skill-type personal\`
214
+
215
+ ## Common Automation Patterns
216
+
217
+ ### Form Testing Workflow
218
+ 1. Wait for form: \`wait_for "#login-form" --condition visible\`
219
+ 2. Fill fields: \`fill "#email" "test@example.com"\`
220
+ 3. Submit: \`click "#submit-button"\`
221
+ 4. Verify: \`wait_for "#success" --condition visible\`
222
+ 5. Capture: \`screenshot --filename result.png\`
223
+
224
+ ### File Upload Testing
225
+ 1. Trigger upload: \`click "#upload-button"\`
226
+ 2. Upload file: \`upload_file "input[type='file']" "./test.pdf"\`
227
+ 3. Wait for completion: \`wait_for ".upload-success" --condition visible\`
228
+ 4. Verify: \`eval "document.querySelector('.file-name').textContent"\`
229
+
230
+ ### Dialog Handling
231
+ 1. Trigger action: \`click "#delete-button"\`
232
+ 2. Handle confirmation: \`handle_dialog accept\`
233
+ 3. Wait for result: \`wait_for "#deleted-message" --condition visible\`
234
+
235
+ ### Keyboard Navigation
236
+ 1. Focus element: \`click "#search-input"\`
237
+ 2. Type text: \`press_key "search term"\`
238
+ 3. Use shortcuts: \`press_key "a" --modifiers Ctrl\` (select all)
239
+ 4. Submit: \`press_key "Enter"\`
173
240
 
174
241
  ## Prerequisites
175
242
  Chrome browser must be running with DevTools enabled:
176
- chrome --remote-debugging-port=9222`,
243
+ \`chrome --remote-debugging-port=9222\`
244
+
245
+ ## Global Options
246
+ All commands support:
247
+ - \`--host <hostname>\`: Chrome host (default: localhost)
248
+ - \`--port <number>\`: Chrome port (default: 9222)
249
+ - \`--format <json|text>\`: Output format
250
+ - \`--verbose\`: Enable detailed logging
251
+ - \`--timeout <ms>\`: Operation timeout`,
177
252
  allowedTools: ['Execute', 'Read', 'Write']
178
253
  };
179
254
  }
@@ -190,13 +265,14 @@ ${skill.allowedTools ? `allowedTools: [${skill.allowedTools.map(t => `"${t}"`).j
190
265
  generateExamplesMarkdown() {
191
266
  return `# Chrome Automation Examples
192
267
 
193
- ## Basic JavaScript Execution
268
+ ## JavaScript Execution
194
269
 
195
270
  ### Get Page Information
196
271
  \`\`\`bash
197
272
  chrome-cdp-cli eval "document.title"
198
273
  chrome-cdp-cli eval "window.location.href"
199
274
  chrome-cdp-cli eval "document.querySelectorAll('a').length"
275
+ chrome-cdp-cli eval "({title: document.title, url: location.href, links: document.links.length})"
200
276
  \`\`\`
201
277
 
202
278
  ### Interact with Elements
@@ -212,17 +288,120 @@ chrome-cdp-cli eval "fetch('/api/data').then(r => r.json())"
212
288
  chrome-cdp-cli eval "new Promise(resolve => setTimeout(() => resolve('Done'), 1000))"
213
289
  \`\`\`
214
290
 
291
+ ## Element Interaction Commands
292
+
293
+ ### Clicking Elements
294
+ \`\`\`bash
295
+ chrome-cdp-cli click "#submit-button"
296
+ chrome-cdp-cli click ".menu-item"
297
+ chrome-cdp-cli click "button[type='submit']"
298
+ chrome-cdp-cli click "#slow-button" --timeout 10000
299
+ \`\`\`
300
+
301
+ ### Hovering Over Elements
302
+ \`\`\`bash
303
+ chrome-cdp-cli hover "#dropdown-trigger"
304
+ chrome-cdp-cli hover ".tooltip-element"
305
+ chrome-cdp-cli hover "#menu-item" --timeout 5000
306
+ \`\`\`
307
+
308
+ ### Form Filling
309
+ \`\`\`bash
310
+ # Single field
311
+ chrome-cdp-cli fill "#username" "john@example.com"
312
+ chrome-cdp-cli fill "input[name='password']" "secret123"
313
+ chrome-cdp-cli fill "#message" "This is a test message"
314
+
315
+ # Multiple fields at once
316
+ chrome-cdp-cli fill_form '{
317
+ "#username": "john@example.com",
318
+ "#password": "secret123",
319
+ "#confirm-password": "secret123",
320
+ "#email": "john@example.com"
321
+ }'
322
+ \`\`\`
323
+
324
+ ### Drag and Drop
325
+ \`\`\`bash
326
+ chrome-cdp-cli drag "#draggable-item" "#drop-zone"
327
+ chrome-cdp-cli drag ".file-item" ".upload-area"
328
+ chrome-cdp-cli drag "#source-element" "#target-container"
329
+ \`\`\`
330
+
331
+ ### Keyboard Input
332
+ \`\`\`bash
333
+ # Basic key presses
334
+ chrome-cdp-cli press_key "Enter"
335
+ chrome-cdp-cli press_key "Escape"
336
+ chrome-cdp-cli press_key "Tab"
337
+
338
+ # With modifiers
339
+ chrome-cdp-cli press_key "a" --modifiers Ctrl # Ctrl+A (Select All)
340
+ chrome-cdp-cli press_key "s" --modifiers Ctrl # Ctrl+S (Save)
341
+ chrome-cdp-cli press_key "c" --modifiers Ctrl,Shift # Ctrl+Shift+C
342
+
343
+ # Target specific elements
344
+ chrome-cdp-cli press_key "Enter" --selector "#search-input"
345
+ chrome-cdp-cli press_key "ArrowDown" --selector "#dropdown"
346
+ \`\`\`
347
+
348
+ ### File Upload
349
+ \`\`\`bash
350
+ chrome-cdp-cli upload_file "input[type='file']" "./document.pdf"
351
+ chrome-cdp-cli upload_file "#file-input" "/path/to/image.jpg"
352
+ chrome-cdp-cli upload_file ".upload-field" "./test-data.csv"
353
+ \`\`\`
354
+
355
+ ### Waiting for Elements
356
+ \`\`\`bash
357
+ # Wait for element to exist
358
+ chrome-cdp-cli wait_for "#loading-spinner"
359
+
360
+ # Wait for element to be visible
361
+ chrome-cdp-cli wait_for "#modal" --condition visible
362
+
363
+ # Wait for element to be hidden
364
+ chrome-cdp-cli wait_for "#loading" --condition hidden
365
+
366
+ # Wait for element to be enabled
367
+ chrome-cdp-cli wait_for "#submit-btn" --condition enabled
368
+
369
+ # Wait for element to be disabled
370
+ chrome-cdp-cli wait_for "#processing-btn" --condition disabled
371
+
372
+ # Custom timeout
373
+ chrome-cdp-cli wait_for "#slow-element" --timeout 30000
374
+ \`\`\`
375
+
376
+ ### Dialog Handling
377
+ \`\`\`bash
378
+ # Accept dialogs
379
+ chrome-cdp-cli handle_dialog accept
380
+
381
+ # Dismiss dialogs
382
+ chrome-cdp-cli handle_dialog dismiss
383
+
384
+ # Handle prompt with text input
385
+ chrome-cdp-cli handle_dialog accept --text "John Doe"
386
+ chrome-cdp-cli handle_dialog accept --text "" # Empty input
387
+
388
+ # Wait for dialog to appear
389
+ chrome-cdp-cli handle_dialog accept --timeout 10000
390
+ \`\`\`
391
+
215
392
  ## Visual Capture
216
393
 
217
394
  ### Screenshots
218
395
  \`\`\`bash
219
396
  chrome-cdp-cli screenshot --filename homepage.png
220
397
  chrome-cdp-cli screenshot --filename fullpage.png --fullpage
398
+ chrome-cdp-cli screenshot --filename reports/test-result.png
221
399
  \`\`\`
222
400
 
223
401
  ### DOM Snapshots
224
402
  \`\`\`bash
225
403
  chrome-cdp-cli snapshot --filename page-structure.json
404
+ chrome-cdp-cli snapshot --filename form-state.json
226
405
  \`\`\`
227
406
 
228
407
  ## Monitoring
@@ -230,50 +409,187 @@ chrome-cdp-cli snapshot --filename page-structure.json
230
409
  ### Console Messages
231
410
  \`\`\`bash
232
411
  chrome-cdp-cli get_console_message
412
+ chrome-cdp-cli list_console_messages
233
413
  chrome-cdp-cli list_console_messages --type error
414
+ chrome-cdp-cli list_console_messages --type warn
234
415
  \`\`\`
235
416
 
236
417
  ### Network Requests
237
418
  \`\`\`bash
238
419
  chrome-cdp-cli get_network_request
420
+ chrome-cdp-cli list_network_requests
239
421
  chrome-cdp-cli list_network_requests --method POST
422
+ chrome-cdp-cli list_network_requests --method GET
240
423
  \`\`\`
241
424
 
242
- ## Common Workflows
425
+ ## Complete Workflow Examples
243
426
 
244
- ### Testing Form Submission
427
+ ### Login Form Testing
245
428
  \`\`\`bash
246
- # Fill form
247
- chrome-cdp-cli eval "document.querySelector('#email').value = 'test@example.com'"
248
- chrome-cdp-cli eval "document.querySelector('#password').value = 'password123'"
429
+ # 1. Wait for login form to be visible
430
+ chrome-cdp-cli wait_for "#login-form" --condition visible
249
431
 
250
- # Submit and capture
251
- chrome-cdp-cli eval "document.querySelector('#submit').click()"
252
- chrome-cdp-cli screenshot --filename after-submit.png
432
+ # 2. Fill login credentials
433
+ chrome-cdp-cli fill "#email" "test@example.com"
434
+ chrome-cdp-cli fill "#password" "password123"
253
435
 
254
- # Check for errors
436
+ # 3. Submit form
437
+ chrome-cdp-cli click "#login-button"
438
+
439
+ # 4. Wait for redirect or success message
440
+ chrome-cdp-cli wait_for "#dashboard" --condition visible --timeout 10000
441
+
442
+ # 5. Capture success state
443
+ chrome-cdp-cli screenshot --filename login-success.png
444
+
445
+ # 6. Check for any errors
255
446
  chrome-cdp-cli list_console_messages --type error
256
447
  \`\`\`
257
448
 
258
- ### API Testing
449
+ ### File Upload Workflow
259
450
  \`\`\`bash
260
- # Make API call
261
- chrome-cdp-cli eval "fetch('/api/users', {method: 'POST', body: JSON.stringify({name: 'John'}), headers: {'Content-Type': 'application/json'}})"
451
+ # 1. Navigate to upload page
452
+ chrome-cdp-cli eval "window.location.href = '/upload'"
262
453
 
263
- # Monitor network
264
- chrome-cdp-cli list_network_requests --method POST
454
+ # 2. Wait for upload form
455
+ chrome-cdp-cli wait_for "#upload-form" --condition visible
265
456
 
266
- # Check response
267
- chrome-cdp-cli get_network_request
457
+ # 3. Click upload button to open file dialog
458
+ chrome-cdp-cli click "#upload-trigger"
459
+
460
+ # 4. Upload file
461
+ chrome-cdp-cli upload_file "input[type='file']" "./test-document.pdf"
462
+
463
+ # 5. Wait for upload completion
464
+ chrome-cdp-cli wait_for ".upload-success" --condition visible
465
+
466
+ # 6. Verify uploaded file name
467
+ chrome-cdp-cli eval "document.querySelector('.file-name').textContent"
468
+
469
+ # 7. Capture final state
470
+ chrome-cdp-cli screenshot --filename upload-complete.png
471
+ \`\`\`
472
+
473
+ ### E-commerce Shopping Flow
474
+ \`\`\`bash
475
+ # 1. Search for product
476
+ chrome-cdp-cli fill "#search-input" "laptop"
477
+ chrome-cdp-cli press_key "Enter" --selector "#search-input"
478
+
479
+ # 2. Wait for search results
480
+ chrome-cdp-cli wait_for ".search-results" --condition visible
481
+
482
+ # 3. Click on first product
483
+ chrome-cdp-cli click ".product-item:first-child"
484
+
485
+ # 4. Wait for product page
486
+ chrome-cdp-cli wait_for "#product-details" --condition visible
487
+
488
+ # 5. Add to cart
489
+ chrome-cdp-cli click "#add-to-cart"
490
+
491
+ # 6. Handle any confirmation dialogs
492
+ chrome-cdp-cli handle_dialog accept
493
+
494
+ # 7. Go to cart
495
+ chrome-cdp-cli click "#cart-icon"
496
+
497
+ # 8. Proceed to checkout
498
+ chrome-cdp-cli click "#checkout-button"
499
+
500
+ # 9. Fill shipping information
501
+ chrome-cdp-cli fill_form '{
502
+ "#first-name": "John",
503
+ "#last-name": "Doe",
504
+ "#address": "123 Main St",
505
+ "#city": "Anytown",
506
+ "#zip": "12345"
507
+ }'
508
+
509
+ # 10. Capture checkout page
510
+ chrome-cdp-cli screenshot --filename checkout-form.png
511
+ \`\`\`
512
+
513
+ ### Form Validation Testing
514
+ \`\`\`bash
515
+ # 1. Try to submit empty form
516
+ chrome-cdp-cli click "#submit-button"
517
+
518
+ # 2. Check for validation errors
519
+ chrome-cdp-cli eval "document.querySelectorAll('.error-message').length"
520
+
521
+ # 3. Fill invalid email
522
+ chrome-cdp-cli fill "#email" "invalid-email"
523
+ chrome-cdp-cli click "#submit-button"
524
+
525
+ # 4. Check specific error message
526
+ chrome-cdp-cli eval "document.querySelector('#email-error').textContent"
527
+
528
+ # 5. Fill valid data
529
+ chrome-cdp-cli fill "#email" "valid@example.com"
530
+ chrome-cdp-cli fill "#phone" "555-1234"
531
+
532
+ # 6. Submit and verify success
533
+ chrome-cdp-cli click "#submit-button"
534
+ chrome-cdp-cli wait_for "#success-message" --condition visible
535
+
536
+ # 7. Capture final state
537
+ chrome-cdp-cli screenshot --filename form-success.png
538
+ \`\`\`
539
+
540
+ ### Drag and Drop Testing
541
+ \`\`\`bash
542
+ # 1. Wait for drag source and target
543
+ chrome-cdp-cli wait_for "#draggable-item" --condition visible
544
+ chrome-cdp-cli wait_for "#drop-zone" --condition visible
545
+
546
+ # 2. Capture initial state
547
+ chrome-cdp-cli screenshot --filename before-drag.png
548
+
549
+ # 3. Perform drag and drop
550
+ chrome-cdp-cli drag "#draggable-item" "#drop-zone"
551
+
552
+ # 4. Wait for drop animation to complete
553
+ chrome-cdp-cli wait_for "#drop-zone .dropped-item" --condition visible
554
+
555
+ # 5. Verify drop result
556
+ chrome-cdp-cli eval "document.querySelector('#drop-zone').children.length"
557
+
558
+ # 6. Capture final state
559
+ chrome-cdp-cli screenshot --filename after-drag.png
560
+ \`\`\`
561
+
562
+ ### Keyboard Navigation Testing
563
+ \`\`\`bash
564
+ # 1. Focus on first input
565
+ chrome-cdp-cli click "#first-input"
566
+
567
+ # 2. Navigate using Tab
568
+ chrome-cdp-cli press_key "Tab"
569
+ chrome-cdp-cli press_key "Tab"
570
+
571
+ # 3. Use arrow keys in dropdown
572
+ chrome-cdp-cli press_key "ArrowDown" --selector "#dropdown"
573
+ chrome-cdp-cli press_key "ArrowDown"
574
+ chrome-cdp-cli press_key "Enter"
575
+
576
+ # 4. Use keyboard shortcuts
577
+ chrome-cdp-cli press_key "a" --modifiers Ctrl # Select all
578
+ chrome-cdp-cli press_key "c" --modifiers Ctrl # Copy
579
+
580
+ # 5. Submit with Enter
581
+ chrome-cdp-cli press_key "Enter" --selector "#submit-button"
268
582
  \`\`\`
269
583
  `;
270
584
  }
271
585
  generateReferenceMarkdown() {
272
586
  return `# Chrome DevTools CLI Reference
273
587
 
274
- ## Command Reference
588
+ ## Complete Command Reference
589
+
590
+ ### JavaScript Execution
275
591
 
276
- ### eval
592
+ #### eval
277
593
  Execute JavaScript code in the browser context.
278
594
 
279
595
  **Syntax:** \`chrome-cdp-cli eval <expression>\`
@@ -286,7 +602,9 @@ Execute JavaScript code in the browser context.
286
602
  - \`chrome-cdp-cli eval "document.title"\`
287
603
  - \`chrome-cdp-cli eval "fetch('/api').then(r => r.text())"\`
288
604
 
289
- ### screenshot
605
+ ### Visual Capture
606
+
607
+ #### screenshot
290
608
  Capture a screenshot of the current page.
291
609
 
292
610
  **Syntax:** \`chrome-cdp-cli screenshot [options]\`
@@ -296,7 +614,7 @@ Capture a screenshot of the current page.
296
614
  - \`--fullpage\`: Capture full page instead of viewport
297
615
  - \`--quality <0-100>\`: JPEG quality (default: 90)
298
616
 
299
- ### snapshot
617
+ #### snapshot
300
618
  Capture a complete DOM snapshot with layout information.
301
619
 
302
620
  **Syntax:** \`chrome-cdp-cli snapshot [options]\`
@@ -306,7 +624,139 @@ Capture a complete DOM snapshot with layout information.
306
624
  - \`--include-styles\`: Include computed styles (default: true)
307
625
  - \`--include-layout\`: Include layout information (default: true)
308
626
 
309
- ### get_console_message
627
+ ### Element Interaction
628
+
629
+ #### click
630
+ Click on an element using CSS selector.
631
+
632
+ **Syntax:** \`chrome-cdp-cli click <selector> [options]\`
633
+
634
+ **Options:**
635
+ - \`--wait-for-element\`: Wait for element to be available (default: true)
636
+ - \`--timeout <ms>\`: Timeout for waiting for element (default: 5000ms)
637
+
638
+ **Examples:**
639
+ - \`chrome-cdp-cli click "#submit-button"\`
640
+ - \`chrome-cdp-cli click ".menu-item" --timeout 10000\`
641
+
642
+ #### hover
643
+ Hover over an element using CSS selector.
644
+
645
+ **Syntax:** \`chrome-cdp-cli hover <selector> [options]\`
646
+
647
+ **Options:**
648
+ - \`--wait-for-element\`: Wait for element to be available (default: true)
649
+ - \`--timeout <ms>\`: Timeout for waiting for element (default: 5000ms)
650
+
651
+ #### fill
652
+ Fill a form field with text using CSS selector.
653
+
654
+ **Syntax:** \`chrome-cdp-cli fill <selector> <text> [options]\`
655
+
656
+ **Options:**
657
+ - \`--wait-for-element\`: Wait for element to be available (default: true)
658
+ - \`--timeout <ms>\`: Timeout for waiting for element (default: 5000ms)
659
+ - \`--clear-first\`: Clear field before filling (default: true)
660
+
661
+ **Examples:**
662
+ - \`chrome-cdp-cli fill "#username" "john@example.com"\`
663
+ - \`chrome-cdp-cli fill "input[name='password']" "secret123"\`
664
+
665
+ #### fill_form
666
+ Fill multiple form fields at once.
667
+
668
+ **Syntax:** \`chrome-cdp-cli fill_form <json> [options]\`
669
+
670
+ **Options:**
671
+ - \`--wait-for-elements\`: Wait for all elements to be available (default: true)
672
+ - \`--timeout <ms>\`: Timeout for waiting for elements (default: 5000ms)
673
+
674
+ **Examples:**
675
+ - \`chrome-cdp-cli fill_form '{"#username": "john", "#password": "secret"}'\`
676
+
677
+ ### Advanced Interactions
678
+
679
+ #### drag
680
+ Perform drag and drop operation from source to target element.
681
+
682
+ **Syntax:** \`chrome-cdp-cli drag <sourceSelector> <targetSelector> [options]\`
683
+
684
+ **Options:**
685
+ - \`--wait-for-element\`: Wait for elements to be available (default: true)
686
+ - \`--timeout <ms>\`: Timeout for waiting for elements (default: 5000ms)
687
+
688
+ **Examples:**
689
+ - \`chrome-cdp-cli drag "#draggable" "#dropzone"\`
690
+
691
+ #### press_key
692
+ Simulate keyboard input.
693
+
694
+ **Syntax:** \`chrome-cdp-cli press_key <key> [options]\`
695
+
696
+ **Options:**
697
+ - \`--selector <selector>\`: CSS selector to focus element first
698
+ - \`--modifiers <list>\`: Comma-separated modifiers: Ctrl, Alt, Shift, Meta
699
+ - \`--wait-for-element\`: Wait for element if selector provided (default: true)
700
+ - \`--timeout <ms>\`: Timeout for waiting for element (default: 5000ms)
701
+
702
+ **Examples:**
703
+ - \`chrome-cdp-cli press_key "Enter"\`
704
+ - \`chrome-cdp-cli press_key "a" --modifiers Ctrl\`
705
+ - \`chrome-cdp-cli press_key "Enter" --selector "#input-field"\`
706
+
707
+ #### upload_file
708
+ Upload a file to a file input element.
709
+
710
+ **Syntax:** \`chrome-cdp-cli upload_file <selector> <filePath> [options]\`
711
+
712
+ **Options:**
713
+ - \`--wait-for-element\`: Wait for element to be available (default: true)
714
+ - \`--timeout <ms>\`: Timeout for waiting for element (default: 5000ms)
715
+
716
+ **Examples:**
717
+ - \`chrome-cdp-cli upload_file "input[type='file']" "./document.pdf"\`
718
+
719
+ #### wait_for
720
+ Wait for an element to appear or meet specific conditions.
721
+
722
+ **Syntax:** \`chrome-cdp-cli wait_for <selector> [options]\`
723
+
724
+ **Options:**
725
+ - \`--timeout <ms>\`: Maximum time to wait (default: 10000ms)
726
+ - \`--condition <type>\`: Condition to wait for (default: exists)
727
+ - \`--poll-interval <ms>\`: Polling interval (default: 100ms)
728
+
729
+ **Conditions:**
730
+ - \`exists\`: Element exists in DOM
731
+ - \`visible\`: Element exists and is visible
732
+ - \`hidden\`: Element is hidden or does not exist
733
+ - \`enabled\`: Element exists and is not disabled
734
+ - \`disabled\`: Element exists and is disabled
735
+
736
+ **Examples:**
737
+ - \`chrome-cdp-cli wait_for "#loading" --condition hidden\`
738
+ - \`chrome-cdp-cli wait_for "#submit-btn" --condition enabled\`
739
+
740
+ #### handle_dialog
741
+ Handle browser dialogs (alert, confirm, prompt).
742
+
743
+ **Syntax:** \`chrome-cdp-cli handle_dialog <action> [options]\`
744
+
745
+ **Arguments:**
746
+ - \`<action>\`: Action to take: "accept" or "dismiss"
747
+
748
+ **Options:**
749
+ - \`--text <string>\`: Text to enter for prompt dialogs (when accepting)
750
+ - \`--wait-for-dialog\`: Wait for dialog to appear (default: true)
751
+ - \`--timeout <ms>\`: Timeout for waiting for dialog (default: 5000ms)
752
+
753
+ **Examples:**
754
+ - \`chrome-cdp-cli handle_dialog accept\`
755
+ - \`chrome-cdp-cli handle_dialog accept --text "John Doe"\`
756
+
757
+ ### Monitoring
758
+
759
+ #### get_console_message
310
760
  Get the latest console message.
311
761
 
312
762
  **Syntax:** \`chrome-cdp-cli get_console_message [options]\`
@@ -314,7 +764,7 @@ Get the latest console message.
314
764
  **Options:**
315
765
  - \`--type <log|info|warn|error>\`: Filter by message type
316
766
 
317
- ### list_console_messages
767
+ #### list_console_messages
318
768
  List all console messages.
319
769
 
320
770
  **Syntax:** \`chrome-cdp-cli list_console_messages [options]\`
@@ -323,7 +773,7 @@ List all console messages.
323
773
  - \`--type <log|info|warn|error>\`: Filter by message type
324
774
  - \`--limit <number>\`: Maximum number of messages to return
325
775
 
326
- ### get_network_request
776
+ #### get_network_request
327
777
  Get the latest network request.
328
778
 
329
779
  **Syntax:** \`chrome-cdp-cli get_network_request [options]\`
@@ -331,7 +781,7 @@ Get the latest network request.
331
781
  **Options:**
332
782
  - \`--method <GET|POST|PUT|DELETE>\`: Filter by HTTP method
333
783
 
334
- ### list_network_requests
784
+ #### list_network_requests
335
785
  List all network requests.
336
786
 
337
787
  **Syntax:** \`chrome-cdp-cli list_network_requests [options]\`
@@ -340,8 +790,33 @@ List all network requests.
340
790
  - \`--method <GET|POST|PUT|DELETE>\`: Filter by HTTP method
341
791
  - \`--limit <number>\`: Maximum number of requests to return
342
792
 
793
+ ### IDE Integration
794
+
795
+ #### install_cursor_command
796
+ Install Cursor IDE commands for Chrome browser automation.
797
+
798
+ **Syntax:** \`chrome-cdp-cli install_cursor_command [options]\`
799
+
800
+ **Options:**
801
+ - \`--target-directory <path>\`: Custom installation directory (default: .cursor/commands)
802
+ - \`--force\`: Force installation without directory validation
803
+
804
+ #### install_claude_skill
805
+ Install Claude Code skill for Chrome browser automation.
806
+
807
+ **Syntax:** \`chrome-cdp-cli install_claude_skill [options]\`
808
+
809
+ **Options:**
810
+ - \`--skill-type <type>\`: Installation type: 'project' or 'personal' (default: project)
811
+ - \`--target-directory <path>\`: Custom installation directory
812
+ - \`--include-examples\`: Include examples.md file
813
+ - \`--include-references\`: Include reference.md file
814
+ - \`--force\`: Force installation without directory validation
815
+
343
816
  ## Global Options
344
817
 
818
+ All commands support these global options:
819
+
345
820
  - \`--host <hostname>\`: Chrome DevTools host (default: localhost)
346
821
  - \`--port <number>\`: Chrome DevTools port (default: 9222)
347
822
  - \`--output-format <json|text>\`: Output format (default: json)
@@ -368,19 +843,87 @@ chrome --remote-debugging-port=9222 --disable-web-security --user-data-dir=/tmp/
368
843
  chrome --headless --remote-debugging-port=9222
369
844
  \`\`\`
370
845
 
846
+ ## Supported Keys for press_key Command
847
+
848
+ ### Letters and Numbers
849
+ - Letters: a-z, A-Z
850
+ - Numbers: 0-9
851
+
852
+ ### Special Keys
853
+ - \`Enter\`: Enter key
854
+ - \`Escape\`: Escape key
855
+ - \`Tab\`: Tab key
856
+ - \`Backspace\`: Backspace key
857
+ - \`Delete\`: Delete key
858
+ - \`Space\`: Space bar
859
+
860
+ ### Arrow Keys
861
+ - \`ArrowUp\`: Up arrow
862
+ - \`ArrowDown\`: Down arrow
863
+ - \`ArrowLeft\`: Left arrow
864
+ - \`ArrowRight\`: Right arrow
865
+
866
+ ### Navigation Keys
867
+ - \`Home\`: Home key
868
+ - \`End\`: End key
869
+ - \`PageUp\`: Page Up key
870
+ - \`PageDown\`: Page Down key
871
+
872
+ ### Modifier Keys
873
+ - \`Ctrl\`: Control key
874
+ - \`Alt\`: Alt key
875
+ - \`Shift\`: Shift key
876
+ - \`Meta\`: Meta/Cmd key (macOS)
877
+
878
+ ## Wait Conditions Explained
879
+
880
+ ### exists
881
+ Element is present in the DOM, regardless of visibility.
882
+
883
+ ### visible
884
+ Element is present in the DOM and visible to the user:
885
+ - Has non-zero dimensions (width > 0 and height > 0)
886
+ - \`visibility\` is not 'hidden'
887
+ - \`display\` is not 'none'
888
+ - \`opacity\` is not '0'
889
+
890
+ ### hidden
891
+ Element is either not present in the DOM or is hidden:
892
+ - Not in DOM, or
893
+ - Has zero dimensions, or
894
+ - \`visibility\` is 'hidden', or
895
+ - \`display\` is 'none', or
896
+ - \`opacity\` is '0'
897
+
898
+ ### enabled
899
+ Element is present and not disabled (for form elements):
900
+ - Element exists in DOM
901
+ - \`disabled\` property is false
902
+ - No \`disabled\` attribute
903
+
904
+ ### disabled
905
+ Element is present and disabled (for form elements):
906
+ - Element exists in DOM
907
+ - \`disabled\` property is true or \`disabled\` attribute is present
908
+
371
909
  ## Error Handling
372
910
 
373
911
  ### Common Errors
374
912
  - **Connection refused**: Chrome is not running or DevTools port is incorrect
375
913
  - **Target not found**: No active tab or page available
914
+ - **Element not found**: CSS selector doesn't match any elements
376
915
  - **JavaScript error**: Syntax error or runtime exception in eval expression
377
916
  - **Timeout**: Operation took longer than specified timeout
917
+ - **File not found**: File path for upload_file doesn't exist
918
+ - **Dialog not found**: No dialog present when trying to handle_dialog
378
919
 
379
920
  ### Debugging Tips
380
921
  - Use \`--verbose\` flag for detailed logging
381
922
  - Check Chrome DevTools at \`http://localhost:9222\` for available targets
382
- - Verify JavaScript syntax before executing with eval
923
+ - Verify CSS selectors using browser developer tools
924
+ - Test JavaScript expressions in browser console before using eval
383
925
  - Use shorter timeouts for testing, longer for complex operations
926
+ - Check file paths are correct and files exist for upload operations
384
927
 
385
928
  ## Integration Examples
386
929
 
@@ -398,18 +941,22 @@ chrome --headless --remote-debugging-port=9222
398
941
  # Navigate to application
399
942
  chrome-cdp-cli eval "window.location.href = 'http://localhost:3000'"
400
943
 
401
- # Run tests
402
- chrome-cdp-cli eval "document.querySelector('#test-button').click()"
944
+ # Run comprehensive tests
945
+ chrome-cdp-cli wait_for "#app" --condition visible
946
+ chrome-cdp-cli fill "#username" "testuser"
947
+ chrome-cdp-cli fill "#password" "testpass"
948
+ chrome-cdp-cli click "#login-button"
949
+ chrome-cdp-cli wait_for "#dashboard" --condition visible
403
950
  chrome-cdp-cli screenshot --filename test-result.png
404
951
 
405
952
  # Check for errors
406
953
  chrome-cdp-cli list_console_messages --type error
407
954
  \`\`\`
408
955
 
409
- ### Automated Testing
956
+ ### Automated Testing Script
410
957
  \`\`\`bash
411
958
  #!/bin/bash
412
- # test-script.sh
959
+ # comprehensive-test.sh
413
960
 
414
961
  # Start Chrome in background
415
962
  chrome --headless --remote-debugging-port=9222 &
@@ -418,15 +965,43 @@ CHROME_PID=$!
418
965
  # Wait for Chrome to start
419
966
  sleep 2
420
967
 
421
- # Run tests
968
+ # Test suite
969
+ echo "Running comprehensive web tests..."
970
+
971
+ # Navigation test
422
972
  chrome-cdp-cli eval "window.location.href = 'http://localhost:3000'"
423
- chrome-cdp-cli eval "document.querySelector('#login-form input[name=username]').value = 'testuser'"
424
- chrome-cdp-cli eval "document.querySelector('#login-form input[name=password]').value = 'testpass'"
425
- chrome-cdp-cli eval "document.querySelector('#login-form').submit()"
973
+ chrome-cdp-cli wait_for "#app" --condition visible
974
+
975
+ # Form interaction test
976
+ chrome-cdp-cli fill "#search-input" "test query"
977
+ chrome-cdp-cli press_key "Enter" --selector "#search-input"
978
+ chrome-cdp-cli wait_for ".search-results" --condition visible
979
+
980
+ # File upload test
981
+ chrome-cdp-cli click "#upload-button"
982
+ chrome-cdp-cli upload_file "input[type='file']" "./test-file.pdf"
983
+ chrome-cdp-cli wait_for ".upload-success" --condition visible
984
+
985
+ # Dialog handling test
986
+ chrome-cdp-cli click "#delete-button"
987
+ chrome-cdp-cli handle_dialog accept
988
+
989
+ # Drag and drop test
990
+ chrome-cdp-cli drag "#draggable" "#dropzone"
991
+ chrome-cdp-cli wait_for "#dropzone .dropped-item" --condition visible
992
+
993
+ # Capture final state
994
+ chrome-cdp-cli screenshot --filename final-state.png
995
+ chrome-cdp-cli snapshot --filename final-dom.json
996
+
997
+ # Check for errors
998
+ ERROR_COUNT=$(chrome-cdp-cli list_console_messages --type error | jq length)
999
+ if [ "$ERROR_COUNT" -gt 0 ]; then
1000
+ echo "Test failed: $ERROR_COUNT console errors found"
1001
+ exit 1
1002
+ fi
426
1003
 
427
- # Capture results
428
- chrome-cdp-cli screenshot --filename login-test.png
429
- chrome-cdp-cli list_console_messages --type error > errors.log
1004
+ echo "All tests passed!"
430
1005
 
431
1006
  # Cleanup
432
1007
  kill $CHROME_PID