fix(test): Fix WebGL screenshot capture and comparison
1. Fix gal-webgl.spec.ts sequential test: - Wait for isReady() not just module existence - Use .gl-canvas selector (same as individual tests) - Increase timeout from 50ms to 100ms - This fixes blank screenshots in full test runs 2. Fix test-gal-regression.sh comparison: - Normalize PNG format before comparing (flatten + sRGB TrueColor) - This handles RGBA vs RGB and palette differences - gal-basic-lines now passes comparison (0.34% different) Results after fixes: - Native vs Baseline: PASSED (28/28) - WebGL screenshots now capture actual rendered content - gal-basic-lines matches native (first successful scenario!) - Other scenarios have rendering differences to investigate Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
7617acf8b5
commit
8f803b45ea
2 changed files with 23 additions and 8 deletions
|
|
@ -154,10 +154,17 @@ compare_screenshots() {
|
||||||
fi
|
fi
|
||||||
fi
|
fi
|
||||||
|
|
||||||
|
# Normalize both images to TrueColor RGB for consistent comparison
|
||||||
|
# This handles PNG format differences (RGBA vs RGB, palette vs truecolor)
|
||||||
|
local ref_normalized="$tmpdir/ref_$filename"
|
||||||
|
local cur_normalized="$tmpdir/cur_$filename"
|
||||||
|
convert "$ref" -flatten -colorspace sRGB -type TrueColor "$ref_normalized" 2>/dev/null
|
||||||
|
convert "$compare_file" -flatten -colorspace sRGB -type TrueColor "$cur_normalized" 2>/dev/null
|
||||||
|
|
||||||
# Compare with fuzz factor (allows small pixel differences from anti-aliasing)
|
# Compare with fuzz factor (allows small pixel differences from anti-aliasing)
|
||||||
# Use AE (Absolute Error) metric - counts differing pixels
|
# Use AE (Absolute Error) metric - counts differing pixels
|
||||||
# Output format: "123456 (0.123)" - extract just the first number
|
# Output format: "123456 (0.123)" - extract just the first number
|
||||||
local compare_output=$(compare -metric AE -fuzz 2% "$ref" "$compare_file" null: 2>&1 || true)
|
local compare_output=$(compare -metric AE -fuzz 2% "$ref_normalized" "$cur_normalized" null: 2>&1 || true)
|
||||||
local diff_pixels=$(echo "$compare_output" | awk '{print $1}')
|
local diff_pixels=$(echo "$compare_output" | awk '{print $1}')
|
||||||
|
|
||||||
# Handle scientific notation (e.g., 1.92e+06)
|
# Handle scientific notation (e.g., 1.92e+06)
|
||||||
|
|
@ -173,7 +180,7 @@ compare_screenshots() {
|
||||||
fi
|
fi
|
||||||
|
|
||||||
# Calculate percentage
|
# Calculate percentage
|
||||||
local total_pixels=$(identify -format "%[fx:w*h]" "$ref" 2>/dev/null)
|
local total_pixels=$(identify -format "%[fx:w*h]" "$ref_normalized" 2>/dev/null)
|
||||||
# Handle scientific notation in total_pixels
|
# Handle scientific notation in total_pixels
|
||||||
if [[ "$total_pixels" =~ [eE] ]]; then
|
if [[ "$total_pixels" =~ [eE] ]]; then
|
||||||
total_pixels=$(printf "%.0f" "$total_pixels")
|
total_pixels=$(printf "%.0f" "$total_pixels")
|
||||||
|
|
|
||||||
|
|
@ -162,13 +162,22 @@ test.describe('GAL WebGL Regression Tests', () => {
|
||||||
test('Run all scenarios sequentially', async ({ page, testLogger }) => {
|
test('Run all scenarios sequentially', async ({ page, testLogger }) => {
|
||||||
await page.goto('/gal-webgl/gal_webgl_test.html');
|
await page.goto('/gal-webgl/gal_webgl_test.html');
|
||||||
|
|
||||||
// Wait for module to be ready
|
// Wait for module to be fully ready (not just defined)
|
||||||
await page.waitForFunction(() => {
|
await page.waitForFunction(() => {
|
||||||
return (window as any).galTest !== undefined;
|
return (window as any).galTest !== undefined && (window as any).galTest.isReady();
|
||||||
}, { timeout: 60000 });
|
}, { timeout: 60000 });
|
||||||
|
|
||||||
console.log('Running all 28 scenarios...');
|
console.log('Running all 28 scenarios...');
|
||||||
|
|
||||||
|
// Find the GL canvas (same logic as individual tests)
|
||||||
|
let canvas = page.locator('.gl-canvas').first();
|
||||||
|
if (!(await canvas.count())) {
|
||||||
|
canvas = page.locator('#canvas');
|
||||||
|
}
|
||||||
|
if (!(await canvas.count())) {
|
||||||
|
canvas = page.locator('canvas').first();
|
||||||
|
}
|
||||||
|
|
||||||
for (let i = 0; i < SCENARIO_NAMES.length; i++) {
|
for (let i = 0; i < SCENARIO_NAMES.length; i++) {
|
||||||
const scenarioName = SCENARIO_NAMES[i];
|
const scenarioName = SCENARIO_NAMES[i];
|
||||||
|
|
||||||
|
|
@ -177,14 +186,13 @@ test.describe('GAL WebGL Regression Tests', () => {
|
||||||
(window as any).galTest.runScenario(index);
|
(window as any).galTest.runScenario(index);
|
||||||
}, i);
|
}, i);
|
||||||
|
|
||||||
// Wait for rendering
|
// Wait for rendering to complete (same timeout as individual tests)
|
||||||
await page.waitForTimeout(50);
|
await page.waitForTimeout(100);
|
||||||
|
|
||||||
// Hide controls overlay before screenshot
|
// Hide controls overlay before screenshot
|
||||||
await page.locator('#controls-overlay').evaluate(el => el.style.visibility = 'hidden');
|
await page.locator('#controls-overlay').evaluate(el => el.style.visibility = 'hidden');
|
||||||
|
|
||||||
// Screenshot the canvas
|
// Screenshot the GL canvas
|
||||||
const canvas = await page.locator('#canvas');
|
|
||||||
const screenshotPath = path.join(OUTPUT_DIR, `gal-${scenarioName}.png`);
|
const screenshotPath = path.join(OUTPUT_DIR, `gal-${scenarioName}.png`);
|
||||||
await canvas.screenshot({ path: screenshotPath });
|
await canvas.screenshot({ path: screenshotPath });
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue