Fix timer tests and add baseline screenshot update script

- Fix timer.spec.ts button click coordinates (slow: y=125, fast: y=265, reset: y=390)
- Add scripts/update-baseline-screenshots.sh for updating baselines
- Update all baseline screenshots

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

scripts/update-baseline-screenshots.sh

@@ -0,0 +1,28 @@
+#!/bin/bash
+# Update baseline screenshots from test results
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+TESTS_DIR="$SCRIPT_DIR/../tests"
+SOURCE_DIR="$TESTS_DIR/test-results"
+DEST_DIR="$TESTS_DIR/baseline-screenshots"
+
+if [ ! -d "$SOURCE_DIR" ]; then
+    echo "Error: test-results directory not found at $SOURCE_DIR"
+    echo "Run 'npm test' first to generate screenshots"
+    exit 1
+fi
+
+mkdir -p "$DEST_DIR"
+
+count=$(ls -1 "$SOURCE_DIR"/*.png 2>/dev/null | wc -l)
+if [ "$count" -eq 0 ]; then
+    echo "No screenshots found in $SOURCE_DIR"
+    exit 1
+fi
+
+echo "Copying $count screenshots to baseline..."
+cp "$SOURCE_DIR"/*.png "$DEST_DIR/"
+
+echo "Updated baseline screenshots:"
+ls -1 "$DEST_DIR"/*.png | wc -l
+echo "screenshots in $DEST_DIR"

tests/e2e/timer.spec.ts

@@ -1,113 +1,117 @@
-import { test, expect, waitForApp } from './utils/fixtures';
+import { test, expect, tryLoadApp, getCanvasBox } from './utils/fixtures';
 
 test.describe('wxTimer Tests', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/standalone/timer/timer_test.html');
-    // Wait for app to initialize
-    await page.waitForFunction(() => {
-      return document.querySelector('canvas') !== null;
-    }, { timeout: 30000 });
-    await page.waitForTimeout(1000);
-  });
 
   test('Timer test app loads successfully', async ({ page, testLogger }) => {
-    await page.waitForTimeout(500);
+    await page.goto('/standalone/timer/timer_test.html');
+    const loaded = await tryLoadApp(page);
 
-    const hasStartupLog = testLogger.consoleLogs.some(log =>
+    await page.screenshot({ path: 'test-results/timer-01-loaded.png', fullPage: true });
-      log.includes('TIMER_TEST') && log.includes('started successfully')
-    );
-
-    await page.screenshot({ path: 'test-results/timer-01-loaded.png' });
 
+    expect(loaded, 'Timer app should load').toBe(true);
     expect(testLogger.errors.filter(e => !e.includes('favicon'))).toHaveLength(0);
   });
 
   test('Slow timer can be started and stopped', async ({ page, testLogger }) => {
+    await page.goto('/standalone/timer/timer_test.html');
+    const loaded = await tryLoadApp(page);
+    if (!loaded) {
+      test.skip();
+      return;
+    }
+
+    const box = await getCanvasBox(page);
+    const centerX = box.width / 2;
+
+    // Click Start button for slow timer (left of center in button row)
+    await page.mouse.click(box.x + centerX - 40, box.y + 125);
     await page.waitForTimeout(500);
 
-    const canvas = page.locator('canvas');
+    await page.screenshot({ path: 'test-results/timer-02-started.png', fullPage: true });
-
-    // Click Start button for slow timer
-    await canvas.click({ position: { x: 240, y: 125 } });
-    await page.waitForTimeout(500);
-
-    await page.screenshot({ path: 'test-results/timer-02-started.png' });
 
     const hasStartEvent = testLogger.consoleLogs.some(log =>
       log.includes('Slow timer started')
     );
-    expect(hasStartEvent).toBe(true);
+    expect(hasStartEvent, 'Should log slow timer started').toBe(true);
 
     // Wait for timer tick
     await page.waitForTimeout(1500);
-    await page.screenshot({ path: 'test-results/timer-03-ticked.png' });
+    await page.screenshot({ path: 'test-results/timer-03-ticked.png', fullPage: true });
 
-    const hasTickEvent = testLogger.consoleLogs.some(log =>
+    // Click Stop button (right of center in button row)
-      log.includes('TIMER_TICK')
+    await page.mouse.click(box.x + centerX + 40, box.y + 125);
-    );
-
-    // Click Stop button
-    await canvas.click({ position: { x: 320, y: 125 } });
     await page.waitForTimeout(500);
 
-    await page.screenshot({ path: 'test-results/timer-04-stopped.png' });
+    await page.screenshot({ path: 'test-results/timer-04-stopped.png', fullPage: true });
 
     const hasStopEvent = testLogger.consoleLogs.some(log =>
       log.includes('Slow timer stopped')
     );
-    expect(hasStopEvent).toBe(true);
+    expect(hasStopEvent, 'Should log slow timer stopped').toBe(true);
   });
 
   test('Fast timer can be started and updates gauge', async ({ page, testLogger }) => {
+    await page.goto('/standalone/timer/timer_test.html');
+    const loaded = await tryLoadApp(page);
+    if (!loaded) {
+      test.skip();
+      return;
+    }
+
+    const box = await getCanvasBox(page);
+    const centerX = box.width / 2;
+
+    // Click Start Fast button (left of center in fast timer row)
+    await page.mouse.click(box.x + centerX - 40, box.y + 265);
     await page.waitForTimeout(500);
 
-    const canvas = page.locator('canvas');
+    await page.screenshot({ path: 'test-results/timer-05-fast-started.png', fullPage: true });
-
-    // Click Start Fast button
-    await canvas.click({ position: { x: 220, y: 260 } });
-    await page.waitForTimeout(500);
-
-    await page.screenshot({ path: 'test-results/timer-05-fast-started.png' });
 
     const hasFastStartEvent = testLogger.consoleLogs.some(log =>
       log.includes('Fast timer started')
     );
-    expect(hasFastStartEvent).toBe(true);
+    expect(hasFastStartEvent, 'Should log fast timer started').toBe(true);
 
     // Wait for multiple fast ticks
     await page.waitForTimeout(1000);
-    await page.screenshot({ path: 'test-results/timer-06-fast-running.png' });
+    await page.screenshot({ path: 'test-results/timer-06-fast-running.png', fullPage: true });
 
-    // Click Stop Fast button
+    // Click Stop Fast button (right of center in fast timer row)
-    await canvas.click({ position: { x: 340, y: 260 } });
+    await page.mouse.click(box.x + centerX + 40, box.y + 265);
     await page.waitForTimeout(500);
 
-    await page.screenshot({ path: 'test-results/timer-07-fast-stopped.png' });
+    await page.screenshot({ path: 'test-results/timer-07-fast-stopped.png', fullPage: true });
 
     const hasFastStopEvent = testLogger.consoleLogs.some(log =>
       log.includes('Fast timer stopped')
     );
-    expect(hasFastStopEvent).toBe(true);
+    expect(hasFastStopEvent, 'Should log fast timer stopped').toBe(true);
   });
 
   test('Reset counters button works', async ({ page, testLogger }) => {
-    await page.waitForTimeout(500);
+    await page.goto('/standalone/timer/timer_test.html');
+    const loaded = await tryLoadApp(page);
+    if (!loaded) {
+      test.skip();
+      return;
+    }
 
-    const canvas = page.locator('canvas');
+    const box = await getCanvasBox(page);
+    const centerX = box.width / 2;
 
-    // Start and run timer briefly
+    // Start slow timer briefly
-    await canvas.click({ position: { x: 240, y: 125 } });
+    await page.mouse.click(box.x + centerX - 40, box.y + 125);
     await page.waitForTimeout(1500);
 
-    // Click Reset All Counters
+    // Click Reset All Counters (centered button, below fast timer section)
-    await canvas.click({ position: { x: 300, y: 320 } });
+    await page.mouse.click(box.x + centerX, box.y + 390);
     await page.waitForTimeout(500);
 
-    await page.screenshot({ path: 'test-results/timer-08-reset.png' });
+    await page.screenshot({ path: 'test-results/timer-08-reset.png', fullPage: true });
 
     const hasResetEvent = testLogger.consoleLogs.some(log =>
       log.includes('Counters reset')
     );
-    expect(hasResetEvent).toBe(true);
+    expect(hasResetEvent, 'Should log counters reset').toBe(true);
   });
 });