Driving a Real Browser with Playwright
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
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.
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
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
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.
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.