# CDP Protocol Usage

Chrome DevTools Protocol (CDP) provides deep access to Chromium-based browsers and applications.

## Supported Platforms

- Electron
- Microsoft Edge
- Chrome Browser
- Windows WebView2
- Any Chromium-based WebView

## CDP Endpoints

CDP uses WebSocket connections through a JSON endpoint:

```
http://localhost:9222/json
```

### Endpoint Discovery

When you connect to the JSON endpoint, you get a list of available targets:

```json
[
  {
    "id": "page-id",
    "type": "page",
    "url": "http://localhost:3000",
    "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/page-id"
  }
]
```

## CDP Connection

```bash
# Connect to CDP endpoint
nomo-e2e open --driver cdp http://localhost:9222

# Or use shorthand (auto-detects CDP)
nomo-e2e open http://localhost:9222
```

## CDP-Specific Commands

### Console Monitoring

```bash
# Get console logs
nomo-e2e console
nomo-e2e console error
nomo-e2e console warning

# Clear console
nomo-e2e console-clear
```

### Network Monitoring

```bash
# Get network requests
nomo-e2e network

# Limit results
nomo-e2e network --limit 100

# Filter by URL pattern
nomo-e2e network --url-pattern "api/*"
```

### PDF Generation

```bash
# Generate PDF from current page
nomo-e2e pdf
nomo-e2e pdf --filename report.pdf
```

## Advanced Interaction Commands (CDP only)

CDP protocol enables advanced interaction commands that are not available in WebDriver:

```bash
# Hover over element
nomo-e2e hover <selector>

# Double-click element
nomo-e2e dblclick <selector>

# Press key (Enter, Escape, Control+a, etc.)
nomo-e2e press Enter
nomo-e2e press Escape
nomo-e2e press Control+a

# Key down/up
nomo-e2e keydown Control
nomo-e2e keyup Control

# Select dropdown option
nomo-e2e select "select#country" "US"

# Check/uncheck
nomo-e2e check "#agree"
nomo-e2e uncheck "#notify"

# Mouse operations
nomo-e2e mousemove 100 200
nomo-e2e mousedown 100 200
nomo-e2e mouseup
nomo-e2e mousewheel 0 -300

# File upload
nomo-e2e upload "input[type=file]" "./document.pdf"

# Drag and drop
nomo-e2e drag "#source" "#target"
```

## Storage Commands (CDP)

```bash
# Cookies
nomo-e2e cookie-get
nomo-e2e cookie-get "session_id"
nomo-e2e cookie-set "token" "abc123"
nomo-e2e cookie-delete "token"
nomo-e2e cookie-clear

# localStorage
nomo-e2e localstorage-list
nomo-e2e localstorage-set "theme" "dark"
nomo-e2e localstorage-delete "theme"
nomo-e2e localstorage-clear

# sessionStorage
nomo-e2e sessionstorage-list
nomo-e2e sessionstorage-set "key" "value"
nomo-e2e sessionstorage-delete "key"
nomo-e2e sessionstorage-clear
```

## Example Workflow

```bash
#!/bin/bash
# CDP-only advanced workflow

# Connect with CDP
nomo-e2e open --driver cdp http://localhost:9222

# Take snapshot
nomo-e2e snapshot

# Interact with dropdown
nomo-e2e hover "#menu"
nomo-e2e click "#menu-item"

# Fill form with complex interactions
nomo-e2e fill "#name" "John Doe"
nomo-e2e select "#country" "US"
nomo-e2e check "#agree"

# Upload file
nomo-e2e upload "input[type=file]" "./document.pdf"

# Submit and verify
nomo-e2e press Enter
nomo-e2e screenshot --filename success.png

# Check console for errors
nomo-e2e console error

# Disconnect
nomo-e2e close
```

## CDP vs WebDriver Comparison

| Feature | CDP | WebDriver |
|---------|-----|-----------|
| **Protocol** | Chrome DevTools Protocol | W3C WebDriver |
| **Connection** | WebSocket | HTTP |
| **Advanced Interactions** | ✅ Full support | ❌ Limited |
| **Console Access** | ✅ Native | ❌ Not supported |
| **Network Monitoring** | ✅ Full support | ❌ Not supported |
| **PDF Generation** | ✅ Native | ❌ Not supported |
| **File Upload** | ✅ Native | ❌ Not supported |
| **Drag and Drop** | ✅ Native | ❌ Not supported |
| **Mouse/Keyboard** | ✅ Full control | ⚠️ Basic only |

## When to Use CDP

Use CDP protocol when you need:

1. **Advanced interactions** - hover, drag, press keys
2. **Console monitoring** - Debug JavaScript errors
3. **Network analysis** - Inspect API calls
4. **PDF generation** - Export pages
5. **Precise mouse control** - Canvas automation

## Troubleshooting CDP

### WebSocket Connection Failed

```bash
# Check if CDP port is open
curl http://localhost:9222/json

# Ensure remote debugging is enabled
# Electron: app.commandLine.appendSwitch('remote-debugging-port', '9222')
```

### Target Not Found

```bash
# List available targets
curl http://localhost:9222/json

# Connect to specific target
nomo-e2e open http://localhost:9222
```

### Advanced Commands Not Working

If you see this error:
```
Advanced interactions not supported by WebDriver protocol
```

Make sure you're using CDP:
```bash
nomo-e2e open --driver cdp http://localhost:9222
```

## See Also

- [Getting Started](getting-started.md)
- [WebDriver Protocol](webdriver-protocol.md)
- [Session Management](session-management.md)
