CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

68

Quality

81%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Playwright Automation

Browser automation skill using Playwright for web testing, verification, data extraction, and interactive workflows. Maintains persistent page state across script executions.

When to Use This Skill

  • Testing web applications (navigation, forms, assertions)
  • Taking screenshots for visual verification
  • Scraping web content or extracting data
  • Automating browser workflows (login, form submission)
  • Verifying UI changes after code modifications

Approach Selection

  • Local/source-available sites: Read source code first to write selectors directly
  • Unknown page layouts: Use accessibility snapshots to discover elements
  • Visual feedback: Take screenshots to see what the user sees

Core Workflow

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"]', "user@example.com");
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();

Key Patterns

Element Discovery with Accessibility Snapshots

// Get accessibility tree to find interactive elements
const snapshot = await page.accessibility.snapshot();
console.log(JSON.stringify(snapshot, null, 2));

Waiting Strategies

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

Form Interaction

await page.fill('input[name="email"]', "user@example.com");
await page.fill('input[name="password"]', "secret");
await page.click('button[type="submit"]');
await page.waitForNavigation();

Screenshots and PDFs

await page.screenshot({ path: "page.png" });
await page.screenshot({ path: "full.png", fullPage: true });
await page.pdf({ path: "output.pdf" });

Network Interception

await page.route("**/api/**", (route) => {
  route.fulfill({ status: 200, body: JSON.stringify({ mock: true }) });
});

Device Emulation

const { devices } = require("playwright");
const iPhone = devices["iPhone 14"];
const context = await browser.newContext({ ...iPhone });

Workflow Loop

For complex tasks, follow this pattern:

  1. Write a script to perform one action
  2. Run it and observe the output
  3. Evaluate — did it work? What's the current state?
  4. Decide — task complete or need another script?
  5. Repeat until done

Tips

  • Use networkidle wait state after navigation for reliable page loads
  • Prefer semantic selectors (role, text, label) over CSS selectors
  • Take screenshots at key steps for debugging
  • Use page.evaluate() for browser-context JavaScript (plain JS only, no TypeScript)
  • For scraping large datasets, intercept network requests rather than scrolling DOM

Inspired by: oh-my-opencode dev-browser skill

Repository
ArabelaTso/Skills-4-SE
Path

skills/playwright-automation/SKILL.md

Commit

4f38503

Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill