arabelatso/playwright-automation
Browser automation via Playwright for web testing, screenshots, form filling, scraping, and verification. Use when tasks require navigating websites, interacting with web pages, or testing web applications.
npx skills add https://github.com/ArabelaTso/Skills-4-SE --skill playwright-automationBrowser automation skill using Playwright for web testing, verification, data extraction, and interactive workflows. Maintains persistent page state across script executions.
Write small, focused scripts — each does ONE thing:
import { chromium } from "playwright";
const browser = await chromium.launch();
const page = await browser.newPage();
// Navigate
await page.goto("https://example.com");
// Wait for page to be ready
await page.waitForLoadState("networkidle");
// Interact
await page.fill('input[name="email"]', "[email protected]");
await page.click('button[type="submit"]');
// Verify
await page.waitForURL("**/dashboard");
const title = await page.title();
console.log({ title, url: page.url() });
// Screenshot
await page.screenshot({ path: "screenshot.png" });
await browser.close();
// Get accessibility tree to find interactive elements
const snapshot = await page.accessibility.snapshot();
console.log(JSON.stringify(snapshot, null, 2));
await page.waitForLoadState("networkidle"); // Network idle
await page.waitForSelector(".results"); // Specific element
await page.waitForURL("**/success"); // URL pattern
await page.waitForFunction(() => window.ready); // JS condition
await page.fill('input[name="email"]', "[email protected]");
await page.fill('input[name="password"]', "secret");
await page.click('button[type="submit"]');
await page.waitForNavigation();
await page.screenshot({ path: "page.png" });
await page.screenshot({ path: "full.png", fullPage: true });
await page.pdf({ path: "output.pdf" });
await page.route("**/api/**", (route) => {
route.fulfill({ status: 200, body: JSON.stringify({ mock: true }) });
});
const { devices } = require("playwright");
const iPhone = devices["iPhone 14"];
const context = await browser.newContext({ ...iPhone });
For complex tasks, follow this pattern:
networkidle wait state after navigation for reliable page loadsrole, text, label) over CSS selectorspage.evaluate() for browser-context JavaScript (plain JS only, no TypeScript)Inspired by: oh-my-opencode dev-browser skill
Take arabelatso/playwright-automation from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.