fix(e2e): mock Pexels API in all test fixtures and correct README

tests/e2e/README.md

@@ -371,7 +371,7 @@ Tests automatically:
 ## 📝 Notes
 
 - Tests require dev server running on `http://localhost:3000`
-- Tests use real Pexels API (ensure API key is valid)
+- Tests use a mocked Pexels API via Playwright route interception (no real API key required)
 - Tests are idempotent and can run multiple times
 - Screenshots and traces are stored in `test-results/` directory
 

tests/e2e/fixtures.ts

@@ -63,6 +63,9 @@ export async function mockApiRoutes(page: Page) {
 type Fixtures = {
   homePage: Page;
   gamePage: Page;
+  navigateToHome: () => Promise<void>;
+  selectDifficulty9x13: () => Promise<void>;
+  startGame: () => Promise<void>;
 };
 
 export const test = base.extend<Fixtures>({
@@ -87,6 +90,33 @@ export const test = base.extend<Fixtures>({
     await page.waitForSelector("[draggable='true']", { timeout: 15_000 });
     await use(page);
   },
+
+  navigateToHome: async ({ page }, use) => {
+    await use(async () => {
+      await mockApiRoutes(page);
+      const getImagesResponse = page.waitForResponse("**/api/get-images**", {
+        timeout: 30_000,
+      });
+      await page.goto("/");
+      await getImagesResponse;
+      await page.waitForSelector("img.w-full", { timeout: 15_000 });
+    });
+  },
+
+  selectDifficulty9x13: async ({ page }, use) => {
+    await use(async () => {
+      // 9x13 is the default; explicitly click the label to ensure it is selected
+      await page.locator("label[for='9x13']").click();
+    });
+  },
+
+  startGame: async ({ page }, use) => {
+    await use(async () => {
+      await page.getByRole("button", { name: /Play/i }).click();
+      // Wait for puzzle pieces to be rendered on the game page
+      await page.waitForSelector("[draggable='true']", { timeout: 15_000 });
+    });
+  },
 });
 
 export { expect } from "@playwright/test";