test(e2e): use page.waitForTimeout (#700)

vicb · web-flow · commit 25d317cfe1d7 · 2025-01-16T13:20:24.000+01:00
diff --git a/packages/tests-e2e/README.md b/packages/tests-e2e/README.md
@@ -22,26 +22,30 @@ Their respective `packages/` are located at:
 
 The GitHub actions will trigger the [e2e test](/.github/workflows//e2e.yml), which deploys the app in the [Example](/example/) folder. The deploy command is:
 
-### Running the tests against the deployed app
+## Running the tests against the deployed app
 
 1. Deploy the app
+
 ```bash
 cd examples/sst
 npx sst deploy --stage e2e
 ```
+
 2. Export the URLS
+
 ```bash
 export APP_ROUTER_URL=$(jq -r '.["e2e-example-AppRouter"].url' .sst/outputs.json)
 export PAGES_ROUTER_URL=$(jq -r '.["e2e-example-PagesRouter"].url' .sst/outputs.json)
 export APP_PAGES_ROUTER_URL=$(jq -r '.["e2e-example-AppPagesRouter"].url' .sst/outputs.json)
 ```
+
 3. Run the test
+
 ```bash
 cd ../../packages/tests-e2e
 pnpm run e2e:dev
 ```
 
-
 ## Gotchas
 
 `isr.test.ts` returns a timestamp, when running `next dev`, ISR does not cache so each reload is a new timestamp. You'll need to `next build` and `next start` for Next to not cache.
diff --git a/packages/tests-e2e/tests/appPagesRouter/isr.test.ts b/packages/tests-e2e/tests/appPagesRouter/isr.test.ts
@@ -1,7 +1,5 @@
 import { expect, test } from "@playwright/test";
 
-import { wait } from "../utils";
-
 test("Incremental Static Regeneration", async ({ page }) => {
   test.setTimeout(60000);
   await page.goto("/");
@@ -14,7 +12,7 @@ test("Incremental Static Regeneration", async ({ page }) => {
   let newTime: typeof time;
   let tempTime = time;
   do {
-    await wait(1000);
+    await page.waitForTimeout(1000);
     await page.reload();
     time = tempTime;
     el = page.getByText("Time:");
@@ -23,17 +21,17 @@ test("Incremental Static Regeneration", async ({ page }) => {
   } while (time !== newTime);
   await page.reload();
 
-  await wait(1000);
+  await page.waitForTimeout(1000);
   el = page.getByText("Time:");
   const midTime = await el.textContent();
   // Expect that the time is still stale
   expect(midTime).toEqual(newTime);
 
   // Wait 10 + 1 seconds for ISR to regenerate time
-  await wait(11000);
+  await page.waitForTimeout(11000);
   let finalTime = newTime;
   do {
-    await wait(2000);
+    await page.waitForTimeout(2000);
     el = page.getByText("Time:");
     finalTime = await el.textContent();
     await page.reload();
diff --git a/packages/tests-e2e/tests/appPagesRouter/pages_isr.test.ts b/packages/tests-e2e/tests/appPagesRouter/pages_isr.test.ts
@@ -1,7 +1,5 @@
 import { expect, test } from "@playwright/test";
 
-import { wait } from "../utils";
-
 test("Incremental Static Regeneration", async ({ page }) => {
   test.setTimeout(60000);
   await page.goto("/");
@@ -16,25 +14,25 @@ test("Incremental Static Regeneration", async ({ page }) => {
   let newTime: typeof time;
   let tempTime = time;
   do {
-    await wait(1000);
+    await page.waitForTimeout(1000);
     await page.reload();
     time = tempTime;
     el = page.getByText("Time:");
     newTime = await el.textContent();
     tempTime = newTime;
   } while (time !== newTime);
   await page.reload();
-  await wait(1000);
+  await page.waitForTimeout(1000);
   el = page.getByText("Time:");
   const midTime = await el.textContent();
   // Expect that the time is still stale
   expect(midTime).toEqual(newTime);
 
   // Wait 10 + 1 seconds for ISR to regenerate time
-  await wait(11000);
+  await page.waitForTimeout(11000);
   let finalTime = newTime;
   do {
-    await wait(2000);
+    await page.waitForTimeout(2000);
     el = page.getByText("Time:");
     finalTime = await el.textContent();
     await page.reload();
diff --git a/packages/tests-e2e/tests/appPagesRouter/pages_ssr.test.ts b/packages/tests-e2e/tests/appPagesRouter/pages_ssr.test.ts
@@ -1,7 +1,5 @@
 import { expect, test } from "@playwright/test";
 
-import { wait } from "../utils";
-
 test("Server Side Render", async ({ page }) => {
   await page.goto("/");
   await page.locator('[href="/pages_ssr"]').click();
@@ -24,6 +22,6 @@ test("Server Side Render", async ({ page }) => {
     await expect(el).toBeVisible();
     expect(time).not.toEqual(newTime);
     time = newTime;
-    await wait(250);
+    await page.waitForTimeout(250);
   }
 });
diff --git a/packages/tests-e2e/tests/appPagesRouter/ssr.test.ts b/packages/tests-e2e/tests/appPagesRouter/ssr.test.ts
@@ -1,7 +1,5 @@
 import { expect, test } from "@playwright/test";
 
-import { wait } from "../utils";
-
 test("Server Side Render", async ({ page }) => {
   await page.goto("/");
   await page.locator('[href="/ssr"]').click();
@@ -24,7 +22,7 @@ test("Server Side Render", async ({ page }) => {
     await expect(el).toBeVisible();
     expect(time).not.toEqual(newTime);
     time = newTime;
-    await wait(250);
+    await page.waitForTimeout(250);
   }
 });
 
diff --git a/packages/tests-e2e/tests/appRouter/isr.test.ts b/packages/tests-e2e/tests/appRouter/isr.test.ts
@@ -1,7 +1,5 @@
 import { expect, test } from "@playwright/test";
 
-import { wait } from "../utils";
-
 test("Incremental Static Regeneration", async ({ page }) => {
   test.setTimeout(45000);
   await page.goto("/");
@@ -14,7 +12,7 @@ test("Incremental Static Regeneration", async ({ page }) => {
   let newTime: typeof time;
   let tempTime = time;
   do {
-    await wait(1000);
+    await page.waitForTimeout(1000);
     await page.reload();
     time = tempTime;
     el = page.getByText("Time:");
@@ -23,17 +21,17 @@ test("Incremental Static Regeneration", async ({ page }) => {
   } while (time !== newTime);
   await page.reload();
 
-  await wait(1000);
+  await page.waitForTimeout(1000);
   el = page.getByText("Time:");
   const midTime = await el.textContent();
   // Expect that the time is still stale
   expect(midTime).toEqual(newTime);
 
   // Wait 10 + 1 seconds for ISR to regenerate time
-  await wait(11000);
+  await page.waitForTimeout(11000);
   let finalTime = newTime;
   do {
-    await wait(2000);
+    await page.waitForTimeout(2000);
     el = page.getByText("Time:");
     finalTime = await el.textContent();
     await page.reload();
@@ -56,7 +54,7 @@ test("headers", async ({ page }) => {
     if (headers["cache-control"] === "max-age=10, stale-while-revalidate=999") {
       break;
     }
-    await wait(1000);
+    await page.waitForTimeout(1000);
     responsePromise = page.waitForResponse((response) => {
       return response.status() === 200;
     });
diff --git a/packages/tests-e2e/tests/appRouter/sse.test.ts b/packages/tests-e2e/tests/appRouter/sse.test.ts
@@ -3,8 +3,6 @@
 
 import { expect, test } from "@playwright/test";
 
-import { wait } from "../utils";
-
 // NOTE: We don't await page load b/c we want to see the Loading page
 test("Server Sent Events", async ({ page }) => {
   await page.goto("/");
@@ -17,31 +15,31 @@ test("Server Sent Events", async ({ page }) => {
   // 2nd message shouldn't arrive yet
   let msg2 = page.getByText(`Message 2: {"message":"hello:2"`);
   await expect(msg2).not.toBeVisible();
-  await wait(2000);
+  await page.waitForTimeout(2000);
   // 2nd message should arrive after 2s
   msg2 = page.getByText(`Message 2: {"message":"hello:2"`);
   await expect(msg2).toBeVisible();
 
   // 3rd message shouldn't arrive yet
   let msg3 = page.getByText(`Message 3: {"message":"hello:3"`);
   await expect(msg3).not.toBeVisible();
-  await wait(2000);
+  await page.waitForTimeout(2000);
   // 3rd message should arrive after 2s
   msg3 = page.getByText(`Message 3: {"message":"hello:3"`);
   await expect(msg3).toBeVisible();
 
   // 4th message shouldn't arrive yet
   let msg4 = page.getByText(`Message 4: {"message":"hello:4"`);
   await expect(msg4).not.toBeVisible();
-  await wait(2000);
+  await page.waitForTimeout(2000);
   // 4th message should arrive after 2s
   msg4 = page.getByText(`Message 4: {"message":"hello:4"`);
   await expect(msg4).toBeVisible();
 
   let close = page.getByText(`Message 5: {"message":"close"`);
   await expect(close).not.toBeVisible();
 
-  await wait(2000);
+  await page.waitForTimeout(2000);
   close = page.getByText(`Message 5: {"message":"close"`);
   await expect(close).toBeVisible();
 });
diff --git a/packages/tests-e2e/tests/appRouter/ssr.test.ts b/packages/tests-e2e/tests/appRouter/ssr.test.ts
@@ -3,8 +3,6 @@
 
 import { expect, test } from "@playwright/test";
 
-import { wait } from "../utils";
-
 // NOTE: We don't await page load b/c we want to see the Loading page
 test("Server Side Render and loading.tsx", async ({ page }) => {
   test.setTimeout(600000);
@@ -25,40 +23,14 @@ test("Server Side Render and loading.tsx", async ({ page }) => {
     const time = await el.textContent();
     expect(time).not.toEqual(lastTime);
     lastTime = time!;
-    await wait(1000);
+    await page.waitForTimeout(1000);
   }
-
-  // let loading = page.getByText("Loading...");
-  // await expect(loading).toBeVisible();
-
-  // let el = page.getByText("Time:");
-  // await expect(el).toBeVisible();
-  // const time = await el.textContent();
-
-  // page.reload();
-  // loading = page.getByText("Loading...");
-  // await expect(loading).toBeVisible();
-
-  // el = page.getByText("Time:");
-  // let newTime = await el.textContent();
-  // await expect(el).toBeVisible();
-  // await expect(time).not.toEqual(newTime);
-
-  // await wait(5000);
-  // page.reload();
-  // loading = page.getByText("Loading...");
-  // await expect(loading).toBeVisible();
-
-  // el = page.getByText("Time:");
-  // newTime = await el.textContent();
-  // await expect(el).toBeVisible();
-  // await expect(time).not.toEqual(newTime);
 });
 
 test("Fetch cache properly cached", async ({ page }) => {
   await page.goto("/ssr");
   const originalDate = await page.getByText("Cached fetch:").textContent();
-  await wait(2000);
+  await page.waitForTimeout(2000);
   await page.reload();
   const newDate = await page.getByText("Cached fetch:").textContent();
   expect(originalDate).toEqual(newDate);
diff --git a/packages/tests-e2e/tests/pagesRouter/isr.test.ts b/packages/tests-e2e/tests/pagesRouter/isr.test.ts
@@ -1,7 +1,5 @@
 import { expect, test } from "@playwright/test";
 
-import { wait } from "../utils";
-
 test("Incremental Static Regeneration", async ({ page }) => {
   test.setTimeout(45000);
   await page.goto("/");
@@ -15,25 +13,25 @@ test("Incremental Static Regeneration", async ({ page }) => {
   let newTime: typeof time;
   let tempTime = time;
   do {
-    await wait(1000);
+    await page.waitForTimeout(1000);
     await page.reload();
     time = tempTime;
     el = page.getByText("Time:");
     newTime = await el.textContent();
     tempTime = newTime;
   } while (time !== newTime);
   await page.reload();
-  await wait(1000);
+  await page.waitForTimeout(1000);
   el = page.getByText("Time:");
   const midTime = await el.textContent();
   // Expect that the time is still stale
   expect(midTime).toEqual(newTime);
 
   // Wait 10 + 1 seconds for ISR to regenerate time
-  await wait(11000);
+  await page.waitForTimeout(11000);
   let finalTime = newTime;
   do {
-    await wait(2000);
+    await page.waitForTimeout(2000);
     el = page.getByText("Time:");
     finalTime = await el.textContent();
     await page.reload();
diff --git a/packages/tests-e2e/tests/pagesRouter/ssr.test.ts b/packages/tests-e2e/tests/pagesRouter/ssr.test.ts
@@ -1,7 +1,5 @@
 import { expect, test } from "@playwright/test";
 
-import { wait } from "../utils";
-
 test("Server Side Render", async ({ page }) => {
   await page.goto("/");
   await page.locator('[href="/ssr/"]').click();
@@ -24,7 +22,7 @@ test("Server Side Render", async ({ page }) => {
     await expect(el).toBeVisible();
     expect(time).not.toEqual(newTime);
     time = newTime;
-    await wait(250);
+    await page.waitForTimeout(250);
   }
 });
 
diff --git a/packages/tests-e2e/tests/utils.ts b/packages/tests-e2e/tests/utils.ts
