Phase 6 · See it running
Day 16 · Driving a Real Browser with Playwright
Day 16

Driving a Real Browser with Playwright

~60 min

Goal — Add Playwright to drive a full browser for testing and tricky pages — while keeping native web tools as your default.

By the end — Playwright installed with Chromium, and a screenshot of your running site taken by a real browser.

1Understand when a browser tool is needed

Claude Code already searches the web and reads pages on its own — that is the default for looking things up.

Playwright is different: it drives a real browser that can click, scroll, screenshot, and test. You reach for it in three cases — testing your own site, viewing something in a real visible browser, or reaching a page that blocks simple reads.

2Install Playwright and Chromium

Paste into Claude Code
Install Playwright and the Chromium browser for it, and explain why Chromium rather than my everyday Chrome.

Chromium is the open, automation-friendly browser Playwright drives; keeping it separate leaves your normal browser untouched.

3Understand headless versus headed

Headless means the browser runs invisibly in the background — fast, good for automated checks. Headed means a real browser window opens on your screen, so you watch it work.

4Try a headless check

With your dev server running, take a screenshot the invisible way.

Paste into Claude Code
Use Playwright to open my local site and take a screenshot, headless.

You get an image of your running site, captured by the browser with no window opening.

5Try headed mode and understand bot-blocking

Paste into Claude Code
Now open my site in headed mode so I can watch the browser.

A window opens and drives itself. This visible mode also matters because some websites block invisible, bot-like browsers — running headed can get through where headless is stopped.

6Keep the defaults straight

Paste into Claude Code
Remind me when to use built-in web search versus Playwright.

The answer: native search and fetch for reading and researching; Playwright only for testing your build, watching a real browser, or getting past a block. Do not let the powerful tool crowd out the simple one.

Note

From local to shipped. Everything today ran on localhost — visible only to you, for previewing and feedback. Shipping is the next step up: putting the site on a real server so anyone can reach it at a public address. You will do a full deploy in Phase 10.

Recap — You installed Playwright with Chromium, took a headless screenshot and a headed run, and set the rule: native web tools first, Playwright only when you truly need a real browser.

Day 15Day 17