Chrome & Web Testing

Claude Code can control a Chrome browser directly. It navigates pages, clicks elements, fills forms, takes screenshots, and inspects the DOM and console. Use this to test web apps, debug UI issues, or scrape data from authenticated pages without writing a separate test script.

What you'll learn

• --chrome enables Chrome DevTools Protocol integration, Claude can navigate, click, type, and inspect
• Claude debugs live web apps by reading console output, inspecting DOM state, and taking screenshots
• Chrome integration works in print mode for automated testing and interactive mode for debugging sessions

The problem

You've built a web app. You run your unit tests and they pass. But the login flow is broken in production and you don't know why until a user reports it. Claude Code with Chrome integration can navigate your app, fill in the login form, check the result, and report what's wrong, all without you writing a Selenium script.

Build it

Step 1: Enable Chrome

To allow Claude to natively interact with web pages, start your session with the Chrome flag enabled.

claude --chrome

Or in an interactive session, set --chrome at launch. Claude can now open pages, click elements, fill forms, and inspect the DOM.

Step 2: Test a login flow

Open localhost:3000/login. Fill in the email field with "test@example.com"
and the password field with "password123". Click the submit button.
Check if the page redirects to /dashboard. If it doesn't, tell me what
error message appears on the page.

Claude navigates, fills the form, submits, and checks the result. If the login fails, it reads the error message from the DOM and reports it.

Step 3: Debug a production issue

Open https://myapp.com/checkout. Add an item to the cart. Proceed to
checkout. Check the browser console for JavaScript errors. Take a
screenshot of the current state.

Step 4: Automated testing in print mode

Combine print mode with Chrome integration to run headless end-to-end tests directly from your terminal pipeline.

claude -p "Open localhost:3000, verify the home page loads, check that the nav bar has links for Home, About, and Login. Report any issues." \
  --chrome --max-turns 10

Step 5: Disable Chrome

When you no longer need browser capabilities in your workflow, explicitly disable Chrome to reduce overhead.

claude --no-chrome

What goes wrong

Mistake	How you notice it	The fix
Chrome not found	--chrome flag is ignored	Chrome must be installed on the system. Install Chrome or Chromium
Page loads but elements not found	Claude reports "element not found"	The page may need time to render. Add "wait for the page to fully load" to your prompt
Authentication required	Claude can't access a page behind login	Claude can log in if you provide credentials in the prompt. For SSO, pre-authenticate in a Chrome profile

Confirm it worked

Execute these commands to confirm that Claude successfully launches Chrome and retrieves real-time data from a target website.

# 1. Launch Claude with Chrome
claude --chrome

# 2. In the session:
# "Open example.com and tell me the page title"

# 3. Claude should navigate to example.com and report the title

Next: Day 5 , Advanced Workflows