test: Reduce E2E test timeouts from 30s to 5s

Reduce test timeouts to fail faster:
- waitForSelector timeouts: 30s/20s -> 5s
- waitForTimeout delays: 3s/2s -> 1s, 1s -> 500ms

Tests were taking too long to fail when issues occurred. With 5-second
timeouts, failures are detected quickly while still allowing enough time
for WebGPU initialization in working scenarios.

Author: claude

examples/webgpu-cube/tests/webgpu-cube.spec.ts

@@ -17,10 +17,10 @@ test.describe('WebGPU Rotating Cube', () => {
     await page.goto('http://localhost:8080');
 
     // Wait for canvas to be rendered (indicates WebGPU initialization)
-    await page.waitForSelector('canvas', { timeout: 30000 });
+    await page.waitForSelector('canvas', { timeout: 5000 });
 
     // Wait a bit more for messages
-    await page.waitForTimeout(1000);
+    await page.waitForTimeout(500);
 
     // Print all console messages for debugging
     console.log('=== Console Messages ===');
@@ -62,7 +62,7 @@ test.describe('WebGPU Rotating Cube', () => {
     });
 
     // Wait a bit for any errors to appear
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     // Filter out known acceptable errors
     const criticalErrors = errors.filter(err =>
@@ -86,7 +86,7 @@ test.describe('WebGPU Rotating Cube', () => {
     });
 
     // Wait for initialization
-    await page.waitForTimeout(3000);
+    await page.waitForTimeout(1000);
 
     // Check for key initialization messages
     const hasWebGPUMessage = initMessages.some(msg =>
@@ -123,10 +123,10 @@ test.describe('WebGPU Rotating Cube', () => {
     await page.goto('http://localhost:8080');
 
     // Wait for canvas to be rendered
-    await page.waitForSelector('canvas', { timeout: 30000 });
+    await page.waitForSelector('canvas', { timeout: 5000 });
 
     // Wait for either controls or error to appear
-    await page.waitForSelector('#controls, div[style*="background: #ff4444"]', { timeout: 20000 });
+    await page.waitForSelector('#controls, div[style*="background: #ff4444"]', { timeout: 5000 });
 
     // Check that no error occurred
     const errorDivs = await page.locator('div[style*="background: #ff4444"]');
@@ -152,10 +152,10 @@ test.describe('WebGPU Rotating Cube', () => {
     await page.goto('http://localhost:8080');
 
     // Wait for canvas to be rendered
-    await page.waitForSelector('canvas', { timeout: 30000 });
+    await page.waitForSelector('canvas', { timeout: 5000 });
 
     // Wait for either controls or error to appear
-    await page.waitForSelector('#btn-toggle, div[style*="background: #ff4444"]', { timeout: 20000 });
+    await page.waitForSelector('#btn-toggle, div[style*="background: #ff4444"]', { timeout: 5000 });
 
     // Check that no error occurred
     const errorDivs = await page.locator('div[style*="background: #ff4444"]');
@@ -188,10 +188,10 @@ test.describe('WebGPU Rotating Cube', () => {
     await page.goto('http://localhost:8080');
 
     // Wait for canvas to be rendered
-    await page.waitForSelector('canvas', { timeout: 30000 });
+    await page.waitForSelector('canvas', { timeout: 5000 });
 
     // Wait for either controls or error to appear
-    await page.waitForSelector('#speed-control, div[style*="background: #ff4444"]', { timeout: 20000 });
+    await page.waitForSelector('#speed-control, div[style*="background: #ff4444"]', { timeout: 5000 });
 
     // Check that no error occurred
     const errorDivs = await page.locator('div[style*="background: #ff4444"]');
@@ -219,10 +219,10 @@ test.describe('WebGPU Rotating Cube', () => {
     await page.goto('http://localhost:8080');
 
     // Wait for canvas to be rendered
-    await page.waitForSelector('canvas', { timeout: 30000 });
+    await page.waitForSelector('canvas', { timeout: 5000 });
 
     // Wait for either controls or error to appear
-    await page.waitForSelector('#btn-toggle, div[style*="background: #ff4444"]', { timeout: 20000 });
+    await page.waitForSelector('#btn-toggle, div[style*="background: #ff4444"]', { timeout: 5000 });
 
     // Check that no error occurred
     const errorDivs = await page.locator('div[style*="background: #ff4444"]');
@@ -254,10 +254,10 @@ test.describe('WebGPU Rotating Cube', () => {
     await page.goto('http://localhost:8080');
 
     // Wait for canvas to be rendered
-    await page.waitForSelector('canvas', { timeout: 30000 });
+    await page.waitForSelector('canvas', { timeout: 5000 });
 
     // Wait a bit more for animation
-    await page.waitForTimeout(2000);
+    await page.waitForTimeout(1000);
 
     // Take full page screenshot for debugging
     await page.screenshot({ path: 'test-results/webgpu-rendering.png', fullPage: true });
@@ -278,7 +278,7 @@ test.describe('WebGPU Rotating Cube', () => {
     await page.goto('http://localhost:8080');
 
     // Wait for page to load
-    await page.waitForTimeout(3000);
+    await page.waitForTimeout(1000);
 
     // Check that no error divs are present
     const errorDivs = await page.locator('div[style*="background: #ff4444"]');