Browser Automation Skill

Workflows für Playwright, Puppeteer, Web Scraping, E2E-Testing, Screenshots.

Playwright

Setup

bash
npm init playwright@latest
npx playwright install chromium  # + firefox, webkit
# Oder Docker:
docker run --rm --network host mcr.microsoft.com/playwright:v1.45.0 npx playwright test

Basic Script

python
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page(viewport={"width": 1280, "height": 720})
    page.goto("https://example.com")
    page.fill("input[name=q]", "search term")
    page.click("button[type=submit]")
    page.wait_for_selector(".results")
    html = page.content()
    # Screenshot
    page.screenshot(path="screenshot.png", full_page=True)
    # PDF
    page.pdf(path="page.pdf")
    browser.close()

E2E Test

typescript
import { test, expect } from '@playwright/test';
test('user can login', async ({ page }) => {
  await page.goto('/login');
  await page.fill('#email', 'user@example.com');
  await page.fill('#password', 'pass123');
  await page.click('button[type="submit"]');
  await expect(page.locator('.welcome')).toBeVisible();
  await expect(page).toHaveURL(/\/dashboard/);
});

Puppeteer

javascript
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch({ headless: 'new' });
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle0' });
const text = await page.evaluate(() => document.body.innerText);
await page.screenshot({ path: 'page.png' });
await browser.close();

KI-Integration

python
# Combine browser + AI for intelligent scraping
page.goto("https://docs.example.com")
content = page.inner_text("main")
# Analyze via OmniRoute
resp = httpx.post(
    "http://localhost:20128/v1/chat/completions",
    json={
        "model": "oc/deepseek-v4-flash-free",
        "messages": [
            {"role": "system", "content": "Extract all API endpoints from this documentation."},
            {"role": "user", "content": content[:8000]},
        ],
    },
)

Testing Patterns

bash
# Visual Regression
npx playwright test --update-snapshots  # update baselines
npx playwright test  # compare

# Component Testing (Storybook + Playwright)
npx test-storybook --url http://localhost:6006

# Accessibility
npx playwright test --project=accessibility
await page.accessibility.snapshot()

Debugging

bash
# Slow motion + DevTools
page = browser.new_page(slow_mo=500, devtools=True)
# Trace
await page.tracing.start({screenshots: true, snapshots: true})
# ... test ...
await page.tracing.stop(path="trace.zip")
# View: https://trace.playwright.dev/