Repository navigation
Visual layout checks on signed-in screens (h3-studio#897) - #360
Merged
Merged
Conversation
…-studio#897) audit:visual opens the storyboard dock (playhead at 0:00 and mid-film), the shot takes panel and trim bar, and the enhance dialog at two viewports, replaying one qa-user project's API traffic (no login, no network), and fails on geometry rules: playhead grip over the pictures or labels, last ruler label past the bar, in-use dot off the quality badge's line, trim fill not clipped to the bar, plus the layout audit's generic checks. Verified to fail on the pre-fix CSS. The fixture is sanitised (no cookies, signed URLs, e-mails or generation internals) for this public repo.
This was referenced Oct 31, 2026
Merged
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Owner 2026-10-31: automate the alignment/overlap checks instead of the owner spotting them by eye.
What runs:
npm run audit:visual(new CI step afteraudit:layout; failing screens uploaded asvisual-failures). It opens, at 1440×900 and 1280×760:and checks geometry rules per screen (
no-overlap,same-midline,inside,starts-above,left-of,clips-like) plus the existing layout-audit checks (offscreen, clipped text, spilling buttons, tiny text, page errors), now shared viatools/layout-shared.mjs.Signed-in without login:
tools/visual/storyboard.haris oneqa-userproject's API traffic recorded once from staging and replayed with PlaywrightrouteFromHAR; every other request is refused (videos blank, stable). CI never signs in.tools/visual/sanitize-har.mjsstrips headers, cookies, signed URLs, e-mails and generation internals (steps, provider, cost) — this repo is public; grep confirmed none remain. Re-recording steps intools/visual/README.md.Proof: with the pre-#358/#359 CSS the run fails exactly on today's bugs — playhead grip 12 px over the pictures, last ruler label past the bar, in-use dot 10.5 px off the badge line, trim fill missing; with current CSS all 8 screen×viewport checks pass.
References (ideas, no code copied): Playwright HAR replay and visual comparisons (built-in); lost-pixel/lost-pixel and reg-viz/reg-suit (screenshot-baseline workflows, planned as the next step with Linux-generated baselines); Galen Framework (layout-spec rules like "near/inside/aligned", Java, unmaintained) for the declarative geometry rules. Screenshot baselines are left for a follow-up so they can be generated on the CI image.