---

name: dev-browser description: Visual verification and browser automation using Playwright metadata: short-description: use playwright to verify ui, take screenshots, and run browser tests

dev-browser Skill

When to use

Use this skill when:

• Verifying frontend changes visually
• Taking screenshots for documentation or debugging
• Running end-to-end browser tests
• Checking responsive layouts across viewports
• Validating that UI changes render correctly before commit

Setup (run once per project)

Before using this skill, ensure Playwright is installed. Run the appropriate setup for your project type:

Node.js Projects

Copy# Check if playwright is installed
if ! npm ls playwright &>/dev/null; then
  echo "Installing Playwright..."
  npm install -D playwright @playwright/test
  npx playwright install chromium
else
  echo "Playwright already installed"
fi

Python Projects

Copy# Check if playwright is installed
if ! python -c "import playwright" &>/dev/null; then
  echo "Installing Playwright..."
  pip install playwright
  playwright install chromium
else
  echo "Playwright already installed"
fi

One-liner Setup Scripts

Node.js:

Copynpm ls playwright &>/dev/null || (npm install -D playwright @playwright/test && npx playwright install chromium)

Python:

Copypython -c "import playwright" 2>/dev/null || (pip install playwright && playwright install chromium)

.NET/Blazor Projects

For Blazor WebAssembly projects, use the existing Node.js Playwright setup (Playwright runs in Node regardless of backend):

Copy# Install Playwright in the project (if package.json exists)
npm ls playwright &>/dev/null || (npm install -D playwright @playwright/test && npx playwright install chromium)

Blazor dev server:

Copy# Start Blazor dev server (default port 5041 or check launchSettings.json)
dotnet watch run --project src/SpaceInvaders &
sleep 5  # Blazor WASM takes longer to compile

Verification script for Blazor:

Copy// verify-blazor.mjs
import { chromium } from "playwright";

const BASE_URL = process.env.BASE_URL || "http://localhost:5041";

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

// Blazor WASM needs time to load
await page.goto(BASE_URL, { waitUntil: "networkidle", timeout: 60000 });

// Wait for Blazor to initialize (loading screen disappears)
await page.waitForSelector("#app:not(:has(.loading))", { timeout: 30000 });

await page.screenshot({ path: "blazor-screenshot.png", fullPage: true });
console.log("✓ Blazor app verified");

await browser.close();

Note: Blazor WASM apps have longer initial load times due to .NET runtime download. Use networkidle and generous timeouts.

Core Instructions

Quick Visual Verification

When asked to "check the UI" or "verify visually", use this pattern:

Copy// verify-ui.mjs — run with: node verify-ui.mjs
import { chromium } from "playwright";

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

await page.goto("http://localhost:3000");
await page.screenshot({ path: "screenshot.png", fullPage: true });

console.log("Screenshot saved to screenshot.png");
await browser.close();

Python equivalent

Copy# verify_ui.py — run with: python verify_ui.py
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto("http://localhost:3000")
    page.screenshot(path="screenshot.png", full_page=True)
    print("Screenshot saved to screenshot.png")
    browser.close()

Common Verification Patterns

1. Check element exists and is visible

Copyawait page.goto("http://localhost:3000");
const button = page.locator('button:has-text("Submit")');
await expect(button).toBeVisible();

2. Verify text content

Copyawait expect(page.locator("h1")).toHaveText("Welcome");

3. Check multiple viewports (responsive)

Copyconst viewports = [
  { width: 375, height: 667, name: "mobile" },
  { width: 768, height: 1024, name: "tablet" },
  { width: 1440, height: 900, name: "desktop" },
];

for (const vp of viewports) {
  await page.setViewportSize({ width: vp.width, height: vp.height });
  await page.screenshot({ path: `screenshot-${vp.name}.png` });
}

4. Wait for network idle (SPA apps)

Copyawait page.goto("http://localhost:3000", { waitUntil: "networkidle" });

5. Fill form and verify submission

Copyawait page.fill('input[name="email"]', "test@example.com");
await page.click('button[type="submit"]');
await expect(page.locator(".success-message")).toBeVisible();

Headless vs Headed

Copy// Headless (default, faster, for CI)
const browser = await chromium.launch();

// Headed (see the browser, for debugging)
const browser = await chromium.launch({ headless: false, slowMo: 500 });

Integration with Ralph Loop

When verifying frontend tasks:

1. Start dev server in background (if not running):

   Copynpm run dev &
   sleep 3  # wait for server
   

2. Run verification script to capture screenshot

3. Report result — if visual check passes, mark task complete

4. Clean up — kill dev server if started

Verification Checklist

• Dev server is running on expected port
• Page loads without console errors
• Key elements are visible
• Screenshot captured for evidence
• No accessibility violations (optional: use @axe-core/playwright)

Troubleshooting

Example: Full Verification Script

Copy// scripts/verify-ui.mjs
import { chromium } from "playwright";

const BASE_URL = process.env.BASE_URL || "http://localhost:3000";

async function verify() {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  const errors = [];
  page.on("pageerror", (err) => errors.push(err.message));
  page.on("console", (msg) => {
    if (msg.type() === "error") errors.push(msg.text());
  });

  try {
    await page.goto(BASE_URL, { waitUntil: "networkidle", timeout: 30000 });
    await page.screenshot({
      path: "verification-screenshot.png",
      fullPage: true,
    });

    if (errors.length > 0) {
      console.error("Console errors detected:", errors);
      process.exit(1);
    }

    console.log("✓ Visual verification passed");
    console.log("  Screenshot: verification-screenshot.png");
  } catch (err) {
    console.error("✗ Verification failed:", err.message);
    process.exit(1);
  } finally {
    await browser.close();
  }
}

verify();

Run with: node scripts/verify-ui.mjs