playwright-webui-qa

name	playwright-webui-qa
description	Drive the OctoCode WebUI (and other web targets) via Microsoft Playwright to perform real end-to-end verification, screenshots, and DOM assertions.
source	https://github.com/microsoft/playwright
integration	external-binary

playwright-webui-qa

Use this skill whenever a task requires real browser-level verification of the WebUI or any web target. This is the default "UI truth" skill — it replaces any claim of "the page should work" with an observable run.

When to use

• Verifying the OctoCode WebUI renders, loads SSE, and the indicator logic behaves correctly.
• Regressing chat flow, command palette, management panels (including GitHub connection).
• Capturing screenshots to evidence a delivered UI change.
• Automating click / type / assert sequences against any web app under test.

Requirements

• npx playwright install chromium available on the host, or a pre-installed Playwright cache.
• Network access to the target URL (default http://127.0.0.1:10038 for OctoCode).

Minimal invocation

npx --yes playwright@latest codegen http://127.0.0.1:10038

For scripted smoke:

node - <<'JS'
const { chromium } = require('playwright');
(async () => {
  const b = await chromium.launch();
  const p = await b.newPage();
  await p.goto('http://127.0.0.1:10038');
  await p.waitForSelector('#manage-menu-button');
  await p.click('#manage-menu-button');
  await p.click('[data-manage-panel="github"]');
  await p.screenshot({ path: 'tmp-webui-github-panel.png', fullPage: true });
  await b.close();
})();
JS

Integration notes

• This skill is a descriptor: the actual Playwright binaries are resolved at runtime via npx or a workspace-installed node_modules/.bin/playwright.
• The skill does not ship a browser. It assumes the caller will run playwright install once per machine.
• For OctoCode's own CI, wire this into .github/workflows/cli-smoke.yml under a webui-e2e job gated on label run-webui-e2e to avoid pulling 250MB on every push.