fix(e2e): Ensure the response event listener is registered before navigation

Author: sommeeeer

packages/tests-e2e/tests/appRouter/middleware.rewrite.test.ts

@@ -23,21 +23,26 @@ test("Middleware Rewrite", async ({ page }) => {
 });
 
 test("Middleware Rewrite External Image", async ({ page }) => {
-  await page.goto("/rewrite-external");
   page.on("response", async (response) => {
     expect(response.status()).toBe(200);
     expect(response.headers()["content-type"]).toBe("image/png");
     expect(response.headers()["cache-control"]).toBe("max-age=600");
     const bodyBuffer = await response.body();
     expect(validateMd5(bodyBuffer, OPENNEXT_PNG_MD5)).toBe(true);
   });
+  await page.goto("/rewrite-external");
 });
 
 test("Middleware Rewrite Status Code", async ({ page }) => {
+  // Need to set up the event before navigating to the page to avoid missing it
+  // We need to check the URL here also cause there will be multiple responses (i.e the fonts, css, js, etc)
+  page.on("response", async (response) => {
+    // `response.url()` will be the full URL including the host, so we need to check the pathname
+    if (new URL(response.url()).pathname === "/rewrite-status-code") {
+      expect(response.status()).toBe(403);
+    }
+  });
   await page.goto("/rewrite-status-code");
   const el = page.getByText("Rewritten Destination", { exact: true });
   await expect(el).toBeVisible();
-  page.on("response", async (response) => {
-    expect(response.status()).toBe(403);
-  });
 });