de-flake interception-route-prefetch-cache test (vercel#66854)

All deployed apps looked/worked fine -- I think just weren't handling
the timing right in this test. When replaying locally, it seemed the
browser was clicking the various links pre-hydration and missing the
route interception cue.

<details>
<summary>View Runs</summary>

- Run 1
![CleanShot 2024-06-13 at 19 24
20@2x](https://github.com/vercel/next.js/assets/1939140/8997255b-7812-4266-a9dc-c839b74abb37)

- Run 2
![CleanShot 2024-06-13 at 19 44
29@2x](https://github.com/vercel/next.js/assets/1939140/75968aa5-ac98-4170-b23d-f0c395f748d9)

- Run 3
![CleanShot 2024-06-13 at 19 47
59@2x](https://github.com/vercel/next.js/assets/1939140/f1314f07-b989-4687-a134-f25b57a5c6a2)


</details>

test/e2e/app-dir/interception-route-prefetch-cache/app/page.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link'
 
 export default function Home() {
   return (
-    <ul>
+    <ul id="home">
       <li>
         <Link href="/foo">foo</Link>
       </li>

test/e2e/app-dir/interception-route-prefetch-cache/interception-route-prefetch-cache.test.ts

@@ -1,43 +1,54 @@
 import { nextTestSetup, FileRef } from 'e2e-utils'
-import { check } from 'next-test-utils'
+import { retry } from 'next-test-utils'
 import { join } from 'path'
 import { Response } from 'playwright'
 
 describe('interception-route-prefetch-cache', () => {
   function runTests({ next }: ReturnType<typeof nextTestSetup>) {
     it('should render the correct interception when two distinct layouts share the same path structure', async () => {
       const browser = await next.browser('/')
+      await browser.waitForIdleNetwork()
 
       await browser.elementByCss('[href="/foo"]').click()
 
-      await check(() => browser.elementById('children').text(), /Foo Page/)
+      await retry(async () => {
+        expect(await browser.elementById('children').text()).toMatch(/Foo Page/)
+      })
 
       await browser.elementByCss('[href="/post/1"]').click()
 
-      // Ensure the existing page content is still the same
-      await check(() => browser.elementById('children').text(), /Foo Page/)
+      await retry(async () => {
+        // Ensure the existing page content is still the same
+        expect(await browser.elementById('children').text()).toMatch(/Foo Page/)
 
-      // Verify we got the right interception
-      await check(
-        () => browser.elementById('slot').text(),
-        /Intercepted on Foo Page/
-      )
+        // Verify we got the right interception
+        expect(await browser.elementById('slot').text()).toMatch(
+          /Intercepted on Foo Page/
+        )
+      })
 
       // Go back home. At this point, the router cache should have content from /foo
       // Now we want to ensure that /bar doesn't share that same prefetch cache entry
       await browser.elementByCss('[href="/"]').click()
+
+      await browser.waitForElementByCss('#home')
+
       await browser.elementByCss('[href="/bar"]').click()
 
-      await check(() => browser.elementById('children').text(), /Bar Page/)
+      await retry(async () => {
+        expect(await browser.elementById('children').text()).toMatch(/Bar Page/)
+      })
+
       await browser.elementByCss('[href="/post/1"]').click()
 
       // Ensure the existing page content is still the same. If the prefetch cache resolved the wrong cache node
       // then we'd see the content from /foo
-      await check(() => browser.elementById('children').text(), /Bar Page/)
-      await check(
-        () => browser.elementById('slot').text(),
-        /Intercepted on Bar Page/
-      )
+      await retry(async () => {
+        expect(await browser.elementById('children').text()).toMatch(/Bar Page/)
+        expect(await browser.elementById('slot').text()).toMatch(
+          /Intercepted on Bar Page/
+        )
+      })
     })
   }