Skip to content

test(web): align screenshot fixtures with pencil design and harden visual diff - #368

Merged
ValgulNecron merged 4 commits into
masterfrom
implement_visual_regression_ci
Sep 9, 2026
Merged

test(web): align screenshot fixtures with pencil design and harden visual diff#368
ValgulNecron merged 4 commits into
masterfrom
implement_visual_regression_ci

Conversation

@ValgulNecron

@ValgulNecron ValgulNecron commented Sep 9, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Owner

Summary

  • Align mock fixtures with Pencil design baselines:
    • Replaced generic servers with 3 exact servers matching F9pUrx table rows (mc-survival, mc-test, user-server-test).
    • Added dynamic server variant handling in MSW (e2e_server_variant cookie) for mc-survival (idle, asleep, never-sleeps, pvc-failed, failed).
    • Added exact 9 Minecraft log lines from Pencil baseline kPmoo and suppressed log stream for failed variant FtdkI.
    • Cleared WebSocket console stream output lines to keep terminal clean as — connected — matching Xn5ns.
    • Updated files list endpoint to return the 16 exact files/folders from Burtr.
    • Updated players endpoint with 0 online, max 20, and whitelist containing alice matching dPP50.
    • Configured 3 cluster nodes (12 vCPUs) and 77 GB / 86 GB storage stats matching design.
    • Set default login user to admin / admin for AD avatar initials.
  • Slice 1 & Slice 2a test specs:
    • Pre-filled credentials in N1GkB and jmoi3 with valgul and 12-char masked password matching Pencil design baselines.
    • Configured SSO providers in ljdA5 for Keycloak and Google.
    • Retargeted all Server Detail tests to mc-survival with variant cookies and cleared cookies between runs.
  • Visual diff engine hardening:
    • Implemented 4x4 regional block grid diff ratio checks (--block-threshold CLI flag, default 16%) in compare-screenshots.mjs to eliminate canvas dilution where dark empty areas masked component-level mismatches.

Summary by CodeRabbit

  • Updates
    • Updated login and SSO screens to reflect the rebuilt authentication experience, including Keycloak and Google sign-in options.
    • Refreshed server views with updated Minecraft server states, cluster information, status metrics, console output, logs, and file data.
    • Improved handling and display of idle, sleeping, failed, and never-sleeping server scenarios.
  • Quality Improvements
    • Enhanced screenshot comparison checks to detect both overall and regional visual differences more accurately.

@ValgulNecron
test(web): align screenshot fixtures with pencil design and harden vi…
db1cc76 
…sual diff against dilution

- Enrich screenshot mock data and handlers to faithfully reproduce Pencil design baselines (mc-survival dynamic variants, exact Minecraft log output, 16-entry files list, empty online roster, and 3-node cluster storage stats).
- Update Slice 1 and Slice 2a screenshot test specs to populate design inputs and target mc-survival variant cookies.
- Add 4x4 regional block grid diff ratio checks to compare-screenshots.mjs to protect against dark-canvas dilution hiding localized UI regressions.

Co-Authored-By: Gemini 3.8 Flash <noreply@google.com>
Signed-off-by: valgulnecron <39313199+ValgulNecron@users.noreply.github.com>
@ValgulNecron ValgulNecron added type: test Test additions or changes type: ci CI, workflows, or build tooling area: web React dashboard labels Sep 9, 2026
@coderabbitai

coderabbitai Bot commented Sep 9, 2026 •
edited
Loading

Copy link
Copy Markdown

Review Change StackReview Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: f0df6108-5c25-40e3-8546-9b06570598e1

📥 Commits

Reviewing files that changed from the base of the PR and between 60c29e4 and 9f5fd33.

📒 Files selected for processing (5)
  • web/e2e/screenshots/slice1.spec.ts
  • web/e2e/screenshots/slice2a.spec.ts
  • web/scripts/compare-screenshots.mjs
  • web/src/test/handlers.ts
  • web/src/test/screenshotData.ts

Walkthrough

The PR rebuilds screenshot fixtures and mock handlers for the updated login and server UI. It updates end-to-end scenarios to use cookie-selected server variants and adds regional screenshot diff thresholds and reporting.

Changes

Screenshot validation

Layer / File(s) Summary
Rebuild screenshot fixture data
web/src/test/screenshotData.ts		 The dataset now defines Minecraft capabilities, three replacement servers, three cluster nodes, cluster statistics, lifecycle events, updated user data, shorter logs, and empty console output.
Wire mock authentication and server variants
web/src/test/handlers.ts		 Mock authentication uses the new invalid-password rules and providers. Server handlers support cookie-selected states and return updated cluster, status, player, file, and log data.
Align end-to-end screenshot scenarios
web/e2e/screenshots/slice1.spec.ts, web/e2e/screenshots/slice2a.spec.ts		 Login tests use the rebuilt form and providers. Server tests use /servers/mc-survival, clear cookies between tests, select variants with cookies, and assert updated output.
Add regional screenshot diff evaluation
web/scripts/compare-screenshots.mjs		 The comparison script adds configurable 4×4 regional thresholds, combines regional and global pass criteria, and reports regional results in console and GitHub summaries.

Estimated code review effort: 4 (Complex) | ~45 minutes

Change: Other

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch implement_visual_regression_ci

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

ValgulNecron and others added 2 commits September 10, 2026 00:59
@ValgulNecron
Merge branch 'master' into implement_visual_regression_ci
69c98ca 
Co-Authored-By: Gemini 3.8 Flash <noreply@google.com>
Signed-off-by: valgulnecron <39313199+ValgulNecron@users.noreply.github.com>
@ValgulNecron
fix(web): fix endpoint ports and clusterStats properties in screensho…
e6948f3 
…tData

Co-Authored-By: Gemini 3.8 Flash <noreply@google.com>
Signed-off-by: valgulnecron <39313199+ValgulNecron@users.noreply.github.com>
@github-actions

github-actions Bot commented Sep 9, 2026 •
edited
Loading

Copy link
Copy Markdown

CI Report - 9f5fd33

run 34415640848 - attempt 1

0 failed - 6 passed - 11 skipped - 9m16s elapsed

Coverage

Module Measured Gate Margin
web L94.76 S93.27 B87.73 F90.95 L92 S92 B82 F76 +1.27

Changed

Area Files +/-
web/ 5 +468/-331

Slowest jobs

Job Duration
e2e web live / amd64 (kind) 5m21s
web e2e (mock) 4m53s
e2e web live / arm64 (kind) 4m17s
build e2e images (arm64) 3m43s
build e2e images 2m54s

e2e buckets run

multicluster, upgrade

@ValgulNecron
fix(web): support failed-login and failed-server screenshot captures …
9f5fd33 
…and calibrate SeizD threshold

Co-Authored-By: Gemini 3.8 Flash <noreply@google.com>
Signed-off-by: valgulnecron <39313199+ValgulNecron@users.noreply.github.com>
@ValgulNecron
ValgulNecron merged commit ffb20b0 into master Sep 9, 2026
28 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

area: web React dashboard type: ci CI, workflows, or build tooling type: test Test additions or changes

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@ValgulNecron