playwright

Playwright — Browser Screenshots & Interaction

Use Playwright to open a real browser, navigate to URLs, take screenshots, and interact with pages. This is the go-to approach for visual verification of any web content — Penpot designs, local dev servers, production sites, etc.

Setup

Playwright is installed at /Users/espen/node_modules/playwright.

When writing scripts, always require from the absolute path:

const { chromium } = require('/Users/espen/node_modules/playwright');

Quick Screenshot

Write a .cjs script to /tmp/, run it with node, then read the resulting PNG.

const { chromium } = require('/Users/espen/node_modules/playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  try {
    const page = await browser.newPage();
    await page.goto('https://example.com', { waitUntil: 'domcontentloaded', timeout: 30000 });
    await page.waitForTimeout(3000);
    await page.screenshot({ path: '/tmp/screenshot.png' });
  } finally {
    await browser.close();
  }
})();

node /tmp/screenshot.cjs

Then view it:

read /tmp/screenshot.png

Key Rules

Always use headless: false

Many SPAs (Penpot, React apps, ClojureScript apps) fail or render blank in headless mode. Always launch headed:

chromium.launch({ headless: false })

Always use CommonJS (.cjs)

Write scripts as .cjs files with require(). ESM imports fail because Playwright isn't in the local node_modules:

// ✅ Works
const { chromium } = require('/Users/espen/node_modules/playwright');

// ❌ Fails — "Cannot find package 'playwright'"
import { chromium } from 'playwright';

Wait for SPA rendering

SPAs need time to hydrate after the initial HTML loads. Always add a wait:

Site type	Wait time
Static HTML	1-2 seconds
Simple SPA (React, Svelte)	3-4 seconds
Complex SPA (Penpot, Figma)	6-8 seconds

await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
await page.waitForTimeout(6000); // adjust per site type