Add optional Playwright visual regression for design-system primitives #423

New issue

Closed

opened 2026-06-25 14:13:01 +00:00 by PlasticDigits · 2 comments

PlasticDigits commented

2026-06-25 14:13:01 +00:00

(Migrated from gitlab.com)

Parent

#411 — Updated Gap Analysis (recommendation 16 — optional)

Current codebase

Design compliance is manual only via QA_TEMPLATE.md §10 (neo-brutalist borders, hover sounds).
No Percy, Chromatic, or Playwright screenshot baseline for shell-panel, card-neo, btn-* primitives.
docs/design-system.md will codify Cyberminimalist Glass System (sibling issue).

Why needed

Retail launch (#411) and token alignment work will touch many surfaces. Visual regression catches unintentional theme drift that unit tests miss.

Constraints / guardrails

Optional / lower priority — implement only if maintenance cost is acceptable.
Prefer Playwright toHaveScreenshot with committed baselines in-repo (no paid SaaS required).
Scope to primitives story or critical routes (/, /trade, /limits) — not full 31-spec pixel parity.
Stabilize: disable animations, fixed viewport, data-theme=dark default.
Flake budget: allow small threshold or mask dynamic regions (prices, block height).

Relevant files

frontend-dapp/e2e/ (new design-system*.spec.ts or Vitest + Playwright component)
frontend-dapp/src/index.css
docs/design-system.md
QA_TEMPLATE.md §10
playwright.config.ts

Recommended direction

Add Playwright visual tests for: Swap shell, Trade ticket card, Limits mode toggle, modal panel.
Store baselines under frontend-dapp/e2e/screenshots/ (or Playwright default).
Document update workflow in docs/design-system.md § Visual regression.
Run on MR only when frontend-dapp/src/index.css or components/** changes.

Acceptance criteria

At least 4 route-level screenshot baselines committed.
make test-e2e or dedicated make test-visual target runs visual specs.
CI job (optional) or documented local gate for CSS changes.
Screenshot: example baseline image attached to MR for review.

Test plan

Local: npx playwright test design-system --update-snapshots on intentional theme change.
CI: compare mode without update on MR.

Attack / abuse test plan

N/A. Ensure screenshots exclude wallet addresses (use disconnected state).

Verification criteria

Second run without code changes produces zero diff.
README or design doc explains how to accept intentional visual changes.

## Parent [#411 — Updated Gap Analysis](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/work_items/411) (recommendation 16 — optional) ## Current codebase - Design compliance is **manual only** via `QA_TEMPLATE.md` §10 (neo-brutalist borders, hover sounds). - No Percy, Chromatic, or Playwright screenshot baseline for `shell-panel`, `card-neo`, `btn-*` primitives. - `docs/design-system.md` will codify Cyberminimalist Glass System (sibling issue). ## Why needed Retail launch (#411) and token alignment work will touch many surfaces. Visual regression catches unintentional theme drift that unit tests miss. ## Constraints / guardrails - **Optional / lower priority** — implement only if maintenance cost is acceptable. - Prefer Playwright `toHaveScreenshot` with committed baselines in-repo (no paid SaaS required). - Scope to **primitives story** or critical routes (`/`, `/trade`, `/limits`) — not full 31-spec pixel parity. - Stabilize: disable animations, fixed viewport, `data-theme=dark` default. - Flake budget: allow small threshold or mask dynamic regions (prices, block height). ## Relevant files - `frontend-dapp/e2e/` (new `design-system*.spec.ts` or Vitest + Playwright component) - `frontend-dapp/src/index.css` - `docs/design-system.md` - `QA_TEMPLATE.md` §10 - `playwright.config.ts` ## Recommended direction 1. Add Playwright visual tests for: Swap shell, Trade ticket card, Limits mode toggle, modal panel. 2. Store baselines under `frontend-dapp/e2e/screenshots/` (or Playwright default). 3. Document update workflow in `docs/design-system.md` § Visual regression. 4. Run on MR only when `frontend-dapp/src/index.css` or `components/**` changes. ## Acceptance criteria - [ ] At least 4 route-level screenshot baselines committed. - [ ] `make test-e2e` or dedicated `make test-visual` target runs visual specs. - [ ] CI job (optional) or documented local gate for CSS changes. - [ ] **Screenshot:** example baseline image attached to MR for review. ## Test plan - Local: `npx playwright test design-system --update-snapshots` on intentional theme change. - CI: compare mode without update on MR. ## Attack / abuse test plan - N/A. Ensure screenshots exclude wallet addresses (use disconnected state). ## Verification criteria - Second run without code changes produces zero diff. - README or design doc explains how to accept intentional visual changes.

PlasticDigits commented

2026-06-25 14:13:23 +00:00

(Migrated from gitlab.com)

mentioned in issue #411

PlasticDigits (Migrated from gitlab.com) closed this issue

2026-06-25 20:40:25 +00:00

PlasticDigits commented

2026-06-25 20:40:26 +00:00

(Migrated from gitlab.com)

Rejected due to high maintenance costs