add e2e test

Author: conico974

.github/workflows/e2e.yml

@@ -111,6 +111,7 @@ jobs:
       - name: Install Nextjs in app-pages-router
         working-directory: examples/app-pages-router
         run: pnpm add next@${{ needs.check_next_version.outputs.previousNextVersion }}
+      # We do not install the latest canary of Next in the experimental app.
 
       - name: Get Playwright version
         id: playwright-version
@@ -157,6 +158,8 @@ jobs:
           echo "PAGES_ROUTER_URL=$PAGES_ROUTER_URL" >> $GITHUB_ENV
           APP_PAGES_ROUTER_URL=$(jq -r '.["e2e-example-AppPagesRouter"].url' .sst/outputs.json)
           echo "APP_PAGES_ROUTER_URL=$APP_PAGES_ROUTER_URL" >> $GITHUB_ENV
+          EXPERIMENTAL_APP_URL=$(jq -r '.["e2e-example-Experimental"].url' .sst/outputs.json)
+          echo "EXPERIMENTAL_APP_URL=$EXPERIMENTAL_APP_URL" >> $GITHUB_ENV
 
       - name: Run e2e Test
         run: npm run e2e:test

examples/experimental/package.json

@@ -4,9 +4,9 @@
   "private": true,
   "scripts": {
     "openbuild": "node ../../packages/open-next/dist/index.js build",
-    "dev": "next dev --turbopack",
+    "dev": "next dev --turbopack --port 3004",
     "build": "next build",
-    "start": "next start",
+    "start": "next start --port 3004",
     "lint": "next lint",
     "clean": "rm -rf .turbo node_modules .next .open-next"
   },

packages/tests-e2e/playwright.config.js

@@ -23,5 +23,12 @@ export default defineConfig({
         baseURL: process.env.APP_PAGES_ROUTER_URL || "http://localhost:3003",
       },
     },
+    {
+      name: "experimental",
+      testMatch: ["tests/experimental/*.test.ts"],
+      use: {
+        baseURL: process.env.EXPERIMENTAL_APP_URL || "http://localhost:3004",
+      },
+    },
   ],
 });

packages/tests-e2e/tests/experimental/ppr.test.ts

@@ -0,0 +1,22 @@
+import { expect, test } from "@playwright/test";
+
+test("PPR should show loading first", async ({ page }) => {
+  await page.goto("/");
+  await page.getByRole("link", { name: "Incremental PPR" }).click();
+  await page.waitForURL("/ppr");
+  const loading = page.getByText("Loading...");
+  await expect(loading).toBeVisible();
+  const el = page.getByText("Dynamic Component");
+  await expect(el).toBeVisible();
+});
+
+test("PPR rsc prefetch request should be cached", async ({ request }) => {
+  const resp = await request.get("/ppr", {
+    headers: { rsc: "1", "next-router-prefetch": "1" },
+  });
+  expect(resp.status()).toEqual(200);
+  const headers = resp.headers();
+  expect(headers["x-nextjs-postponed"]).toEqual("1");
+  expect(headers["x-nextjs-cache"]).toEqual("HIT");
+  expect(headers["cache-control"]).toEqual("s-maxage=31536000");
+});