Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIGitHub CopilotGitHub CopilotGemini CLIGemini CLI+20 more

    Playwright Browser QA Autopilot

    1

    Turn any web app into a verified build: real Chromium smoke tests, login and form flows, full-page screenshots and responsive audits.

    Free

    1 installSecurity scanned
    Playwright Browser QA Autopilot

    Playwright Browser QA Autopilot

    Example session with this skill installed

    Just merged the checkout redesign into main and I need eyes on it before standup at 10. The Next dev server should already be running locally. Smoke test the landing page and /checkout, confirm the promo-code form actually accepts a code and shows a success message, then walk the login flow with test@myshop.dev / Passw0rd! and verify it lands on /account. Take full-page screenshots at desktop, tablet and mobile widths for both pages so I can compare them side by side, and scan the homepage links for anything returning 404. Put all artifacts under /tmp/checkout-qa and give me a short pass/fail report with the screenshot paths.

    • Read your context and instructions
    • Compiled the playwright browser qa
    • Generated the UI component

    Summary

    Chromium smoke-tested the local build at http://localhost:3000: both pages render, the promo form submits with a confirmation, login reaches /account. One broken footer link and a mobile CTA overflow are the only blockers.

    CheckBeforeAfter
    Pages auto-verified0 (manual)2 (home, /checkout)
    Login redirect to /accountunverifiedPASS in 1.8s
    Promo form submissionunverifiedPASS, success alert matched
    Responsive screenshotsnone6 (desktop/tablet/mobile x2)
    Broken links on homeunknown1 found (/shipping, 404)

    Artifacts: /tmp/checkout-qa/desktop-home.png, /tmp/checkout-qa/mobile-checkout.png. Rerun: TARGET_URL=http://localhost:3000 node run.js /tmp/checkout-qa/flow-001.js.

    Next steps

    • Restore or redirect /shipping in the footer, then rerun the link scan
    • Add a max-width guard so the checkout CTA stops overflowing at 390px
    • Promote flow-001.js into tests/e2e/ and trigger it on pull requests

    playwright-browser-qa-autopilot.tsx

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Verify deployments and UI integrity without manual clicking. This skill provides a Playwright-based automation suite for driving Chromium sessions, executing smoke tests, and auditing responsive layouts across different viewports. It handles the friction of browser lifecycle management, selector timing, and environment discovery.

    What it does

    • Automated smoke testing checks if pages render and returns body metrics after deployments.
    • Responsive auditing captures full-page screenshots at desktop, tablet, and mobile breakpoints.
    • Form validation automates multi-step flows including logins, contact forms, and checkbox interactions.
    • Link scanning traverses pages to identify broken resources or 404 errors in the background.
    • Data extraction scrapes structured data from HTML tables into JSON format for reporting.

    How it works

    1. Server discovery probes common ports like 3000, 5173, and 8080 to locate local dev environments.
    2. Script generation writes temporary, parameterized Playwright scripts to a /tmp directory.
    3. Browser execution launches Chromium (headed or headless) via a skill-scoped runner to ensure dependency resolution.
    4. Evidence capture saves full-page PNG snapshots and logs console output for visual verification.

    Frameworks & tools

    Built on Playwright and Node.js. It uses the Chromium runtime for browser automation and handles dependency installation via a localized setup script.

    Why this beats prompting it yourself

    Writing reliable browser scripts requires boilerplate for context cleanup, port detection, and async waiting logic. This skill encapsulates these best practices, ensuring scripts don't hang and screenshots are always captured even if a test fails.

    Use cases

    • Running a quick layout check on a new landing page across mobile and desktop.
    • Verifying that an authentication flow redirects to the correct dashboard URL.
    • Auditing a site for broken links before a production release.
    • Extracting pricing data or report tables from internal web tools.

    Known limitations

    Supports Chromium only. Requires a Node.js environment and local browser binary installation via the provided setup command.

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    1 install

    Downloaded by developers to date

    Free forever

    No account required to browse

    Trust & safety

    Security scanned

    Verified clean 7 days ago

    • Free to download with an account

    Listed7 days ago

    What's inside

    Frequently Asked Questions