mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
63f485248b
### 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¤tTab=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]>
87 lines
3.7 KiB
TypeScript
87 lines
3.7 KiB
TypeScript
import { createNext, FileRef } from 'e2e-utils'
|
|
import { NextInstance } from 'e2e-utils'
|
|
import webdriver from 'next-webdriver'
|
|
|
|
describe('navigation between pages and app dir', () => {
|
|
let next: NextInstance
|
|
|
|
beforeAll(async () => {
|
|
next = await createNext({
|
|
files: new FileRef(__dirname),
|
|
dependencies: {
|
|
typescript: 'latest',
|
|
'@types/react': 'latest',
|
|
'@types/node': 'latest',
|
|
},
|
|
})
|
|
})
|
|
afterAll(() => next.destroy())
|
|
|
|
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', { timeout: 30000 })
|
|
expect(await browser.hasElementByCssSelector('#app-page')).toBeFalse()
|
|
expect(await browser.elementById('pages-page').text()).toBe('Pages Page')
|
|
})
|
|
|
|
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', { timeout: 30000 })
|
|
expect(await browser.hasElementByCssSelector('#pages-page')).toBeFalse()
|
|
expect(await browser.elementById('app-page').text()).toBe('App Page')
|
|
})
|
|
|
|
// TODO: re-enable after 404 transition bug is addressed
|
|
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', { 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', { 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', { 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', { timeout: 30000 })
|
|
expect(await browser.hasElementByCssSelector('#app-page')).toBeFalse()
|
|
expect(await browser.elementById('pages-page').text()).toBe('Pages Page')
|
|
})
|
|
}
|
|
})
|