Back to Cline

Browser Automation

docs/tools-reference/browser-automation.mdx

3.82.02.7 KB
Original Source

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
Use the browser to check https://example.com
text
Click the login button
text
Type 'Hello world' in the search box
text
Scroll down to see more content
text
Close the browser

Example Workflows

Testing a Web Application

text
Start my React app with "npm start" and check if it's working at http://localhost:3000

Analyzing a Website

text
Visit https://example.com and tell me about its design and layout

Form Testing

text
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
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

IssueSolution
Website doesn't loadUse full URL with http:// or https://
Click doesn't workDescribe element location more precisely
Browser seems stuckClose 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
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)