playwright

Files (1)

• SKILL.md

SKILL.md (first lines)

# 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:
```javascript
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.

```javascript
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();
  }
})();
```

```bash
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:

```javascript
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`:

```javascript
// ✅ 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 |

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

Use `waitUntil: 'domcontentloaded'` instead of `'networkidle'` — network-idle
can time out on SPAs that keep WebSocket connections open.

### Write to /tmp

Always save screenshots and scripts to `/tmp/` to avoid polluting the workspace:

```javascript
await page.screenshot({ path: '/tmp/my-screenshot.png' });
```

## Viewport & Device Emulation

### Custom viewport

```javascript
const context = await browser.newContext({ viewport: { width: 1400, height: 1000 } });
const page = await context.newPage();
```

### Mobile device

```javascript
const { devices } = require('/Users/espen/node_modules/playwright');
const iPhone = devices['iPhone 15'];
const context = await browser.newContext({ ...iPhone });
```

### Common viewports

| Use case | Width × Height |
|----------|---------------|
| Desktop (default) | 1400 × 1000 |
| Mobile | 390 × 844 |
| Tablet | 768 × 1024 |
| Wide | 1920 × 1080 |

From espennilsen/pi, MIT.

More from espennilsen/pi