Before an agent can drive a browser, you need to drive one yourself. This lesson covers the building blocks that every browser-automation tool shares, using Playwright as the working example.
Watch
A beginner crash course on browser automation with Playwright for Python, the tool used in this lesson.
How automation talks to a browser
Automation libraries control a real browser through a protocol:
- The Chrome DevTools Protocol (CDP) is the low-level protocol Chromium exposes. Puppeteer is built around it, and Playwright uses it for Chromium.
- WebDriver is the W3C standard that Selenium uses. WebDriver BiDi is its newer bidirectional version, adding events and richer control.
- Playwright wraps several browsers (Chromium, Firefox, WebKit) in one API with auto-waiting built in.
You rarely call protocols directly, but knowing they exist explains what is possible: reading the page, clicking, intercepting network traffic, taking screenshots, and capturing traces.
Playwright in 12 lines
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch() # headless by default
page = browser.new_page()
page.goto("https://example.com")
page.get_by_role("link", name="More information").click()
print(page.title())
browser.close()
Install with pip install playwright and playwright install; the intro docs cover the TypeScript, Java and .NET equivalents.
Concepts you will use constantly
Contexts: isolation
A browser context is like a fresh incognito profile: its own cookies, storage and sessions. Create one per task so runs cannot contaminate each other, and you can run many in parallel from one browser process.
Locators and roles
A locator describes how to find an element and re-resolves each time you use it. Prefer user-facing locators (role, label, text) over brittle CSS paths or XPath. Locating by role and accessible name mirrors how an agent will perceive the page in the next lesson.
Auto-waiting
Playwright waits for an element to be attached, visible, stable, enabled and able to receive events before acting. Relying on this, instead of fixed sleeps, removes a large class of flakiness.
Authentication state
Log in once, save the storage state (cookies and local storage), and load it into later contexts. This avoids repeating login on every run, and keeps credentials out of your agent's prompt.
Network and tracing
You can observe or mock requests, wait for specific responses, and record a trace with screenshots, DOM snapshots and network calls to replay a failed run step by step.
Write a script that logs into a practice site, searches, and extracts a result before you let a model do it. You will recognize the agent's mistakes because you have made them.
Resources
Setup and a first script in your language of choice.
Role, label and text locators, filtering and chaining.
Exactly which checks run before each action.
Why contexts are the unit of isolation.
Reusing signed-in state across runs.
The low-level protocol behind many tools.
The standard bidirectional browser automation protocol.
The other widely used library, built for Chrome.
Check yourself
- Script a login, search and data extraction on a practice site such as one you host locally.
- Replace every fixed sleep with a locator or an auto-wait. Run it 20 times and count failures.
- Save authentication state, then run the script again with no login code.