playwright-ui-smoke-setup

name	playwright_ui_smoke_setup
description	Add or maintain Playwright Chromium UI smoke checks in JavaScript/TypeScript web projects, including Playwright config, route-smoke tests, GitHub Actions workflows, and npm/pnpm/yarn/bun commands.
metadata	{"openclaw":{"requires":{"bins":["node"]}}}

Playwright UI Smoke Setup

Boundary

Use this skill for baseline route-smoke coverage: install Playwright, generate playwright.config.ts, route marker tests, and a small GitHub Actions workflow.

If the user asks for a repeatable browser task, reusable task-specific script, web extraction/form-fill automation, visual proof, screenshots as evidence, or "browser task -> verified artifact", use browser_task_artifact instead. A stable artifact can later be promoted into route smoke or CI, but the artifact workflow should prove the task first.

Preferred Path

Use the public CLI whenever possible:

npx playwright-ui-smoke-kit init

For monorepos:

npx playwright-ui-smoke-kit init --repo-root . --app-dir apps/web

If the app depends on shared frontend packages, add them to the generated workflow:

npx playwright-ui-smoke-kit init \
  --repo-root . \
  --app-dir apps/web \
  --workflow-path "packages/ui/**"

When the project shape is clear, use non-interactive flags:

npx playwright-ui-smoke-kit init \
  --yes \
  --template vite-app \
  --web-command "npm run dev -- --host 127.0.0.1" \
  --web-port 5173 \
  --route "/::Home"

Workflow

1. Inspect package.json, lock files, and existing scripts.
2. Detect npm, pnpm, yarn, or bun.
3. Choose vite-app, next-app, app-plus-api, or static-site.
4. Select stable, non-mutating routes and visible markers.
5. Avoid overwriting existing Playwright files unless the user explicitly requests replacement.
6. Keep GitHub Actions cost-aware: base-branch triggers, concurrency cancellation, short timeouts, and generated path filters.
7. Use --workflow-all-changes only when the project needs browser smoke on every file change.
8. Do not make a path-filtered browser workflow the only required branch-protection check.
9. Use npx playwright-ui-smoke-kit doctor to check an existing setup.
10. Use npx playwright-ui-smoke-kit add-route "/dashboard::Dashboard" for later route additions.
11. Run the generated smoke:web-ui script.

Manual Fallback

If the CLI is unavailable, manually add:

playwright.config.ts
tests/ui-smoke.spec.ts
.github/workflows/playwright-ui-smoke.yml

Install Playwright locally and add:

{
  "scripts": {
    "smoke:web-ui": "playwright test"
  }
}

The smoke test should open routes, assert visible text markers, collect console.error and pageerror, and avoid mutating application state.

OpenClaw Installation

Install this skill as a shared local OpenClaw skill:

npx playwright-ui-smoke-kit install-skill openclaw

Install both bundled OpenClaw skills:

npx playwright-ui-smoke-kit install-skill openclaw --skill all

Manual install:

mkdir -p ~/.openclaw/skills
cp -R skills/openclaw/playwright_ui_smoke_setup ~/.openclaw/skills/
openclaw gateway restart
openclaw skills list
openclaw skills check playwright_ui_smoke_setup

Workspace-local installs can use skills/playwright_ui_smoke_setup/ or .agents/skills/playwright_ui_smoke_setup/.