bulaev.ai

Playwright

CCCOpen source

Build · Build

Browser automation and end-to-end testing; also the camera behind every screenshot and clip in this catalog.

Open playwright.dev

What it is

Playwright is Microsoft's open-source library for driving Chromium, Firefox and WebKit from Node.js, Python, Java or .NET. It was built for end-to-end tests (auto-waiting locators, trace viewer, parallel workers, network mocking), but the same API is the cleanest way to do anything that needs a real browser: take a screenshot at a fixed viewport, record a short video of a page, read computed styles and the scripts a site loads, fill a form, or log in once and reuse the storage state.

The CLI covers the quick cases without code: playwright screenshot, playwright pdf, playwright codegen to record a script by clicking, and playwright install for browser binaries. An MCP server exposes the browser to agents as tools (navigate, click, snapshot, evaluate), which is what lets Claude Code "look at" a page instead of guessing.

Where it fits in the AI OS

Build, twice: the test layer of the agentic dev loop (the agent writes the feature and the Playwright test that proves it), and the research camera for the ideas pipeline and this tools catalog.

Insider notes

members

How Serge's stack uses it

The ideas pipeline is built on it. page_clip.py in the research tools takes a URL and produces a screenshot, a crop, a 6-second video and a mechanism report of the animation or interaction, and the rule is to verify the mechanism by reading the site's own CSS and JavaScript before writing "How it works" on a card. The card format and the R2 media layout (clip, poster, screenshot, crop, mechanism JSON) follow from that tool. The screenshots in this catalog were taken with playwright screenshot --viewport-size=1440,900.

Setup in 5 minutes

  1. npm init playwright@latest in a project (or pip install playwright && playwright install chromium).
  2. npx playwright screenshot --viewport-size=1440,900 https://example.com shot.png to confirm the browser works.
  3. Write one test: await page.goto('/'); await expect(page.getByRole('heading')).toBeVisible(); and run npx playwright test.
  4. npx playwright codegen https://your-site to record a login flow; save storageState for reuse.
  5. Add the MCP server to Claude Code (claude mcp add playwright -- npx @playwright/mcp@latest) so the agent can inspect pages itself.

Alternatives

  • Puppeteer — Chromium-only, older, still fine for screenshots.
  • Cypress — test-focused with a strong UI runner; single browser per run.
  • Browserless / Browserbase — hosted browsers when you do not want to run Chromium on your own infrastructure.
  • Selenium — the legacy standard, heavier to maintain.