Playwright (scripts) + npx

Run Node.js scripts using Playwright for full browser automation, including scraping, screenshots, form handling, and dynamic content interaction.

Security Scan

This skill is internally consistent with its stated purpose (running Playwright Node scripts); the required tools and included examples match the description, but users should be aware it runs arbitrary scripts that access the network and local files (including session/cookie files).

Purpose & Capability

Name/description (Playwright via node/npx) align with requirements and files. Required binaries (node, npx) and the examples/templates/scripts all directly support browser automation, scraping, screenshots and form automation; nothing requested is unrelated to that purpose.

Instruction Scope

SKILL.md and example scripts instruct the agent/user to run npm install, npx playwright install, and node .mjs scripts that navigate arbitrary websites, take screenshots, and read/write local files (e.g., tmp/session.json, tmp/*.png). This is expected for Playwright but means the skill executes code with filesystem and network access; session persistence may store cookies/auth tokens and examples show file upload APIs (setInputFiles). Users should be aware these are sensitive capabilities.

Install Mechanism

No automated install spec in the skill bundle (instruction-only). The docs recommend standard npm + npx commands (npm install playwright, npx playwright install) which pull packages/binaries from npm/Playwright distribution — expected for this tooling and not an untrusted arbitrary-download pattern.

Credentials

The skill declares no environment variables or credentials (proportionate). However, example code persists storageState/session files and demonstrates proxy configuration examples that could include credentials; these are examples rather than required env vars, but they highlight that scripts can store or transmit sensitive data if misused.

Persistence & Privilege

Skill does not request always:true and does not modify other skills or global agent config. It is user-invocable and can run code when invoked, which is appropriate for its purpose.

Assessment

This skill appears to do what it says (run Playwright scripts) but it executes arbitrary Node code that can hit any website and read/write local files. Before using: (1) review the included example scripts and any script you run; (2) avoid running untrusted scripts or code from unknown authors; (3) be cautious about session files (tmp/session.json) — they can contain cookies/tokens; (4) run installs (npm install / npx playwright install) in an isolated project or container, pin the playwright version, and run npm audit; (5) if you need to limit risk, run scripts in a sandboxed environment (VM/container) or restrict network/file access. If you want, inspect the GitHub repo referenced in _meta.json before installing or using.

Playwright Browser Automation

🤝 Developed together by Kuba + Mahone · Feb 2026

Code-first browser automation with Playwright.

When to Use

Tool	Use When
web_fetch	Simple pages, no JavaScript needed
This skill	JavaScript-heavy sites, complex interactions, full control
stealth-browser	Bot detection / Cloudflare issues
browser tool	Visual exploration, last resort
playwright-cli	Interactive CLI without writing code

Setup

# One-time per project
npm init -y
npm install playwright
npx playwright install chromium

package.json example:

{
  "name": "my-automation",
  "type": "module",
  "dependencies": {
    "playwright": "^1.40.0"
  }
}

Minimal Example

// tmp/example.mjs
import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();

await page.goto('https://example.com');
console.log('Title:', await page.title());

await browser.close();

node tmp/example.mjs

Quick Patterns

Screenshot

import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage();
await page.setViewportSize({ width: 1280, height: 800 });
await page.goto('https://example.com');
await page.screenshot({ path: 'tmp/screenshot.png', fullPage: true });
await browser.close();

Scrape Data

import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://news.ycombinator.com');
const stories = await page.$$eval('.titleline > a', links => 
  links.slice(0, 5).map(a => ({ title: a.innerText, url: a.href }))
);
console.log(JSON.stringify(stories, null, 2));
await browser.close();

Form Interaction

await page.goto('https://example.com/login');
await page.fill('input[name="email"]', '[e-mail]');
await page.fill('input[name="password"]', 'password');
await page.click('button[type="submit"]');

Wait for Dynamic Content

// Wait for network idle (SPA)
await page.goto(url, { waitUntil: 'networkidle' });

// Wait for specific element
await page.waitForSelector('.results', { timeout: 10000 });

// Wait for condition
await page.waitForFunction(() => 
  document.querySelectorAll('.item').length > 0
);

Persistent Session

import fs from 'fs';
const SESSION_FILE = 'tmp/session.json';

let context;
if (fs.existsSync(SESSION_FILE)) {
  context = await browser.newContext({ storageState: SESSION_FILE });
} else {
  context = await browser.newContext();
}
const page = await context.newPage();
// ... login ...
await context.storageState({ path: SESSION_FILE });

Headless vs Headed

// Headless (default, fastest)
await chromium.launch({ headless: true });

// Headed (see the browser)
await chromium.launch({ headless: false });

// Slow motion (debugging)
await chromium.launch({ headless: false, slowMo: 100 });

Selectors Quick Reference

// CSS
await page.click('button.submit');
await page.fill('input#email', 'text');

// Text content
await page.click('text=Submit');
await page.click('text=/log\s*in/i');  // regex

// XPath
await page.click('xpath=//button[@type="submit"]');

// ARIA role
await page.click('role=button[name="Submit"]');

// Test ID (most stable)
await page.click('[data-testid="submit-btn"]');

// Chain selectors
await page.click('nav >> text=Settings');

See references/selectors.md for complete selector guide.

Error Handling

try {
  await page.goto('https://example.com', { timeout: 30000 });
  const hasResults = await page.locator('.results').isVisible().catch(() => false);
  if (!hasResults) {
    console.log('No results');
    process.exit(0);
  }
} catch (error) {
  console.error('Error:', error.message);
  await page.screenshot({ path: 'tmp/error.png' });
  process.exit(1);
} finally {
  await browser.close();
}

Examples & Templates

Working Examples

• examples/screenshot.mjs - Full-page screenshots
• examples/scrape.mjs - Data extraction
• examples/form-interaction.mjs - Form automation
• examples/login-session.mjs - Persistent sessions

Reusable Templates

• scripts/minimal-template.mjs - Clean starting point
• scripts/screenshot-template.mjs - Configurable screenshot
• scripts/scrape-template.mjs - Data scraping scaffold

Copy templates:

cp scripts/minimal-template.mjs tmp/my-task.mjs
# Edit tmp/my-task.mjs, then run:
node tmp/my-task.mjs

Tooling Commands

# Record interactions to generate code
npx playwright codegen https://example.com

# Debug selectors
npx playwright codegen --target javascript https://example.com

# Show trace
npx playwright show-trace tmp/trace.zip

Deep References

• references/selectors.md - Complete selector guide (CSS, text, XPath, ARIA, test-id)
• references/debugging.md - Debugging techniques (headless, slowMo, screenshots)
• references/troubleshooting.md - Common errors and solutions

Tips

• Always put scripts in tmp/ — it's gitignored
• Use .mjs extension for ES modules (no type: module needed)
• Add console.log() liberally for debugging
• Use page.screenshot() when things go wrong
• For complex sites, add await page.waitForLoadState('networkidle')
• See references/debugging.md for detailed debugging guide
• See references/troubleshooting.md for common issues