# Visual Test

> Run or add Playwright visual specs and know when a layout or CSS change needs npm run test:visual. Use after first-paint, panel-layout, or PurgeCSS safelist changes, or when adding a Playwright case.

- Skill: `liberatedpixelcup/visual-test` (Agent Skill)
- Install (CLI): `npx skillmds@latest add liberatedpixelcup/visual-test`
- Raw SKILL.md: https://api.skillmd.com/api/skills/liberatedpixelcup/visual-test/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: liberatedpixelcup (https://skillmd.com/u/liberatedpixelcup)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/liberatedpixelcup/visual-test

---


# Visual tests

Run `npm run test:visual` after a change that affects first paint, panel
layout, or a class in
[`vite/purgecss-critical-safelist.ts`](../../../vite/purgecss-critical-safelist.ts).

Add cases under [`tests/visual/`](../../../tests/visual/). Reuse waits in
[`home-helpers.ts`](../../../tests/visual/home-helpers.ts). Wait for catalog
readiness via `__LPC_waitCatalogAllReady` (installed in
[`sources/install-item-metadata.ts`](../../../sources/install-item-metadata.ts)). Do not import visual specs
from `tests/tests.js`. They are not Codecov-instrumented.

Argos upload needs `ARGOS_TOKEN`. Isolated run:
[run-one-spec](../run-one-spec/SKILL.md). Walkthrough:
[Visual regression tests](../../../CONTRIBUTING.md#visual-regression-tests-playwright-argos).
CLS measurement is [cls](../cls/SKILL.md) / [CLS.md](../../../CLS.md); Argos
does not replace `profile:cls`.