test(determinism): deterministic waits + stableShot screenshots; drop blind sleeps/ifs/retries

Make the Playwright e2e + kicad suites deterministic so screenshot flake stops
tracing to timing races.

- Blind page.waitForTimeout -> condition waits (expect.poll, web-first
  assertions, waitUntil) + readiness helpers (waitForWxApp, waitForCanvasApp).
  Remaining sleeps are documented interaction dwells (annotated).
- Defensive "if element exists" branches -> loud asserts; label-fallback chains
  -> normalized clickMenuItemByText. First-run wizard for/if loops removed by
  seeding calculator/gerbview/pcbnew HTMLs.
- Screenshots: new stableShot(page, name) settles the render in-page (canvas
  hash over rAF) then writes a raw PNG to test-results/ for the existing offline
  gate (tools/screenshots vs baseline-screenshots). Replaces toHaveScreenshot,
  which did inline compare + its own baselines and had decoupled the specs from
  the real gate. scale:'css' pinned.
- retries: 0 in both configs.
- Guard: tests/tools/lint-determinism.ts (npm run lint:determinism) bans blind
  sleeps / toHaveScreenshot / inline retries / swallowed catches in specs;
  documented exceptions carry a marker. Rules in tests/TESTING.md.

Assertions, coverage, and renders unchanged (semantic-equivalence reviewed;
captures pixel-identical modulo inherent timer/timestamp/3d-raytrace variance).
Both suites green at retries:0 (e2e 340, kicad 92); ~35-61% faster.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BVX1pHMvRPYHdp6ZfEawrk
This commit is contained in:
Viktor Vaczi 2026-07-07 10:50:24 +02:00
commit 4c3a4cacd4
102 changed files with 2867 additions and 3407 deletions

View file

@ -1,5 +1,5 @@
import { test, expect } from './utils/fixtures';
import { clickByLabel } from './utils/element-tracker';
import { clickByLabel, waitForWxApp, stableShot } from './utils/element-tracker';
/**
* wxStyledTextCtrl Tests
@ -26,167 +26,156 @@ import { clickByLabel } from './utils/element-tracker';
test.describe('wxStyledTextCtrl Tests', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/standalone/stc/stc_test.html');
// Wait for app to initialize
await page.waitForFunction(() => {
return document.querySelector('canvas') !== null;
}, { timeout: 30000 });
await page.waitForTimeout(1000);
// Deterministic app-readiness: canvas visible + wx element registry populated.
await waitForWxApp(page);
});
test('STC test app loads successfully', async ({ page, testLogger }) => {
await page.waitForTimeout(500);
// Readiness (canvas + registry populated) is handled by beforeEach's waitForWxApp,
// which is the load gate. The original only asserted no init errors (its startup-log
// check was computed but never asserted — the app logs [STC_EVENT], not a start line).
await stableShot(page, 'stc-01-loaded.png');
const hasStartupLog = testLogger.consoleLogs.some(log =>
log.includes('STC_TEST') && log.includes('started successfully')
);
await page.screenshot({ path: 'test-results/stc-01-loaded.png' });
expect(testLogger.errors.filter(e => !e.includes('favicon'))).toHaveLength(0);
expect(testLogger.errors.filter((e) => !e.includes('favicon'))).toHaveLength(0);
});
test('Python syntax highlighting is enabled by default', async ({ page }) => {
await page.waitForTimeout(1000);
// Take screenshot to verify Python code with syntax highlighting
await page.screenshot({ path: 'test-results/stc-02-python-default.png' });
// Visual verification - the editor should show Python code with colors
// (import, def, for keywords should be highlighted)
// (import, def, for keywords should be highlighted). Static default state.
await stableShot(page, 'stc-02-python-default.png');
});
test('DRC Rules mode can be activated', async ({ page, testLogger }) => {
await page.waitForTimeout(500);
// Click DRC Rules button using element registry
await clickByLabel(page, 'DRC Rules');
await page.waitForTimeout(500);
await page.screenshot({ path: 'test-results/stc-03-drc-mode.png' });
await expect
.poll(
() => testLogger.consoleLogs.some((log) => log.includes('DRC rules lexer configured')),
{ message: 'DRC rules lexer configured is logged' }
)
.toBe(true);
const hasDrcLog = testLogger.consoleLogs.some(log =>
log.includes('DRC rules lexer configured')
);
expect(hasDrcLog).toBe(true);
await stableShot(page, 'stc-03-drc-mode.png');
});
test('Plain text mode can be activated', async ({ page, testLogger }) => {
await page.waitForTimeout(500);
// Click Plain button using element registry
await clickByLabel(page, 'Plain');
await page.waitForTimeout(500);
await page.screenshot({ path: 'test-results/stc-04-plain-mode.png' });
await expect
.poll(
() => testLogger.consoleLogs.some((log) => log.includes('Plain text mode enabled')),
{ message: 'Plain text mode enabled is logged' }
)
.toBe(true);
const hasPlainLog = testLogger.consoleLogs.some(log =>
log.includes('Plain text mode enabled')
);
expect(hasPlainLog).toBe(true);
await stableShot(page, 'stc-04-plain-mode.png');
});
test('Insert Sample button adds code', async ({ page, testLogger }) => {
await page.waitForTimeout(500);
// Click Insert Sample button using element registry
await clickByLabel(page, 'Insert Sample');
await page.waitForTimeout(500);
await page.screenshot({ path: 'test-results/stc-05-insert-sample.png' });
await expect
.poll(
() => testLogger.consoleLogs.some((log) => log.includes('Inserted sample code')),
{ message: 'Inserted sample code is logged' }
)
.toBe(true);
const hasInsertLog = testLogger.consoleLogs.some(log =>
log.includes('Inserted sample code')
);
expect(hasInsertLog).toBe(true);
await stableShot(page, 'stc-05-insert-sample.png');
});
test('Clear button clears editor content', async ({ page, testLogger }) => {
await page.waitForTimeout(500);
// Click Clear button using element registry
await clickByLabel(page, 'Clear');
await page.waitForTimeout(500);
await page.screenshot({ path: 'test-results/stc-06-cleared.png' });
await expect
.poll(() => testLogger.consoleLogs.some((log) => log.includes('Text cleared')), {
message: 'Text cleared is logged',
})
.toBe(true);
const hasClearLog = testLogger.consoleLogs.some(log =>
log.includes('Text cleared')
);
expect(hasClearLog).toBe(true);
await stableShot(page, 'stc-06-cleared.png');
});
test('Line numbers can be toggled', async ({ page, testLogger }) => {
await page.waitForTimeout(500);
// Click Line Numbers button using element registry
await clickByLabel(page, 'Line Numbers');
await page.waitForTimeout(500);
await page.screenshot({ path: 'test-results/stc-07-line-numbers-toggle.png' });
await expect
.poll(
() =>
testLogger.consoleLogs.some(
(log) => log.includes('Line numbers hidden') || log.includes('Line numbers shown')
),
{ message: 'Line numbers toggle is logged' }
)
.toBe(true);
const hasLineNumLog = testLogger.consoleLogs.some(log =>
log.includes('Line numbers hidden') || log.includes('Line numbers shown')
);
expect(hasLineNumLog).toBe(true);
await stableShot(page, 'stc-07-line-numbers-toggle.png');
});
test('Fold All button works', async ({ page, testLogger }) => {
await page.waitForTimeout(500);
// Click Fold All button using element registry
await clickByLabel(page, 'Fold All');
await page.waitForTimeout(500);
await page.screenshot({ path: 'test-results/stc-08-folded.png' });
await expect
.poll(() => testLogger.consoleLogs.some((log) => log.includes('All code folded')), {
message: 'All code folded is logged',
})
.toBe(true);
const hasFoldLog = testLogger.consoleLogs.some(log =>
log.includes('All code folded')
);
expect(hasFoldLog).toBe(true);
await stableShot(page, 'stc-08-folded.png');
});
test('Editor can receive text input', async ({ page, testLogger }) => {
await page.waitForTimeout(500);
const canvas = page.locator('canvas');
// Clear the editor first using element registry
// Clear the editor first using element registry, and wait deterministically
// for the clear to commit before typing.
await clickByLabel(page, 'Clear');
await page.waitForTimeout(300);
await expect
.poll(() => testLogger.consoleLogs.some((log) => log.includes('Text cleared')), {
message: 'editor reports "Text cleared" before typing',
})
.toBe(true);
// Click in the editor area to focus it
// STC (Scintilla) has complex internal windowing - click anywhere in editor area
await canvas.click({ position: { x: 400, y: 300 } });
await page.waitForTimeout(200);
await page.waitForTimeout(200); // eslint-disable-line -- documented interaction dwell: Scintilla focus commit before keystrokes (no observable)
// Type some text
await page.keyboard.type('# Test input\nprint("Hello WASM!")');
await page.waitForTimeout(500);
await page.screenshot({ path: 'test-results/stc-09-typed.png' });
await stableShot(page, 'stc-09-typed.png');
// The text should have triggered change events (logged every 10 changes)
});
test('Switching between modes preserves content structure', async ({ page, testLogger }) => {
await page.waitForTimeout(500);
// Start with Python mode (default)
await page.screenshot({ path: 'test-results/stc-10a-python.png' });
await stableShot(page, 'stc-10a-python.png');
// Switch to DRC mode using element registry
await clickByLabel(page, 'DRC Rules');
await page.waitForTimeout(300);
await page.screenshot({ path: 'test-results/stc-10b-drc.png' });
await expect
.poll(
() => testLogger.consoleLogs.some((log) => log.includes('DRC rules lexer configured')),
{ message: 'DRC rules lexer configured is logged' }
)
.toBe(true);
await stableShot(page, 'stc-10b-drc.png');
// Switch back to Python using element registry
await clickByLabel(page, 'Python');
await page.waitForTimeout(300);
await page.screenshot({ path: 'test-results/stc-10c-python-again.png' });
await stableShot(page, 'stc-10c-python-again.png');
// Multiple mode switches should work (at least DRC mode change should be logged)
const modeChanges = testLogger.consoleLogs.filter(log =>
log.includes('lexer configured') || log.includes('mode enabled')
const modeChanges = testLogger.consoleLogs.filter(
(log) => log.includes('lexer configured') || log.includes('mode enabled')
).length;
expect(modeChanges).toBeGreaterThanOrEqual(1);
});