closes #345 closes #346: dark mode toggle E2E tests and visual regression tests#409
Merged
Merged
Conversation
added 2 commits
June 1, 2026 14:22
Adds e2e/dark-mode.spec.ts with 8 tests covering all acceptance criteria:
- Clicking ThemeToggle switches from light → dark (class="dark" on <html>)
- Clicking ThemeToggle again switches back to light
- Dark mode preference is persisted after page reload (next-themes localStorage)
- Light mode preference is persisted after page reload
- System dark mode preference respected on first load via
page.emulateMedia({ colorScheme: 'dark' }) with no stored preference
- System light mode preference respected on first load
- Manual dark override persists when OS switches to light
- ThemeToggle button is visible and has correct aria-label
Uses injectMockWallet + seedHuntData helpers so the page renders with a
connected wallet. isDarkMode() and clickThemeToggle() local helpers
abstract repeated page interaction.
Co-Authored-By: JoyAdah <snipequeen@users.noreply.github.com>
…creenshots
Adds e2e/visual-regression.spec.ts covering the four pages listed in the
issue:
Game Arcade (light + dark) — /
Hunt play page (light + dark) — /hunty
Creator dashboard (light + dark) — /dashboard
GameCompleteModal (light + dark) — triggered from /hunty
Each test:
1. Seeds a mock wallet and hunt data via existing helpers.
2. Sets the theme via localStorage + emulateMedia before navigation.
3. Calls waitForLoadState("networkidle") + 400 ms settle time.
4. Calls expect(page).toHaveScreenshot(name, { maxDiffPixelRatio: 0.02,
animations: "disabled" }) to diff against the stored baseline.
maxDiffPixelRatio: 0.02 absorbs minor sub-pixel anti-aliasing differences
between CI (Linux) and local dev (macOS/Windows) without missing real
regressions. animations: "disabled" prevents flaky diffs from in-progress
CSS transitions.
Adds e2e/screenshots/.gitkeep so the baseline directory is tracked by git.
Baseline PNG files are auto-generated on first run and committed; subsequent
CI runs diff against them.
Updates playwright.config.ts to set snapshotDir: "./e2e/screenshots" and
a snapshotPathTemplate that namespaces baselines by projectName so Chromium
and Firefox baselines stay separate.
Co-Authored-By: JoyAdah <snipequeen@users.noreply.github.com>
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
2 participants
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.
closes #345
closes #346
Summary
closes #345 — Playwright E2E tests for dark mode toggle
Adds
e2e/dark-mode.spec.tswith 8 tests covering all specified cases:ThemeToggleswitches from light → dark (class="dark"on<html>)page.reload()page.reload()page.emulateMedia({ colorScheme: "dark" })with no stored preferenceThemeTogglebutton is visible with correctaria-labelUses
injectMockWallet+seedHuntDataso the page renders with a connected wallet. Local helpersisDarkMode()andclickThemeToggle()keep test bodies concise.closes #346 — Visual regression tests with Playwright screenshots
Adds
e2e/visual-regression.spec.tswith 8 tests (light + dark for each page):/)/hunty)/dashboard)Each test: seeds mock wallet + hunts → sets theme via localStorage +
emulateMedia→waitForLoadState("networkidle")+ 400 ms settle →expect(page).toHaveScreenshot(name, { maxDiffPixelRatio: 0.02, animations: "disabled" }).maxDiffPixelRatio: 0.02absorbs sub-pixel anti-aliasing differences between CI (Linux) and local (macOS/Windows).animations: "disabled"prevents flaky diffs from in-progress CSS transitions.Adds
e2e/screenshots/.gitkeepso the baseline directory is tracked. Baseline PNGs are auto-generated on first run with--update-snapshots.Updates
playwright.config.tsto setsnapshotDir: "./e2e/screenshots"and asnapshotPathTemplatethat namespaces baselines by{projectName}.Test plan
pnpm exec playwright test dark-mode— all 8 dark mode tests passpnpm exec playwright test visual-regression --update-snapshots— baselines generated ine2e/screenshots/pnpm exec playwright test visual-regression— all 8 screenshot tests pass against fresh baselines