verify

name	verify
description	Verify reader features end-to-end by importing a synthetic volume through the real upload modal and driving the reader with Playwright. Use when a change needs runtime observation in the actual app (not unit tests).

Verifying mokuro-reader changes end-to-end

Launch

npm run dev -- --port 5199 --strictPort   # dedicated port; NEVER bare 5173 (other worktrees own it)

Browser: Playwright from node_modules, executablePath ~/.cache/ms-playwright/chromium-1208/chrome-linux64/chrome (note chrome-linux64, not chrome-linux). Headless is fine. Don't drive the user's Chrome (stale service worker, port collisions, hidden-window rAF freeze).

Synthetic volume fixture

The import needs a .mokuro + matching .cbz (same basename):

• Pages: ImageMagick solid-color portraits with page numbers: magick -size 1400x2000 xc:"#d8f0ff" -bordercolor black -border 8 -resize 1400x2000\! -gravity center -pointsize 400 -annotate 0 "1" 001.png
• vol1.cbz: zip -j vol1.cbz *.png
• vol1.mokuro (all fields required): {version, title, title_uuid, volume, volume_uuid, chars, pages: [{version, img_width, img_height, blocks: [], img_path}]}

Import through the real UI

1. Navbar icon cluster: div.flex.gap-5 > button — nth(2) is the upload icon → opens the Import modal (<dialog>).
2. Gotcha: getByRole() fails to match buttons inside the flowbite modal <dialog> — use CSS locators (page.locator('dialog button', { hasText: ... })) or page.evaluate with textContent.trim() matching.
3. waitForEvent('filechooser') + click the choose files button, setFiles([vol1.mokuro, vol1.cbz]), then click the exact-text Import button.
4. Wait for text=GapTest in the catalog, click series → volume → reader (#/reader/<title>/<uuid>).

Driving the reader

• RTL default: ArrowLeft = forward. Auto view mode pairs pages (cover shows alone first).
• Page elements: #manga-panel [data-page-index] — measure getBoundingClientRect() for gap/scale/pan assertions (natural page width 1400 → scale = rect.width/1400).
• Wheel with modifiers: page.keyboard.down('Control'/'Shift') + page.mouse.wheel(0, ±100) — Playwright applies held modifiers to the wheel event. CDP does NOT swap deltaY→deltaX under shift the way real input does; handlers reading deltaY || deltaX cover both.
• Reader toast: search text nodes for the notification string.
• Reader settings drawer: button.reader-hud.right-3 (there are 3 .reader-hud buttons; .first() is the page-counter). Toggle labels (e.g. "Continuous scroll") are clickable once the drawer opens; close by clicking far from the drawer.
• Persisted settings check: JSON.parse(localStorage.getItem('profiles'))[currentProfile].

Known noise

• [pageerror] Unexpected token '<' on first dev-server load — pre-existing dev artifact, unrelated to features.