Installing Playwright
Claude Code runs in the terminal, so it doesn’t have a browser by default. Installing Playwright gives AI the ability to control a web browser directly. One sentence is all it takes.
Install PlaywrightThat single instruction is enough for Claude Code to handle everything:
Installs the Playwright package
Downloads Chromium, Firefox, WebKit browsers
Tests that everything installed correctly
If you prefer to do it manually, you can run these commands directly in the terminal.
npm install playwright
npx playwright install chromiumChromium only is fine
Playwright supports three browsers: Chromium, Firefox, and WebKit. For most web automation, Chromium (Chrome-based) alone is sufficient. Installing all three takes up a lot of space, so we recommend installing just Chromium.
First Run: Take a Screenshot
Now that it’s installed, let’s test it right away. Say this to Claude Code.
Use Playwright to open the Google homepage
and take a screenshotClaude Code will write and run Playwright code, taking a screenshot of the Google homepage and saving it. Open the generated file to check it yourself.
This is what it means for “AI to control a browser.” Opening Chrome, entering a URL, taking a screenshot—the process a human would do—is now done by AI instead.
If it doesn't work
If you get an error, just tell Claude Code “there’s an error, fix it.” This is the beauty of agentic AI—it analyzes and fixes errors on its own.
Understanding: What Is Playwright?
The screenshot worked, right? Let’s look at what happened behind the scenes.
Playwright is a browser automation tool created by Microsoft. In simple terms, it’s a robot that can do everything a human does in a browser—clicking, typing, scrolling, screenshots—using code instead.
| Comparison | Manual (human) | Playwright |
|---|---|---|
| Opening browser | Double-click to launch Chrome | One line of code auto-launches |
| Login | Manually type ID/password | Auto-fills saved credentials |
| Copying data | Visually find and Ctrl+C | Precisely extracts via CSS selectors |
| Screenshots | Launch a capture program | Auto-saves at any desired point |
| Repetitive tasks | Manually repeat every day | Build once, auto-repeats |
Here’s the key point—you don’t need to write any code. Tell Claude Code “Go to Google News and grab the top 10 headlines,” and Claude writes and runs the Playwright code automatically. You just receive the results.
Installing Playwright is like giving Claude Code “eyes.” An AI that could only handle files can now see the entire web world too.
Connection to upcoming exercises
Gmail automation (Step 8) and web data collection exercises require Google authentication. With Playwright, this authentication can be handled automatically in the browser. That’s why we install Playwright first.
Easy Google Authentication
Gmail automation, Google Drive integration, etc. all require Google account authentication. Normally this involves a complex OAuth token process, but with Playwright it becomes much simpler.
| Method | Without Playwright | With Playwright |
|---|---|---|
| Auth flow | Copy URL from terminal → paste in browser → login → copy code → paste back in terminal | Claude Code opens a browser and handles login automatically |
| Time | 3-5 min (manual) | 30 seconds (automatic) |
| Difficulty | Challenging for beginners | One sentence and done |
Handle Google OAuth authentication using Playwright.
Open a browser so I can log in directly.When Claude Code opens a browser via Playwright, you just log into your Google account directly. Once login is complete, Claude Code automatically saves the auth token. From then on, the token is reused so you don’t need to log in again.
Your password is safe
Playwright opens the browser, but you do the actual login yourself. Your password is never passed to Claude Code or sent externally. It’s the same process as a normal browser login.
Practical: Web Data Collection
Now let’s do something genuinely useful. Automatically collecting data from web pages.
Example 1: Collecting News Headlines
Grab today's top 10 headlines from Google News
including titles and links, and save as an Excel fileClaude Code uses Playwright to open the news page, automatically extracts headlines, and saves them as an Excel file. One command every morning and your news clipping is done.
Example 2: Competitor Price Monitoring
Search for "wireless keyboard" on Amazon,
get the top 10 products' names, prices, and ratings,
and organize them in a comparison tableWhat would take a human 30 minutes, AI finishes in under 2 minutes. If you track price changes weekly, the time savings are enormous.
Check the site’s terms of service before web scraping. Personal data collection is usually fine, but large-scale commercial scraping requires caution.
More Things You Can Do
Installing Playwright dramatically expands what Claude Code can accomplish.
- Auto-fill web forms
Repetitive web forms—travel reports, expense claims, survey responses—filled out automatically.
- Automated PDF downloads
Monthly reports or invoices from internal systems automatically downloaded and organized.
- Web page monitoring
Get notified when specific page content changes. Automatically watch job postings, bid announcements, sale info, and more.
- Screenshot reports
Auto-capture screenshots of multiple web pages and create comparison reports. Useful for UI change tracking and competitor analysis.
Key point
Playwright is the “tool” and Claude Code is the “operator.” Install the tool, and the operator pulls it out whenever needed. Even without saying “use Playwright,” Claude Code automatically uses Playwright when web work is required.
Try It Yourself
Pick one of the prompts below and enter it into Claude Code.
Challenge 1: Check the Weather
Check today's weather for my city from a weather site and tell meChallenge 2: Currency Exchange Rate
Check the current USD/EUR exchange rate and tell meChallenge 3: Any Site You Want
Go to [your desired site URL] and
grab [the information you want]Errors are perfectly fine. Tell Claude Code “fix the error” and it automatically tries a different approach. That’s the power of agentic AI.
Summary
| Item | Details |
|---|---|
| What is Playwright? | An automation tool that controls browsers with code |
| Why do we need it? | Gives Claude Code “eyes” — enables web tasks |
| How to install | One sentence to Claude Code: “Install Playwright” |
| Google auth | Thanks to Playwright, browser-based authentication made easy |
| Use cases | Data collection, form filling, monitoring, screenshots, and more |
What's next?
With Playwright ready, the next Step covers creating beautiful web pages using design keywords. Playwright continues to play a key role in Gmail, data visualization, and other exercises that follow.