Automate Browser Tasks with Playwright
General-purpose Playwright browser automation that auto-detects dev servers and writes custom test scripts to /tmp.
Why it matters
Automate complex browser interactions and testing scenarios using Playwright. This skill writes and executes custom scripts to navigate websites, fill forms, test responsiveness, and more, providing real-time feedback.
Outcomes
What it gets done
Write and execute custom Playwright scripts for browser automation.
Auto-detect local development servers for seamless testing.
Perform tasks like form submission, login flows, and screenshotting.
Test website responsiveness across multiple viewports.
Install
Add it to your toolbox
Run in your project directory:
curl -fsSL https://spark.entire.vc/get/ag-playwright-skill | bash Overview
Playwright Browser Automation
A general-purpose browser-automation skill that writes and runs custom Playwright scripts on demand, auto-detecting dev servers, defaulting to a visible browser, and writing test files to /tmp rather than the project. Use it for any ad hoc browser-automation or UI-testing task - page checks, login flows, forms, responsive design, broken links - run on demand rather than from a fixed suite.
What it does
A general-purpose browser-automation skill that writes custom Playwright code for any requested automation task and executes it via a universal run.js executor. Its critical workflow: auto-detect running local dev servers first (via a detectDevServers() helper) rather than hardcoding a URL, write test scripts only to /tmp/playwright-test-*.js - never into the skill directory or the user's project, so they're auto-cleaned by the OS - default to a visible browser (headless: false) unless headless mode is explicitly requested, and always parameterize the target URL as a TARGET_URL constant.
cd $SKILL_DIR
npm run setup
It ships ready patterns for common tasks - multi-viewport responsive testing, login-flow testing, form fill-and-submit, broken-link checking, screenshot capture with error handling - plus a lib/helpers.js utility set (detectDevServers, safeClick with retries, safeType, takeScreenshot, handleCookieBanner, extractTableData) and support for injecting custom HTTP headers globally via PW_HEADER_NAME/PW_HEADER_VALUE or PW_EXTRA_HEADERS environment variables - useful for marking automated traffic or requesting LLM-friendly plain-text error responses. When multiple dev servers are detected, it asks which one to target rather than guessing - a documented example shows it finding servers on ports 3000 and 3001 and waiting for the user to pick one before writing the login-flow test.
When to use - and when NOT to
Use it for any browser-automation or UI-testing task - testing a page, checking a login flow, filling and submitting a form, verifying responsive design, or crawling links - where custom Playwright code needs to be written and run on demand rather than picked from a fixed test suite.
Inputs and outputs
Input: a natural-language description of what to test or automate, plus, for localhost testing, the running dev server the skill auto-detects or the user names. Output: a custom-written Playwright script under /tmp/, real-time console output and screenshots from its run, and, for advanced needs, a companion API_REFERENCE.md covering selectors, network interception, auth and session management, visual regression, mobile emulation, and CI/CD integration, loaded only when needed.
Integrations
Built on the playwright npm package with Chromium by default, installed once via npm run setup. Because the skill can be installed via a plugin system, globally, or per-project, every command resolves a $SKILL_DIR path discovered from wherever the SKILL.md file was loaded, rather than a hardcoded location.
Who it's for
Developers who want ad hoc, custom browser automation and UI testing without maintaining a fixed Playwright test suite, especially for local dev-server testing.
FAQ
Common questions
Discussion
Questions & comments · 0
Sign In Sign in to leave a comment.