diff --git a/packages/tests-e2e/README.md b/packages/tests-e2e/README.md index bd7ea2a82..1b199f438 100644 --- 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 index 06929f3bf..4d0d35c03 100644 --- 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 index b8d74ec8d..93abbd26d 100644 --- 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,7 +14,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:"); @@ -24,17 +22,17 @@ test("Incremental Static Regeneration", async ({ page }) => { 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 index 8e8af5da4..77e33ac3f 100644 --- 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 index 5d97a789e..63020afdb 100644 --- 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 index 82e4888aa..934925e98 100644 --- 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 index b848f6239..c167e131c 100644 --- 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,7 +15,7 @@ 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(); @@ -25,7 +23,7 @@ test("Server Sent Events", async ({ page }) => { // 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(); @@ -33,7 +31,7 @@ test("Server Sent Events", async ({ page }) => { // 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(); @@ -41,7 +39,7 @@ test("Server Sent Events", async ({ page }) => { 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 index 4a2b607b2..efc45e716 100644 --- 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 index 66301d38e..aac897d2a 100644 --- 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,7 +13,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 }) => { 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 index fb4139e4d..93c88f2ce 100644 --- 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 deleted file mode 100644 index 4e532a464..000000000 --- a/packages/tests-e2e/tests/utils.ts +++ /dev/null @@ -1,3 +0,0 @@ -export function wait(ms: number) { - return new Promise((resolve) => setTimeout(resolve, ms)); -}