playwright-npx_skill

Overview

This skill provides code-first browser automation using Playwright run via node scripts (e.g., node script.mjs). It’s designed for JavaScript-heavy sites and tasks that need full programmatic control: scraping, screenshots, form automation, session persistence, and complex interactions. Use lighter tools when you don’t need JS execution or when you prefer interactive CLI browsing.

How this skill works

You write Node.js ES module scripts that import Playwright, launch a Chromium browser, create pages or contexts, and drive the page with navigation, selectors, clicks, fills, screenshots, and waits. Scripts run with node (example: node tmp/example.mjs). Session state can be saved and reused and headless/headed modes and debugging options are supported.

When to use it

• Scraping sites that require JavaScript execution or SPA navigation
• Automating form submissions, logins, and multi-step flows
• Generating full-page screenshots or PDFs programmatically
• Reusing custom browser logic across projects or CI jobs
• When you need fine-grained control over waits, selectors, and context storage

Best practices

• Keep scripts in a git-ignored tmp/ directory for easy iteration
• Use ES modules (.mjs) and node to run scripts consistently
• Prefer stable selectors (data-testid, ARIA roles) over brittle CSS/XPath
• Save and reuse storageState for persistent sessions and authenticated flows
• Add console.log and screenshots on error for faster debugging

Example use cases

• Scrape the top 5 headlines from a JS-driven news site and output JSON
• Take full-page screenshots of product pages for visual QA
• Automate login + submission workflows and persist the session to reuse later
• Record interactions with npx playwright codegen, paste into a .mjs script, and run with node
• Wait for networkidle or specific selectors to reliably extract dynamically loaded content