Phase 12: cross-app visual/DOM/CSS/functional parity suite (feature)

[devin-ai-integration]

Summary

Adds Phase 12: Visual Parity Validation — a Playwright harness that measures whether the React migration renders identically to the original Angular app. The same specs run twice (a Playwright project per app, both pointed at deterministic mocked HN data) so any drift surfaces as a failing assertion in one app but not the other. A pixelmatch script then diffs the captured screenshots and emits an HTML report.

This PR delivers the measuring harness, not migration fixes. It currently reports that DOM / CSS / functional parity is fully achieved, while pixel parity is not yet met on some pages (see "Current parity status").

What's included

• playwright.config.ts — angular (:4200) and react (:5173) projects; desktop 1280×720 and mobile (iPhone X) 375×812.
• tests/fixtures.ts + tests/helpers.ts — mock every node-hnapi request with identical bytes for both apps; helpers for theme switching, settings, screenshot capture.
• tests/visual-parity.spec.ts (12b) — full-page screenshots across pages × 3 themes × 2 viewports.
• tests/dom-parity.spec.ts (12d) — structural assertions (30 feed items, comment subtree counts, settings inputs, theme class, …).
• tests/style-parity.spec.ts (12e) — computed-style assertions (header/wrapper bg per theme, .body-cover fixed overlay, title font-size follows settings, …).
• tests/functional-parity.spec.ts (12f) — behaviour (settings persistence, pagination, nav, comment collapse, external-link target/rel, mobile back button, dark-mode auto-detect).
• tests/compare-screenshots.ts (12c) — pixelmatch diff → screenshots/diffs/ + screenshots/report.html; classifies PASS <0.5%, WARN ≤2%, FAIL >2%; exits non-zero on any FAIL.
• npm scripts (12g): test:visual:angular, test:visual:react, test:visual:compare, test:parity.
• .github/workflows/visual-parity.yml (12h): checks out this branch + master (Angular), serves both, runs npm run test:parity, uploads screenshots/ + playwright-report/.

Notes for reviewers

• The comparison runner uses tsx instead of ts-node (the plan's suggestion): pixelmatch@7 is ESM-only and tsx runs it without loader flags.
• Test files are excluded from tsconfig.json, so they don't affect the existing lint/build.
• Style/DOM parity specs assert canonical expected values captured from Angular (e.g. header rgb(185, 43, 39) / rgb(38, 50, 56) / rgb(0, 0, 0) per theme); both apps must resolve to those exact values to pass.

Current parity status

Running npm run test:parity against both running apps:

• Functional / DOM / CSS specs: 7/7 pass on each app. Computed styles are byte-identical across all three themes.
• Visual screenshots: 3 PASS / 21 WARN / 16 FAIL. The FAILs are dominated by a real mobile layout gap: the React mobile feed is shorter than Angular (e.g. /news/1 mobile: Angular 2718px vs React 2122px), so full-page diffs accumulate a large vertical offset. A few desktop pages (/jobs/1, settings popup) sit just above the 2% threshold. Desktop heights otherwise match.

Per spec 12h the workflow fails while any FAIL remains — this is the intended gate signalling the migration is not yet at full pixel parity. Closing those gaps is follow-up migration work, not part of this harness PR.

Link to Devin session: https://app.devin.ai/sessions/8415723ddaa94105b9b8f13eb80a2f84
Requested by: @lburgers

---

Devin Review

Status	Commit
🟢 Reviewed	bad954c

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring

[devin-ai-integration]

Phase 12 status + note on the red visual-parity check

The harness runs end-to-end in CI (both apps install, serve, and get exercised):

• DOM / CSS / functional parity: full pass — 59/59 Playwright tests pass on each app (angular and react). Computed styles are byte-identical across all 3 themes.
• Visual pixel parity: not yet met — the compare-screenshots.ts gate reports diffs, so the visual-parity job exits non-zero by design (spec 12h: "fail the workflow if any FAIL"). lint + Snyk pass.

Main diff drivers the report surfaces:

• Mobile layout (~30%): React's mobile feed is shorter than Angular's (e.g. /news/1 mobile is 2718px tall in Angular vs 2122px in React), so full-page diffs accumulate a vertical offset.
• Desktop (~2–3.5%): /jobs/1 and the settings popup sit just over the 2% threshold; remaining desktop diffs are largely font anti-aliasing between CI and local.

So the red check is the harness correctly signalling the migration isn't at full pixel parity yet — not a bug in the suite.

How should the gate behave?

1. Keep it strict as specified (stays red until the React app reaches pixel parity), or
2. Make visual-parity non-blocking (still uploads the report artifact, but doesn't fail CI), or
3. I start closing the actual React parity gaps (mobile spacing, jobs header, settings popup) as follow-up.

(Note: my send_to_user channel is erroring right now, so I'm posting this status here.)

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 5 additional findings.

[staging-devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no bugs or issues to report.

Debug

Playground