> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cline.bot/llms.txt
> Use this file to discover all available pages before exploring further.

# Browser Automation

> Interact with websites through Cline's controlled browser instance.

Browser automation allows Cline to interact with web content directly through a controlled Chrome instance. It can view websites, test applications, fill forms, and capture screenshots.

## Capabilities

* Visit websites and view content
* Test locally running web applications
* Fill out forms and click elements
* Capture screenshots
* Monitor console logs and errors
* Scroll through pages

## Basic Commands

Ask Cline to use the browser with simple instructions:

```text theme={"system"}
Use the browser to check https://example.com
```

```text theme={"system"}
Click the login button
```

```text theme={"system"}
Type 'Hello world' in the search box
```

```text theme={"system"}
Scroll down to see more content
```

```text theme={"system"}
Close the browser
```

## Example Workflows

### Testing a Web Application

```text theme={"system"}
Start my React app with "npm start" and check if it's working at http://localhost:3000
```

### Analyzing a Website

```text theme={"system"}
Visit https://example.com and tell me about its design and layout
```

### Form Testing

```text theme={"system"}
Go to https://example.com/contact, fill out the form with test data, and submit
```

## Important Details

### One Browser at a Time

Cline can only run one browser at a time. To visit a different site:

* Navigate to a new URL in the same session
* Or close the browser and open a new one

### Close Before Other Tools

Close the browser before editing files or running commands:

```text theme={"system"}
Close the browser and update the CSS to fix the alignment issue we saw
```

### Fixed Viewport

The browser has a fixed 900x600 pixel viewport. Cline shares screenshots after each action so you see exactly what it sees.

### Console Logs

Cline captures browser console logs, which is helpful for debugging. These are included with each screenshot.

## Common Use Cases

* **Web Development**: Test websites and applications
* **UI/UX Review**: Get feedback on design and usability
* **Content Research**: Browse to gather information
* **Form Testing**: Verify forms work correctly
* **Responsive Testing**: Check appearance at different sizes

## Troubleshooting

| Issue                | Solution                                 |
| -------------------- | ---------------------------------------- |
| Website doesn't load | Use full URL with http\:// or https\://  |
| Click doesn't work   | Describe element location more precisely |
| Browser seems stuck  | Close browser and try again              |

## WSL Configuration

When running VS Code in WSL, configure Windows to allow WSL to connect to Chrome:

### Allow Connection (PowerShell as Admin)

```powershell theme={"system"}
New-NetFirewallRule -DisplayName "WSL Chrome Debug" -Direction Inbound -LocalPort 9222 -Protocol TCP -Action Allow
```

### Configure Cline

1. Open VS Code settings
2. Search for "Cline: Chrome Executable Path"
3. Set to your Chrome path (e.g., `C:\Program Files\Google\Chrome\Application\chrome.exe`)