source-command-qa-visual-test

name	source-command-qa-visual-test
description	Visual / browser-driven testing harness — scaffold + run screenshot/visual-regression checks (qa-e2e + design-team).

source-command-qa-visual-test

Use this skill when the user asks to run the migrated source command visual-test.

Command Template

🖼️ Visual test (qa-e2e + design-team)

Add a browser-driven, visual layer on top of behavioural e2e: open the running app, exercise a flow, and verify by screenshot / visual regression. The kit scaffolds; the browser runner is a project dependency (never the kit's zero-dep hot path).

Act on $ARGUMENTS — route to qa-e2e, pair with design-team for baselines:

status

node contextkit/tools/scripts/visual-test.mjs status

Reports whether a visual harness exists (Playwright/Cypress for JS, pytest-playwright for Python) and what's missing.

scaffold

node contextkit/tools/scripts/visual-test.mjs scaffold          # auto-detect stack
node contextkit/tools/scripts/visual-test.mjs scaffold --python

Writes a starter (write-if-missing): a Playwright config + a tests/visual/ screenshot baseline. Then install the runner (the command prints it): npm i -D @playwright/test && npx playwright install (JS) or pip install pytest-playwright && playwright install (Python).

run / baseline

Run the project's visual suite (e.g. npx playwright test tests/visual). The first run records baselines; later runs diff against them. Treat an unintended visual diff as a failure; update baselines deliberately (--update-snapshots) and have design-team review intentional changes.

judgment (qa-e2e)

• Cover the few screens where the look is the contract; don't snapshot everything.
• Stabilize: fixed viewport, seeded data, masked dynamic regions, wait on network-idle.
• A change isn't "done" until the visual check is green — wired into /qa-signoff and the /ship gate.