feedBack/tests/browser
Byron Gamatos 3b485fe62b
feat(v3): tabbed, card-row settings page + per-plugin settings category (#584)
Replace the single long scrolling v3 settings screen with a horizontal tab
bar (Gameplay / Audio / Graphics / Keybinds / Progression / Mic / Plugins /
System) over card rows (icon + title + description, control on the right) with
a per-category Reset.

- static/v3/index.html: tab bar + card-row markup (ids keep hydrating through
  the unchanged app.js loadSettings()/persistSetting() path).
- static/v3/settings.js (new): tab switching + active-tab persistence
  (localStorage 'v3-settings-tab'), per-category reset, read-only Keybinds
  reference from window.getAllShortcuts().
- static/v3/v3.css: plain CSS, no Tailwind rebuild.
- Per-plugin settings tab: new optional settings.category in plugin.json →
  plugins/__init__.py surfaces settings_category; app.js mounts each plugin
  <details> into #plugin-settings-<category> (fallback: Plugins tab).
  highway_3d ships category: "graphics".
- New gameplay settings: countdown_before_song (wired end-to-end, default off);
  miss_penalty + fail_behavior (persist-only stubs); "Note highway speed"
  surfaces existing master_difficulty.
- New POST /api/settings/reset clears whitelisted keys back to defaults.

Tests: test_settings_api.py, test_plugins.py::test_settings_category_parsed_from_manifest,
tests/browser/settings-tabbed.spec.ts. 179 passed locally.

Ported from the pre-rename feat/v3-settings-tabbed WIP onto current main
(slopsmith→feedBack rename applied; settings-screen markup conflict resolved
in favour of the new tabbed layout — all prior setting ids preserved).

Closes #579

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-23 18:06:46 +02:00
..
audio-session-compat.spec.ts rename: slopsmith → feedBack, byron → got-feedBack (#537) 2026-06-23 11:03:01 +02:00
audio-session.spec.ts rename: slopsmith → feedBack, byron → got-feedBack (#537) 2026-06-23 11:03:01 +02:00
basic-load.spec.ts rename: slopsmith → feedBack, byron → got-feedBack (#537) 2026-06-23 11:03:01 +02:00
capability-inspector.spec.ts Clean release snapshot 2026-06-16 18:47:13 +02:00
check-errors.spec.ts rename: slopsmith → feedBack, byron → got-feedBack (#537) 2026-06-23 11:03:01 +02:00
default-arrangement-pin.spec.ts rename: slopsmith → feedBack, byron → got-feedBack (#537) 2026-06-23 11:03:01 +02:00
highway-3d-lefty.spec.ts rename: slopsmith → feedBack, byron → got-feedBack (#537) 2026-06-23 11:03:01 +02:00
keyboard-shortcuts.spec.ts Clean release snapshot 2026-06-16 18:47:13 +02:00
progress-shop.spec.ts rename: slopsmith → feedBack, byron → got-feedBack (#537) 2026-06-23 11:03:01 +02:00
README.md rename: slopsmith → feedBack, byron → got-feedBack (#537) 2026-06-23 11:03:01 +02:00
settings-tabbed.spec.ts feat(v3): tabbed, card-row settings page + per-plugin settings category (#584) 2026-06-23 18:06:46 +02:00
wake-lock.spec.ts rename: slopsmith → feedBack, byron → got-feedBack (#537) 2026-06-23 11:03:01 +02:00

Browser Tests

This directory contains Playwright browser tests for FeedBack keyboard shortcuts.

Prerequisites

  1. FeedBack web server: Tests need the server reachable at http://localhost:8000. Playwright auto-starts it via webServer.command in playwright.config.ts, so manual startup is optional. Start it manually if you want to debug the server, run tests outside Playwright, or skip the per-run boot delay:

    LIBRARY_PATH=/path/to/your/library docker compose up -d
    

    Playwright reuses an already-running server locally (reuseExistingServer: true).

  2. Node.js installed: Required for running Playwright tests

    node --version  # Should be v18 or higher
    

Installation

Install dependencies:

npm install

Install Playwright browsers:

npm run install:playwright

Running Tests

Run all tests:

npm test

Run tests in headed mode (watch the browser):

npm run test:headed

Debug tests with interactive inspector:

npm run test:debug

Test Files

  • basic-load.spec.ts - Basic app load and shortcut registry availability
  • check-errors.spec.ts - Check for console errors
  • keyboard-shortcuts.spec.ts - Comprehensive keyboard shortcut tests

Writing Tests

Tests use Playwright's test API. Example:

import { test, expect } from '@playwright/test';

test('my test', async ({ page }) => {
  await page.goto('/');
  await page.waitForSelector('.screen.active');
  
  // Interact with the page
  await page.keyboard.press('?');
  
  // Assert
  await expect(page.locator('#shortcuts-modal')).toBeVisible();
});

Troubleshooting

Container won't start

If the Docker container exits immediately, check the logs:

docker compose logs

Common issue: Missing dependencies. Rebuild the container:

docker compose build --no-cache
docker compose up -d

Tests timeout

Increase timeout in playwright.config.ts if needed.

LIBRARY_PATH not set

Make sure to set the LIBRARY_PATH environment variable:

LIBRARY_PATH=~/feedBack-library docker compose up -d

CI/CD

In CI environments, Playwright will:

  • Run tests in headless mode
  • Retry failed tests up to 2 times
  • Generate HTML report with screenshots/videos on failure