Playwright CLI

Playwright CLI

Use this skill when PMX Canvas work needs a real browser check instead of static inspection.

When To Use

• Verify a PMX Canvas UI flow after changing the client
• Open an embedded mcp-app or /artifact?path=... route and confirm it renders
• Click through context menus, pins, groups, snapshots, and other browser-only interactions
• Capture screenshots or accessibility snapshots while keeping terminal context small

Prerequisites

npm install -g @playwright/cli@latest
playwright-cli --version

Requires Node.js 18+.

Core Workflow

1. Open the target URL with playwright-cli open <url>
2. Capture a structural snapshot with playwright-cli snapshot
3. Read the saved snapshot file to find element refs
4. Interact with the page using click, fill, press, or goto
5. Verify with another snapshot or a screenshot
6. Close the session when done

For PMX Canvas work, prefer a named session so you can keep a browser attached to the canvas while testing artifact tabs separately.

playwright-cli -s=canvas open http://localhost:4313
playwright-cli -s=canvas snapshot
playwright-cli -s=canvas screenshot
playwright-cli -s=canvas close

Commands You Will Use Most

• open [url] — launch browser and optionally navigate
• goto <url> — move to another page
• snapshot — save page structure to disk
• screenshot [ref] — capture page or element image
• click <ref> — click an element by snapshot ref
• fill <ref> <text> — fill an input or textarea
• press <key> — send keyboard input
• tab-new [url], tab-list, tab-select <index> — manage multiple pages
• close — close the current browser session

PMX Canvas Guidance

• Start the canvas first: bun run src/cli/index.ts --no-open
• Use this skill after canvas_app { action: "build-artifact" } when you need browser validation
• Prefer visible browser automation for UI investigation so the human can follow along
• Store screenshots and snapshots on disk, then only read back the specific files you need

Pairing With Other Skills

• Use pmx-canvas to create, pin, connect, and inspect nodes
• Use web-artifacts-builder to scaffold richer React/shadcn artifacts
• Use this skill to validate the generated artifact route and embedded canvas node in a browser