test(interoperability): increase waitForElementByCss timeout for cross-router navigations (#91918)

### What?

Increase the `waitForElementByCss` timeout from the default (~10 s) to
30 s on every cross-router navigation assertion in
`test/e2e/app-dir/interoperability-with-pages/navigation.test.ts`.

### Why?


[Datadog test
runs](https://app.datadoghq.com/ci/test/runs?query=test_level%3Atest%20%40test.source.file%3Atest%2Fe2e%2Fapp-dir%2Finteroperability-with-pages%2Fnavigation.test.ts%20%40test.status%3Afail%20%40test.name%3A%22navigation%20between%20pages%20and%20app%20dir%20It%20should%20be%20able%20to%20navigate%20pages%20-%3E%20app%20and%20go%20back%20an%20forward%22&agg_m=count&agg_m_source=base&agg_t=count&cols=%40test.status%2Ctimestamp%2C%40duration%2C%40test.type%2C%40test.is_known_flaky%2C%40test.name&currentTab=overview&eventStack=&fromUser=false&index=citest&start=1773951834834&end=1774556634834&paused=false)


Navigating between the App Router and Pages Router (in either direction)
always triggers a **full-page reload** because the two routers cannot
share a client-side navigation. In dev mode, the destination page is
compiled on-demand the first time it is visited, which consistently
takes ~13 s in CI.

The default `waitForElementByCss` timeout is ~10 s, so the `app ->
pages` test would intermittently time out before the newly compiled page
finished loading — a classic flaky-test failure that is load-sensitive
and non-deterministic across machines.

This is a test-only fix; no framework behaviour changes.

### How?

Pass `{ timeout: 30000 }` as the second argument to every
`waitForElementByCss` call that waits for an element after a
cross-router navigation (8 call-sites across 4 tests). A comment is
added before each group of calls explaining why the higher value is
necessary.

Verified locally with 3 consecutive runs — all 4 tests pass, and the
previously flaky `app -> pages` case now completes in ~13 s without
timing out.

Co-authored-by: Tobias Koppers <[email protected]>
Co-authored-by: Claude <[email protected]>

test/e2e/app-dir/interoperability-with-pages/navigation.test.ts

@@ -20,10 +20,12 @@ describe('navigation between pages and app dir', () => {
   it('It should be able to navigate app -> pages', async () => {
     const browser = await webdriver(next.url, '/app')
     expect(await browser.elementById('app-page').text()).toBe('App Page')
+    // Increased timeout: in dev mode, cross-router navigation triggers on-demand
+    // compilation which can take longer than the default timeout.
     await browser
       .elementById('link-to-pages')
       .click()
-      .waitForElementByCss('#pages-page')
+      .waitForElementByCss('#pages-page', { timeout: 30000 })
     expect(await browser.hasElementByCssSelector('#app-page')).toBeFalse()
     expect(await browser.elementById('pages-page').text()).toBe('Pages Page')
   })
@@ -31,10 +33,12 @@ describe('navigation between pages and app dir', () => {
   it('It should be able to navigate pages -> app', async () => {
     const browser = await webdriver(next.url, '/pages')
     expect(await browser.elementById('pages-page').text()).toBe('Pages Page')
+    // Increased timeout: in dev mode, cross-router navigation triggers on-demand
+    // compilation which can take longer than the default timeout.
     await browser
       .elementById('link-to-app')
       .click()
-      .waitForElementByCss('#app-page')
+      .waitForElementByCss('#app-page', { timeout: 30000 })
     expect(await browser.hasElementByCssSelector('#pages-page')).toBeFalse()
     expect(await browser.elementById('app-page').text()).toBe('App Page')
   })
@@ -43,28 +47,38 @@ describe('navigation between pages and app dir', () => {
   if (!(global as any).isNextDeploy) {
     it('It should be able to navigate pages -> app and go back an forward', async () => {
       const browser = await webdriver(next.url, '/pages')
+      // Increased timeout: in dev mode, cross-router navigation triggers on-demand
+      // compilation which can take longer than the default timeout.
       await browser
         .elementById('link-to-app')
         .click()
-        .waitForElementByCss('#app-page')
-      await browser.back().waitForElementByCss('#pages-page')
+        .waitForElementByCss('#app-page', { timeout: 30000 })
+      await browser
+        .back()
+        .waitForElementByCss('#pages-page', { timeout: 30000 })
       expect(await browser.hasElementByCssSelector('#app-page')).toBeFalse()
       expect(await browser.elementById('pages-page').text()).toBe('Pages Page')
-      await browser.forward().waitForElementByCss('#app-page')
+      await browser
+        .forward()
+        .waitForElementByCss('#app-page', { timeout: 30000 })
       expect(await browser.hasElementByCssSelector('#pages-page')).toBeFalse()
       expect(await browser.elementById('app-page').text()).toBe('App Page')
     })
 
     it('It should be able to navigate app -> pages and go back and forward', async () => {
       const browser = await webdriver(next.url, '/app')
+      // Increased timeout: in dev mode, cross-router navigation triggers on-demand
+      // compilation which can take longer than the default timeout.
       await browser
         .elementById('link-to-pages')
         .click()
-        .waitForElementByCss('#pages-page')
-      await browser.back().waitForElementByCss('#app-page')
+        .waitForElementByCss('#pages-page', { timeout: 30000 })
+      await browser.back().waitForElementByCss('#app-page', { timeout: 30000 })
       expect(await browser.hasElementByCssSelector('#pages-page')).toBeFalse()
       expect(await browser.elementById('app-page').text()).toBe('App Page')
-      await browser.forward().waitForElementByCss('#pages-page')
+      await browser
+        .forward()
+        .waitForElementByCss('#pages-page', { timeout: 30000 })
       expect(await browser.hasElementByCssSelector('#app-page')).toBeFalse()
       expect(await browser.elementById('pages-page').text()).toBe('Pages Page')
     })