test: migrate e2e from Playwright runner to Cucumber

[srid]

Summary

Replace @playwright/test runner with Cucumber.js + raw Playwright. Same Chromium browser, same test coverage (9 scenarios, 42 steps), lower runner overhead.

Architecture

.feature files       →  WHAT to test (plain English / Gherkin)
step_definitions/    →  HOW to test (Playwright calls)
support/world.ts     →  shared state + helpers per scenario
support/hooks.ts     →  setup/teardown (browser, server, screenshots)
cucumber.js          →  config (which files to load, output format)

Key concepts

Gherkin (.feature files)

• Feature: — top-level grouping, one per file. Text after it is documentation.
• Scenario: — one test case. Each runs independently (fresh browser context).
• Given/When/Then/And — steps that get pattern-matched to step definitions. And is an alias for whichever keyword came before it. Convention: Given = setup, When = action, Then = assertion.
• Background: — steps that run before every scenario in the file (shared setup).

Step definitions (step_definitions/*.ts)

Each step in a .feature file is matched to a function by its string pattern:

// {string} matches quoted text, {int} matches bare numbers
When('I resize the viewport to {int}x{int}', async function (this: KoluWorld, w: number, h: number) {
  await this.resizeViewport(w, h);
});

• {string} captures "quoted text" → passed as string parameter
• {int} captures bare numbers → passed as number parameter
• (s) in patterns like {int} time(s) makes the "s" optional (matches "1 time" and "2 times")
• Must use function(), not arrow functions — arrow functions break Cucumber's this binding
• Steps are global — defined once, usable from any .feature file

World (support/world.ts)

The World is the this context shared by all steps within a single scenario:

• Cucumber creates a fresh instance per scenario — no state leaks between tests
• setWorldConstructor(KoluWorld) tells Cucumber which class to use
• Steps communicate within a scenario through World properties (e.g., Given I note the canvas dimensions saves to this.savedCanvas, then Then the canvas should be smaller reads it)
• setDefaultTimeout(60_000) is Cucumber's per-step timeout, independent from Playwright's locator timeouts

Hooks (support/hooks.ts)

Lifecycle in execution order:

BeforeAll  (once)          → start server, launch Chromium
  Before   (per scenario)  → new browser context + page, wire error listener
    Given/When/Then        → steps run using this.page
  After    (per scenario)  → screenshot if failed, close context
AfterAll   (once)          → close browser, kill server

Browser is expensive → created once. Each scenario gets a fresh context (like incognito window: clean cookies, storage, page). The module-level let browser bridges BeforeAll → Before since hooks can't return values.

Why migrate?

• Test-first development: Gherkin scenarios are readable specs — write the scenario before writing the feature
• Future dual-profile: same .feature files can drive both API tests (direct HTTP) and UI tests (Playwright) with different step definition sets
• Lower overhead: ~9s vs Playwright runner's heavier worker/project/reporter initialization

Test plan

• All 9 scenarios (42 steps) pass with just test-dev
• just pc (pre-commit) passes