The playwright-qa Skill — Real Browser Verification for Frontend Tasks
How Datarim's playwright-qa skill fires a real browser pass during /dr-qa, resolves the right tool automatically, and stores screenshots and traces as auditable evidence.
Frontend code changes are easy to break silently. A CSS tweak shifts a layout, a PHP template renders broken HTML, and the only tests that catch it are visual ones. The playwright-qa skill defines when and how a real browser pass runs inside the Datarim /dr-qa stage.
Detection: opt-in by changed files
The skill is not always active. It fires only when the task's changed-file set contains at least one frontend file — .html, .css, .tsx, .vue, .svelte, and PHP files whose body matches an HTML-markup pattern. Detection runs against git diff --name-only from origin/main, configurable via DATARIM_FRONTEND_BASE. Backend-only tasks never trigger a browser pass.
Tool resolution chain
The skill does not assume a fixed tool. A detection script at dev-tools/detect-playwright-tooling.sh walks a five-step chain. First it checks the DATARIM_PLAYWRIGHT override env var. If absent, it probes for a playwright binary on PATH. If missing, it checks for a Playwright MCP server. As a fourth step it looks for a browser executable in BROWSER, PLAYWRIGHT_BROWSER_PATH, or CHROME_PATH. When the chain exhausts without a match, the result is none — the fifth and final state, recorded as a finding, not a hard failure.
Headed and headless modes
By default, the pass runs headless. Passing --headed to /dr-qa requests a visible browser window, with a graceful fallback to headless when no display is available. The stricter --headed-strict flag aborts the pass entirely if $DISPLAY is absent — useful for local runs where a visible browser is required. The same modes are configurable per-task via the qa_browser_mode frontmatter key.
Artifacts and concurrency
Each pass writes output under datarim/qa/playwright-{ID}/run-{ISO-timestamp}/: a screenshot, a Playwright trace bundle, a combined log, and a summary.md that records the tool used, headed mode, exit code, findings, and target URL. A latest/ symlink always points to the most recent run. When multiple agents run /dr-qa on the same task in parallel, they serialize on a per-task lock file via flock, so artifacts never overwrite each other.
See the full skill contract in the playwright-qa reference, or read what Datarim is for the broader picture.