Unflake parallel-routes-revalidation test

[flakiness metric](https://app.datadoghq.com/ci/test/runs?query=test_level%3Atest%20env%3Aci%20%40git.repository.id%3Agithub.com%2Fvercel%2Fnext.js%20%40test.service%3Anextjs%20%40test.status%3Afail%20%28-%40git.branch%3A%2A%3F%2A%20OR%20%40git.branch%3Acanary%29%20%40test.name%3A%22parallel-routes-revalidation%20should%20not%20trigger%20the%20intercepted%20route%20when%20lazy-fetching%20missing%20data%22&agg_m=count&agg_m_source=base&agg_t=count&citest_explorer_sort=timestamp%2Casc&cols=%40test.status%2Ctimestamp%2C%40test.suite%3A83%2C%40test.name%3A607%2C%40git.branch&currentTab=overview&eventStack=&fromUser=false&graphType=flamegraph&index=citest&start=1738068572273&end=1740660572273&paused=false)

The latest canary release
[failed](https://github.com/vercel/next.js/actions/runs/13555525831/job/37890389323)
because the deploy test `parallel-routes-revalidation › should not
trigger the intercepted route when lazy-fetching missing data` kept
failing even with retries.

According to my local testing using `pnpm test-deploy
test/e2e/app-dir/parallel-routes-revalidation/parallel-routes-revalidation.test.ts
-t 'should not trigger the intercepted route when lazy-fetching missing
data'`, the forward navigation was sometimes triggered too early after
the page was reloaded.

This PR introduces an option to wait for hydration (same as we do for
the initial load) when reloading a page, which fixed the test for me.

Note: I don't like the option name `waitHydration`, but went with it
anyways because we're already using it for the `next.browser` options.

Author: unstubbable

test/e2e/app-dir/parallel-routes-revalidation/parallel-routes-revalidation.test.ts

@@ -174,8 +174,9 @@ describe('parallel-routes-revalidation', () => {
     // go back to the previous page
     await browser.back()
 
-    // reload the page, which will cause the router to no longer have cache nodes
-    await browser.refresh()
+    // reload the page, which will cause the router to no longer have cache
+    // nodes. make sure the page is hydrated before going forward.
+    await browser.refresh({ waitHydration: true })
 
     // go forward, this will trigger a lazy fetch for the missing data, and should restore the detail page
     await browser.forward()

test/lib/browsers/base.ts

@@ -85,7 +85,10 @@ export abstract class BrowserInterface<TCurrent = any> {
    * Use browsers `go forward` functionality. Inverse of back.
    */
   abstract forward(options?: any): BrowserInterface<any> & Promise<any>
-  abstract refresh(): BrowserInterface<any> & Promise<any>
+  abstract refresh(options?: {
+    waitHydration?: boolean
+    retryWaitHydration?: boolean
+  }): BrowserInterface<any> & Promise<any>
   abstract setDimensions(opts: {
     height: number
     width: number
@@ -129,4 +132,7 @@ export abstract class BrowserInterface<TCurrent = any> {
   abstract websocketFrames(): Promise<any[]>
   abstract url(): Promise<string>
   abstract waitForIdleNetwork(): Promise<void>
+  abstract waitForHydration(options?: {
+    retryWaitHydration?: boolean
+  }): Promise<void>
 }

test/lib/browsers/playwright.ts

@@ -302,9 +302,19 @@ export class Playwright extends BrowserInterface {
       await page.goForward(options)
     })
   }
-  refresh() {
+  refresh({
+    waitHydration,
+    retryWaitHydration,
+  }: {
+    waitHydration?: boolean
+    retryWaitHydration?: boolean
+  } = {}) {
     return this.chain(async () => {
       await page.reload()
+
+      if (waitHydration) {
+        this.waitForHydration({ retryWaitHydration })
+      }
     })
   }
   setDimensions({ width, height }: { height: number; width: number }) {
@@ -518,6 +528,59 @@ export class Playwright extends BrowserInterface {
     })
   }
 
+  async waitForHydration({
+    retryWaitHydration = false,
+  }: { retryWaitHydration?: boolean } = {}): Promise<void> {
+    const fullUrl = page.url()
+    console.log(`\n> Waiting hydration for ${fullUrl}\n`)
+
+    const checkHydrated = async () => {
+      await this.evalAsync(function () {
+        var callback = arguments[arguments.length - 1]
+
+        // if it's not a Next.js app return
+        if (
+          !document.documentElement.innerHTML.includes('__NEXT_DATA__') &&
+          // @ts-ignore next exists on window if it's a Next.js page.
+          typeof ((window as any).next && (window as any).next.version) ===
+            'undefined'
+        ) {
+          console.log('Not a next.js page, resolving hydrate check')
+          callback()
+        }
+
+        // TODO: should we also ensure router.isReady is true
+        // by default before resolving?
+        if ((window as any).__NEXT_HYDRATED) {
+          console.log('Next.js page already hydrated')
+          callback()
+        } else {
+          var timeout = setTimeout(callback, 10 * 1000)
+          ;(window as any).__NEXT_HYDRATED_CB = function () {
+            clearTimeout(timeout)
+            console.log('Next.js hydrate callback fired')
+            callback()
+          }
+        }
+      })
+    }
+
+    try {
+      await checkHydrated()
+    } catch (err) {
+      if (retryWaitHydration) {
+        // re-try in case the page reloaded during check
+        await new Promise((resolve) => setTimeout(resolve, 2000))
+        await checkHydrated()
+      } else {
+        console.error('failed to check hydration')
+        throw err
+      }
+    }
+
+    console.log(`\n> Hydration complete for ${fullUrl}\n`)
+  }
+
   locateRedbox(): Locator {
     return page.locator(
       'nextjs-portal [aria-labelledby="nextjs__container_errors_label"]'

test/lib/next-webdriver.ts

@@ -145,53 +145,7 @@ export default async function webdriver(
 
   // Wait for application to hydrate
   if (waitHydration) {
-    console.log(`\n> Waiting hydration for ${fullUrl}\n`)
-
-    const checkHydrated = async () => {
-      await browser.evalAsync(function () {
-        var callback = arguments[arguments.length - 1]
-
-        // if it's not a Next.js app return
-        if (
-          !document.documentElement.innerHTML.includes('__NEXT_DATA__') &&
-          // @ts-ignore next exists on window if it's a Next.js page.
-          typeof ((window as any).next && (window as any).next.version) ===
-            'undefined'
-        ) {
-          console.log('Not a next.js page, resolving hydrate check')
-          callback()
-        }
-
-        // TODO: should we also ensure router.isReady is true
-        // by default before resolving?
-        if ((window as any).__NEXT_HYDRATED) {
-          console.log('Next.js page already hydrated')
-          callback()
-        } else {
-          var timeout = setTimeout(callback, 10 * 1000)
-          ;(window as any).__NEXT_HYDRATED_CB = function () {
-            clearTimeout(timeout)
-            console.log('Next.js hydrate callback fired')
-            callback()
-          }
-        }
-      })
-    }
-
-    try {
-      await checkHydrated()
-    } catch (err) {
-      if (retryWaitHydration) {
-        // re-try in case the page reloaded during check
-        await new Promise((resolve) => setTimeout(resolve, 2000))
-        await checkHydrated()
-      } else {
-        console.error('failed to check hydration')
-        throw err
-      }
-    }
-
-    console.log(`\n> Hydration complete for ${fullUrl}\n`)
+    await browser.waitForHydration({ retryWaitHydration })
   }
 
   // This is a temporary workaround for turbopack starting watching too late.