loop-benchmarking

tetris.spec.ts (16027B)

---

 import { test, expect, type Page } from "@playwright/test";
 
 // Try common entry points until one loads successfully.
 async function loadGame(page: Page) {
   const candidates = [
     "/",
     "/index.html",
     "/dist/index.html",
     "/public/index.html",
     "/build/index.html",
   ];
 
   for (const path of candidates) {
     try {
       const resp = await page.goto(path, { timeout: 5000 });
       if (resp?.ok()) return;
     } catch {
       continue;
     }
   }
 }
 
 // Find the game surface: canvas or a grid-like DOM container.
 function gameBoard(page: Page) {
   return page.locator(
     [
       "canvas",
       '[class*="board"]',
       '[class*="grid"]',
       '[class*="game-area"]',
       '[class*="field"]',
       '[id*="board"]',
       '[id*="grid"]',
       '[id*="game"]',
       '[id*="field"]',
       "table",
     ].join(", ")
   );
 }
 
 // Click the board area to make sure it has focus, then try common
 // start interactions in case the game waits for user action.
 async function ensureGameStarted(page: Page) {
   const board = gameBoard(page);
   const count = await board.count();
   if (count > 0) {
     try {
       await board.first().click({ timeout: 2000 });
     } catch {
       // click failed, continue anyway
     }
   }
 
   // Some games need a key press or button click to start
   const startButton = page.locator(
     'button:has-text("start"), button:has-text("Start"), button:has-text("play"), button:has-text("Play"), [class*="start"], [id*="start"]'
   );
   if ((await startButton.count()) > 0) {
     try {
       await startButton.first().click({ timeout: 2000 });
     } catch {
       // ignore
     }
   }
 
   // Press Enter/Space as a fallback start trigger
   await page.keyboard.press("Enter");
   await page.waitForTimeout(300);
   await page.keyboard.press("Space");
   await page.waitForTimeout(500);
 }
 
 test.describe("Tetris Game", () => {
   test.beforeEach(async ({ page }) => {
     await loadGame(page);
     await page.waitForLoadState("domcontentloaded");
     await page.waitForTimeout(1000);
     await ensureGameStarted(page);
   });
 
   // ---- 1. Page loads without errors ----
   test("page loads without console errors", async ({ page }) => {
     const errors: string[] = [];
     page.on("pageerror", (err) => errors.push(err.message));
     await page.waitForTimeout(2000);
     expect(errors).toEqual([]);
   });
 
   // ---- 2. Game board is visible ----
   test("game board is visible", async ({ page }) => {
     const board = gameBoard(page);
     const count = await board.count();
 
     expect(
       count,
       "Expected a <canvas> or a container with board/grid/game/field in its class or id"
     ).toBeGreaterThan(0);
 
     // The board element should have meaningful dimensions
     const box = await board.first().boundingBox();
     expect(box, "Game board should be visible on screen").not.toBeNull();
     expect(box!.width).toBeGreaterThan(50);
     expect(box!.height).toBeGreaterThan(50);
   });
 
   // ---- 3. Game starts automatically or via interaction ----
   test("game starts", async ({ page }) => {
     // After beforeEach, the game should be running. Verify by checking that
     // the page is not static: take two screenshots separated by time.
     const shot1 = await page.screenshot();
     await page.waitForTimeout(2500);
     const shot2 = await page.screenshot();
 
     expect(
       Buffer.from(shot1).equals(Buffer.from(shot2)),
       "Expected the game to show visual activity after starting"
     ).toBe(false);
   });
 
   // ---- 4. Piece falls automatically (auto-drop) ----
   test("piece falls automatically", async ({ page }) => {
     // Take screenshots at intervals without pressing any keys.
     // A falling piece should cause visual changes.
     const shot1 = await page.screenshot();
     await page.waitForTimeout(2000);
     const shot2 = await page.screenshot();
     await page.waitForTimeout(2000);
     const shot3 = await page.screenshot();
 
     const buf1 = Buffer.from(shot1);
     const buf2 = Buffer.from(shot2);
     const buf3 = Buffer.from(shot3);
 
     // At least one pair should differ (piece is moving down)
     const changed = !buf1.equals(buf2) || !buf2.equals(buf3);
     expect(changed, "Expected piece to fall over time without input").toBe(
       true
     );
   });
 
   // ---- 5. Left arrow moves piece left ----
   test("left arrow moves piece", async ({ page }) => {
     const errors: string[] = [];
     page.on("pageerror", (err) => errors.push(err.message));
 
     const shot1 = await page.screenshot();
     await page.keyboard.press("ArrowLeft");
     await page.waitForTimeout(200);
     await page.keyboard.press("ArrowLeft");
     await page.waitForTimeout(200);
     await page.keyboard.press("ArrowLeft");
     await page.waitForTimeout(300);
     const shot2 = await page.screenshot();
 
     // The piece should have moved, so the screenshots should differ
     expect(
       Buffer.from(shot1).equals(Buffer.from(shot2)),
       "Expected visual change after pressing left arrow"
     ).toBe(false);
     expect(errors).toEqual([]);
   });
 
   // ---- 6. Right arrow moves piece right ----
   test("right arrow moves piece", async ({ page }) => {
     const errors: string[] = [];
     page.on("pageerror", (err) => errors.push(err.message));
 
     const shot1 = await page.screenshot();
     await page.keyboard.press("ArrowRight");
     await page.waitForTimeout(200);
     await page.keyboard.press("ArrowRight");
     await page.waitForTimeout(200);
     await page.keyboard.press("ArrowRight");
     await page.waitForTimeout(300);
     const shot2 = await page.screenshot();
 
     expect(
       Buffer.from(shot1).equals(Buffer.from(shot2)),
       "Expected visual change after pressing right arrow"
     ).toBe(false);
     expect(errors).toEqual([]);
   });
 
   // ---- 7. Down arrow moves piece down faster ----
   test("down arrow accelerates piece", async ({ page }) => {
     const errors: string[] = [];
     page.on("pageerror", (err) => errors.push(err.message));
 
     const shot1 = await page.screenshot();
     for (let i = 0; i < 10; i++) {
       await page.keyboard.press("ArrowDown");
       await page.waitForTimeout(50);
     }
     await page.waitForTimeout(200);
     const shot2 = await page.screenshot();
 
     expect(
       Buffer.from(shot1).equals(Buffer.from(shot2)),
       "Expected visual change after pressing down arrow repeatedly"
     ).toBe(false);
     expect(errors).toEqual([]);
   });
 
   // ---- 8. Up arrow (or Z) rotates piece ----
   test("rotation changes the piece", async ({ page }) => {
     const errors: string[] = [];
     page.on("pageerror", (err) => errors.push(err.message));
 
     const shot1 = await page.screenshot();
     await page.keyboard.press("ArrowUp");
     await page.waitForTimeout(300);
     const shot2 = await page.screenshot();
 
     expect(
       Buffer.from(shot1).equals(Buffer.from(shot2)),
       "Expected visual change after pressing rotate key"
     ).toBe(false);
     expect(errors).toEqual([]);
   });
 
   // ---- 9. Space bar hard-drops piece ----
   test("space bar hard-drops piece", async ({ page }) => {
     const errors: string[] = [];
     page.on("pageerror", (err) => errors.push(err.message));
 
     const shot1 = await page.screenshot();
     await page.keyboard.press("Space");
     await page.waitForTimeout(500);
     const shot2 = await page.screenshot();
 
     expect(
       Buffer.from(shot1).equals(Buffer.from(shot2)),
       "Expected visual change after pressing space (hard drop)"
     ).toBe(false);
     expect(errors).toEqual([]);
   });
 
   // ---- 10. Pieces lock at the bottom ----
   test("pieces lock at the bottom", async ({ page }) => {
     // Hard-drop several pieces and check that the bottom of the board
     // accumulates filled cells (the visual should change cumulatively).
     const shots: Buffer[] = [];
 
     shots.push(Buffer.from(await page.screenshot()));
 
     for (let i = 0; i < 3; i++) {
       await page.keyboard.press("Space");
       await page.waitForTimeout(800);
     }
 
     shots.push(Buffer.from(await page.screenshot()));
 
     // After 3 hard drops, the board should look different from the start
     // because pieces have stacked up at the bottom.
     expect(
       shots[0].equals(shots[1]),
       "Expected pieces to stack up at the bottom after hard drops"
     ).toBe(false);
   });
 
   // ---- 11. New piece spawns after lock ----
   test("new piece spawns after locking", async ({ page }) => {
     // Hard-drop to lock a piece, then wait and verify the game is still
     // showing activity (a new piece should be falling).
     await page.keyboard.press("Space");
     await page.waitForTimeout(1000);
 
     const shot1 = await page.screenshot();
     await page.waitForTimeout(2000);
     const shot2 = await page.screenshot();
 
     // If a new piece spawned and is falling, the screen should change
     expect(
       Buffer.from(shot1).equals(Buffer.from(shot2)),
       "Expected a new piece to spawn and fall after the previous one locked"
     ).toBe(false);
   });
 
   // ---- 12. Multiple different pieces appear ----
   test("multiple different pieces appear", async ({ page }) => {
     // Play through several pieces and capture screenshots. Different piece
     // shapes should produce visually distinct patterns.
     const shots: Buffer[] = [];
 
     for (let i = 0; i < 6; i++) {
       // Move each piece to a different column so they don't overlap identically
       if (i % 2 === 0) {
         await page.keyboard.press("ArrowLeft");
         await page.waitForTimeout(100);
         await page.keyboard.press("ArrowLeft");
         await page.waitForTimeout(100);
       } else {
         await page.keyboard.press("ArrowRight");
         await page.waitForTimeout(100);
         await page.keyboard.press("ArrowRight");
         await page.waitForTimeout(100);
       }
       await page.keyboard.press("Space");
       await page.waitForTimeout(600);
       shots.push(Buffer.from(await page.screenshot()));
     }
 
     // At least some consecutive screenshots should differ (different piece shapes)
     let differences = 0;
     for (let i = 1; i < shots.length; i++) {
       if (!shots[i - 1].equals(shots[i])) differences++;
     }
 
     expect(
       differences,
       "Expected to see visual differences between consecutive pieces (different shapes)"
     ).toBeGreaterThanOrEqual(2);
   });
 
   // ---- 13. Completed line clears ----
   test("completed line clears", async ({ page }) => {
     // Fill a row by dropping many pieces. Observe whether any row disappears.
     // We can detect this by tracking the total filled area -- after a line clear,
     // the board should have less filled content than just before the clear.
     const pageText = async () =>
       (await page.evaluate(() => document.body.innerText)) || "";
 
     // Drop many pieces rapidly to fill rows
     for (let i = 0; i < 30; i++) {
       // Vary positions to try to complete a row
       const moves = (i % 5) - 2; // -2, -1, 0, 1, 2
       for (let m = 0; m < Math.abs(moves); m++) {
         await page.keyboard.press(
           moves < 0 ? "ArrowLeft" : "ArrowRight"
         );
         await page.waitForTimeout(50);
       }
       await page.keyboard.press("Space");
       await page.waitForTimeout(300);
     }
 
     // Check if a score or lines counter changed (common indicators of line clears)
     const text = await pageText();
     const numbers = (text.match(/\d+/g) || []).map(Number);
     const hasNonZero = numbers.some((n) => n > 0);
 
     // Also check visual: the board should not be completely static
     const shot1 = await page.screenshot();
     await page.waitForTimeout(1000);
     const shot2 = await page.screenshot();
 
     // Either: score/lines increased, or game is still active (meaning lines cleared
     // and made room for more pieces instead of game over)
     const stillActive = !Buffer.from(shot1).equals(Buffer.from(shot2));
 
     expect(
       hasNonZero || stillActive,
       "Expected evidence of line clearing (score > 0 or game still active after many drops)"
     ).toBe(true);
   });
 
   // ---- 14. Score increases during play ----
   test("score increases during play", async ({ page }) => {
     // Look for a score display on the page
     const getNumbers = async () => {
       const text = (await page.evaluate(() => document.body.innerText)) || "";
       return (text.match(/\d+/g) || []).map(Number);
     };
 
     const numbersBefore = await getNumbers();
 
     // Play for a while: drop several pieces
     for (let i = 0; i < 15; i++) {
       const offset = (i % 5) - 2;
       for (let m = 0; m < Math.abs(offset); m++) {
         await page.keyboard.press(offset < 0 ? "ArrowLeft" : "ArrowRight");
         await page.waitForTimeout(50);
       }
       await page.keyboard.press("Space");
       await page.waitForTimeout(300);
     }
 
     const numbersAfter = await getNumbers();
 
     // At least one number on the page should have increased
     // (score, lines counter, level, etc.)
     let anyIncreased = false;
     const maxLen = Math.min(numbersBefore.length, numbersAfter.length);
     for (let i = 0; i < maxLen; i++) {
       if (numbersAfter[i] > numbersBefore[i]) {
         anyIncreased = true;
         break;
       }
     }
 
     // Also accept if new numbers appeared
     if (!anyIncreased && numbersAfter.length > numbersBefore.length) {
       anyIncreased = true;
     }
 
     // Also accept if the max number increased
     if (!anyIncreased) {
       const maxBefore = numbersBefore.length > 0 ? Math.max(...numbersBefore) : 0;
       const maxAfter = numbersAfter.length > 0 ? Math.max(...numbersAfter) : 0;
       if (maxAfter > maxBefore) anyIncreased = true;
     }
 
     expect(
       anyIncreased,
       "Expected at least one numeric value on the page to increase during play (score, lines, level)"
     ).toBe(true);
   });
 
   // ---- 15. Game over when pieces reach top ----
   test("game over when pieces reach top", async ({ page }) => {
     // Stack pieces in the center until the game ends.
     // Drop as many pieces as possible straight down.
     for (let i = 0; i < 50; i++) {
       await page.keyboard.press("Space");
       await page.waitForTimeout(200);
     }
 
     await page.waitForTimeout(2000);
 
     // After stacking to overflow, the game should show some game-over indicator:
     // - text saying "game over", "you lose", "try again", "restart", "end"
     // - or the game stops updating (static screen)
     const text = ((await page.evaluate(() => document.body.innerText)) || "").toLowerCase();
     const gameOverText =
       text.includes("game over") ||
       text.includes("gameover") ||
       text.includes("you lose") ||
       text.includes("try again") ||
       text.includes("restart") ||
       text.includes("play again") ||
       text.includes("ended");
 
     // Check if the game stopped (screen is static)
     const shot1 = await page.screenshot();
     await page.waitForTimeout(2000);
     const shot2 = await page.screenshot();
     const isStatic = Buffer.from(shot1).equals(Buffer.from(shot2));
 
     expect(
       gameOverText || isStatic,
       "Expected game-over text or the game to stop after stacking pieces to the top"
     ).toBe(true);
   });
 
   // ---- 16. Game runs for 30 seconds without crashing ----
   test("game runs for 30 seconds without crashing", async ({ page }) => {
     const errors: string[] = [];
     page.on("pageerror", (err) => errors.push(err.message));
 
     // Simulate varied gameplay for 30 seconds
     const keys = [
       "ArrowLeft",
       "ArrowRight",
       "ArrowDown",
       "ArrowUp",
       "Space",
     ];
     const start = Date.now();
 
     while (Date.now() - start < 30_000) {
       const key = keys[Math.floor(Math.random() * keys.length)];
       await page.keyboard.press(key);
       await page.waitForTimeout(150 + Math.random() * 200);
     }
 
     // The page should still be alive (not crashed, not blank)
     const text = await page.evaluate(() => document.body.innerText);
     expect(text, "Page body should not be empty after 30s of play").toBeTruthy();
     expect(
       errors.length,
       `Expected no console errors during 30s of play, got: ${errors.join("; ")}`
     ).toBe(0);
   });
 });