Refactor test logging into shared utilities

- Extract common logging code to tests/e2e/utils/
  - fixtures.ts: Playwright fixture with automatic log capture
  - test-utils.ts: Logging utilities and helper functions
- Each test now automatically captures:
  - Console logs with timestamps and log levels
  - Page errors with full stack traces
- Log files written per test to tests/logs/
  - <test-name>.log for all console output
  - <test-name>.errors.log only when errors occur
- Update all 13 spec files to use shared fixtures
- Update README with test structure and logging docs
- Net reduction of ~700 lines by removing duplicated code

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Viktor Vaczi 2025-11-29 20:54:54 +01:00
commit 26181bb929
16 changed files with 431 additions and 1131 deletions

View file

@ -1,21 +1,14 @@
import { test, expect, Page } from '@playwright/test';
import { test, expect, MAIN_CANVAS, waitForApp, getCanvasBox } from './utils/fixtures';
const MAIN_CANVAS = '#canvas';
async function waitForApp(page: Page) {
await page.waitForSelector(MAIN_CANVAS, { state: 'visible', timeout: 30000 });
await page.waitForTimeout(500);
}
async function switchToOpenGLTab(page: Page, box: { x: number; y: number }) {
async function switchToOpenGLTab(page: any, box: { x: number; y: number }) {
// Click OpenGL tab (fifth tab, around x=280)
await page.mouse.click(box.x + 280, box.y + 35);
await page.waitForTimeout(1000);
}
// Open the test dropdown and select by index (0-based)
async function selectGLTest(page: Page, box: { x: number; y: number }, index: number) {
// Click the dropdown arrow to open it (dropdown is at around x=170, y=155, arrow at right edge ~x=290)
async function selectGLTest(page: any, box: { x: number; y: number }, index: number) {
// Click the dropdown arrow to open it
await page.mouse.click(box.x + 290, box.y + 155);
await page.waitForTimeout(300);
@ -26,41 +19,17 @@ async function selectGLTest(page: Page, box: { x: number; y: number }, index: nu
}
test.describe('OpenGL Tests', () => {
test('Vertex Arrays test - debug freeze', async ({ page }) => {
const errors: string[] = [];
const logs: string[] = [];
page.on('pageerror', err => {
errors.push(`[PAGE_ERROR] ${err.message}\n${err.stack || 'No stack'}`);
});
page.on('console', msg => {
const text = msg.text();
logs.push(`[${msg.type()}] ${text}`);
if (msg.type() === 'error') {
errors.push(`[CONSOLE_ERROR] ${text}`);
}
});
test('Vertex Arrays test - debug freeze', async ({ page, testLogger }) => {
await page.goto('/minimal_test.html');
await waitForApp(page);
const canvas = page.locator(MAIN_CANVAS);
const box = await canvas.boundingBox();
if (!box) throw new Error('Canvas not found');
const box = await getCanvasBox(page);
// Switch to OpenGL tab
await switchToOpenGLTab(page, box);
await page.screenshot({ path: 'test-results/gl-01-opengl-tab.png', fullPage: true });
// The dropdown has these options (from minimal_test.cpp):
// 0: "Immediate Mode (glBegin/glEnd)"
// 1: "Matrix Ops (glPushMatrix)"
// 2: "Vertex Arrays (glVertexPointer)"
// 3: "State Mgmt (glEnable/glBlend)"
// 4: "Texture Coords"
// Select "Vertex Arrays" test (index 2)
console.log('Selecting Vertex Arrays test...');
await selectGLTest(page, box, 2);
await page.screenshot({ path: 'test-results/gl-02-vertex-arrays-selected.png', fullPage: true });
@ -70,12 +39,6 @@ test.describe('OpenGL Tests', () => {
await page.screenshot({ path: 'test-results/gl-03-after-wait.png', fullPage: true });
// Print all logs for debugging
console.log('\n=== CONSOLE LOGS ===');
logs.forEach(log => console.log(log));
console.log('\n=== ERRORS ===');
errors.forEach(err => console.log(err));
// Check if app is still responsive
const isResponsive = await page.evaluate(() => {
return document.querySelector('#canvas') !== null;
@ -83,23 +46,11 @@ test.describe('OpenGL Tests', () => {
expect(isResponsive).toBe(true);
});
test('All GL tests individually', async ({ page }) => {
const errors: string[] = [];
const logs: string[] = [];
page.on('pageerror', err => {
errors.push(`[PAGE_ERROR] ${err.message}\n${err.stack || 'No stack'}`);
});
page.on('console', msg => {
logs.push(`[${msg.type()}] ${msg.text()}`);
});
test('All GL tests individually', async ({ page, testLogger }) => {
await page.goto('/minimal_test.html');
await waitForApp(page);
const canvas = page.locator(MAIN_CANVAS);
const box = await canvas.boundingBox();
if (!box) throw new Error('Canvas not found');
const box = await getCanvasBox(page);
await switchToOpenGLTab(page, box);
@ -112,17 +63,13 @@ test.describe('OpenGL Tests', () => {
];
for (let i = 0; i < testNames.length; i++) {
console.log(`\n--- Testing: ${testNames[i]} (index ${i}) ---`);
try {
await selectGLTest(page, box, i);
await page.screenshot({
path: `test-results/gl-test-${i}-${testNames[i].replace(/\s+/g, '-').toLowerCase()}.png`,
fullPage: true
});
console.log(`${testNames[i]}: OK`);
} catch (e) {
console.log(`${testNames[i]}: FAILED - ${e}`);
await page.screenshot({
path: `test-results/gl-test-${i}-${testNames[i].replace(/\s+/g, '-').toLowerCase()}-error.png`,
fullPage: true
@ -131,24 +78,13 @@ test.describe('OpenGL Tests', () => {
await page.waitForTimeout(500);
}
console.log('\n=== ERRORS ===');
errors.forEach(err => console.log(err));
});
test('Run All Tests button', async ({ page }) => {
const errors: string[] = [];
page.on('pageerror', err => {
errors.push(`${err.message}\n${err.stack || 'No stack'}`);
});
test('Run All Tests button', async ({ page, testLogger }) => {
await page.goto('/minimal_test.html');
await waitForApp(page);
const canvas = page.locator(MAIN_CANVAS);
const box = await canvas.boundingBox();
if (!box) throw new Error('Canvas not found');
const box = await getCanvasBox(page);
await switchToOpenGLTab(page, box);