Automate Browser Tasks with Playwright

Writes and runs custom Playwright browser-automation scripts on demand rather than relying on a fixed library of pre-built tests. The workflow order matters: it always auto-detects running local dev servers first via a detectDevServers() helper, before writing any test code; if exactly one server is found it uses it automatically, if several are found it asks which one to target, and if none are found it asks for a URL or offers to help start a dev server. Test scripts are written to /tmp/playwright-test-*.js, never into the skill directory or the user's project, so they do not clutter version control and clean up automatically with the OS. By default it launches a visible browser (headless: false) rather than headless, so runs can be watched and debugged, switching to headless only on explicit request. Every generated script parameterizes its target URL through a TARGET_URL constant or environment variable rather than hardcoding it.

A one-time setup installs Playwright and the Chromium browser:

cd $SKILL_DIR && npm run setup

After that, scripts run via node run.js <script path>, a wrapper that handles module resolution so scripts execute reliably. Common generated patterns include multi-viewport testing (desktop 1920x1080, tablet 768x1024, mobile 375x667), login-flow verification (fill credentials, submit, wait for the post-login redirect), form fill-and-submit checks, a broken-link scanner that HEAD-requests every outbound link on a page, and screenshot capture wrapped in try/catch/finally error handling. For quick one-off checks, such as a screenshot, an existence check or a page title, it can execute code inline without writing a file at all; anything more complex or worth re-running goes into a /tmp file.

It favors explicit wait strategies, waitForURL, waitForSelector and waitForLoadState, over fixed timeouts, and gives quick troubleshooting fixes: if the browser does not open, check that headless: false is set and a display is available; if an element is not found, add an explicit waitForSelector call with a timeout.

Use it for browser automation and UI verification: testing a page across viewports, checking a login or form flow, scanning for broken links, or capturing screenshots for visual review. It is not a fixed test suite; the intended use is ad hoc, custom automation written per request rather than replaying prewritten scripts, and heavier reference material (network interception, visual regression, CI/CD integration) is only loaded on demand from API_REFERENCE.md when the task needs it.

Input is the automation task described in natural language plus, when relevant, a target URL, auto-detected from a running dev server or supplied by the user. Optional environment variables PW_HEADER_NAME/PW_HEADER_VALUE (a single custom HTTP header) or PW_EXTRA_HEADERS (JSON for multiple headers) get applied to every request when scripts create their browser context through helpers.createContext(), or via the injected getContextOptionsWithHeaders() helper for scripts using the raw Playwright API - useful for marking automated traffic or requesting plain-text, LLM-friendly error responses from a backend. Output is a generated, disposable /tmp/playwright-test-*.js script plus its run results: console log lines, and artifacts like /tmp/screenshot.png or per-viewport screenshots.

Ships a lib/helpers.js utility module used inside generated scripts: detectDevServers(), safeClick(page, selector, { retries }), safeType(page, selector, value), takeScreenshot(page, name), handleCookieBanner(page), and extractTableData(page, selector). It builds directly on the Playwright and Chromium stack installed through its own setup command.

Developers who want ad hoc, disposable browser checks against a local or remote app, such as visual review across screen sizes, login and form flow verification, or link checking, without maintaining a permanent test suite or writing Playwright boilerplate by hand each time.