coopcloud_code/home
0
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Wire pixelmatch visual regression — automated screenshot comparison #32

New issue
Closed
opened 2026-03-25 22:26:01 +00:00 by mik-tf · 2 comments
mik-tf commented 2026-03-25 22:26:01 +00:00
Member
Copy link

Current state

Playwright captures screenshots of 10 pages but doesn't compare them. pixelmatch is installed in tests/package.json but not wired to the Playwright output.

Solution

  1. First run: capture reference screenshots (golden images)
  2. Subsequent runs: compare against reference, flag differences
  3. Threshold: < 1% pixel difference = PASS, > 1% = FAIL
  4. Pages: home, login, register, marketplace, docs, about, privacy, terms, cart, dashboard

Implementation

  • tests/visual_compare.mjs: reads Playwright screenshots + golden images, runs pixelmatch
  • tests/golden/: reference screenshots (committed to git)
  • Make target: make test-visual

Signed-off-by: mik-tf

## Current state Playwright captures screenshots of 10 pages but doesn't compare them. pixelmatch is installed in tests/package.json but not wired to the Playwright output. ## Solution 1. First run: capture reference screenshots (golden images) 2. Subsequent runs: compare against reference, flag differences 3. Threshold: < 1% pixel difference = PASS, > 1% = FAIL 4. Pages: home, login, register, marketplace, docs, about, privacy, terms, cart, dashboard ## Implementation - tests/visual_compare.mjs: reads Playwright screenshots + golden images, runs pixelmatch - tests/golden/: reference screenshots (committed to git) - Make target: make test-visual Signed-off-by: mik-tf
mik-tf commented 2026-03-26 00:52:00 +00:00
Author
Member
Copy link

Roadmap position: 2/5 (v2.0 track, issue #26)

Previous baseline: v1.4.0
Next after this: → #29 (hero OSIS)

Signed-off-by: mik-tf

**Roadmap position: 2/5** (v2.0 track, issue #26) Previous baseline: v1.4.0 Next after this: → #29 (hero OSIS) Signed-off-by: mik-tf
mik-tf commented 2026-03-26 01:26:41 +00:00
Author
Member
Copy link

Done — 10 golden snapshots + automated comparison

How it works

  1. First run with --update-snapshots: captures golden images
  2. Subsequent runs: compares against golden, fails if >2% pixel difference
  3. Update golden: npx playwright test --update-snapshots

Pages covered

home, login, register, marketplace, docs, about, privacy, terms, cart, dashboard

Tests: 36 Playwright (includes 10 visual) ALL PASS

7-layer pipeline followed.

Next: #29 (Hero OSIS) [3/5]

Signed-off-by: mik-tf

## Done — 10 golden snapshots + automated comparison ### How it works 1. First run with `--update-snapshots`: captures golden images 2. Subsequent runs: compares against golden, fails if >2% pixel difference 3. Update golden: `npx playwright test --update-snapshots` ### Pages covered home, login, register, marketplace, docs, about, privacy, terms, cart, dashboard ### Tests: 36 Playwright (includes 10 visual) ALL PASS 7-layer pipeline followed. Next: #29 (Hero OSIS) [3/5] Signed-off-by: mik-tf
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels   
meeting-notes

Meeting notes and follow-ups

  
meeting-sensitive

Sensitive meeting; no shared archive or AI processing

  
meeting-transcript

Raw meeting transcript; AI drafts the report

No labels
meeting-notes
meeting-sensitive
meeting-transcript
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
coopcloud_code/home#32
No description provided.