terainia/test/scenarios/ui-hotbar.yaml
Maximus Gorog 3ed16c2aaf Performant UI test harness — attach to real Chrome
Per your direction: tests must be able to debug UI/UX behaviors and
must be performant. Playwright's bundled Chromium falls to SwiftShader
on Linux which is fine for visual scenarios but tanks anything where
fps matters. New attach-mode lets us drive YOUR Chrome (hardware GPU)
without needing Playwright to spawn its own.

test/attach.py:
  - One-shot health check that connects to localhost:9222 (Chrome
    already running with --remote-debugging-port). Doesn't spawn,
    doesn't close. Just confirms attach + reports the FPS HUD value.
  - peek.py and run.py already attach via CDP, so they work as-is
    once Chrome is started with the debug port.

test/README.md:
  - New "Two modes" section up front: attach (your real Chrome,
    hardware) vs launch (Playwright Chromium, software). Each has a
    legitimate use; perf-sensitive work goes through attach.
  - Workflow:
      google-chrome --remote-debugging-port=9222 \\
        --user-data-dir=/tmp/voxel-dev-chrome http://localhost:8080/
      python3 attach.py        # health check
      python3 run.py scenarios/ui-menu-open-close.yaml

New UI scenarios that drive interactions via DOM events / wasm calls,
not pixel screenshots. Render-independent, fast on any backend:

  ui-menu-open-close.yaml    Click ≡ → assert menu-open class →
                              click resume → assert closed.
  ui-hotbar.yaml             pointerdown on slot 4 → assert .active
                              moved. Digit1 keypress → assert .active
                              back to slot 0.
  ui-respawn.yaml            teleport into void → wait → assert
                              is_alive()===false + body.dead class +
                              death screen visible. Click respawn-btn
                              → assert hp===20, alive===true.
  ui-settings-sliders.yaml   Slider .value = N + dispatch 'input' →
                              assert displayed value updates → unwind
                              so the page isn't left frozen.

README updates list all scenarios. No code in the game changed —
this is pure test-harness additions.
2026-05-24 17:41:05 -06:00

30 lines
1.3 KiB
YAML

name: ui-hotbar
description: |
Verify hotbar selection via both DOM click and keyboard. The wasm
`select_block(u8)` exposes the selected id to the game; we read it
back via the menu's persistent setting OR by inspecting which slot
has the .active class. This test does not depend on rendering — it
drives DOM and asserts CSS / state.
steps:
- wait_for: "window.voxel_game && document.querySelectorAll('#hotbar .slot').length >= 10"
# Click slot 4 (sand). Verify .active class moves.
- eval: |
const slots = document.querySelectorAll('#hotbar .slot');
slots[3].dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
- wait: 150
- assert: "document.querySelectorAll('#hotbar .slot')[3].classList.contains('active')"
- assert: "!document.querySelectorAll('#hotbar .slot')[0].classList.contains('active')"
# Press keyboard Digit1 to switch to slot 0 (grass).
- key: Digit1
- wait: 150
- assert: "document.querySelectorAll('#hotbar .slot')[0].classList.contains('active')"
- assert: "!document.querySelectorAll('#hotbar .slot')[3].classList.contains('active')"
# Cycle wheel — bind a wheel event programmatically (skip — the
# real test is that mouse wheel cycles the hotbar; covered by
# the production app, hard to drive synthetically here).
- screenshot: hotbar-state.png