.waitForNavigation() deprecation

[MindaugasMateika]

Hello,

does .waitForNavigation() deprecation means that at some point in the future this method will be deleted?

I was planning replacing this method with .waitForURL() but it doesn't work if navigation happens to the same url. For example:

• Open foo.url/
• Do something that triggers a navigation to the same url
• Use await page.waitForURL(/\/$/)
• Navigation wait does not happen

[aslushnikov]

does .waitForNavigation() deprecation means that at some point in the future this method will be deleted?

@MindaugasMateika It will never be removed. Its use is discouraged, because it's hard to make it work reliably. It only works if and only if you know for sure what the page is doing.

Hope it makes it clearer!

[jorisre]

I was planning replacing this method with .waitForURL() but it doesn't work if navigation happens to the same url

@aslushnikov What's about ⬆️ ? Thank you :)

I am still concerned about this. @aslushnikov said above that it will never be removed, but on the discord server, @mxschmitt said it maybe could be removed in pw v2.

So which is it please? Thanks.

[mxschmitt]

Playwright version 2 is not gonna happen soon, thats why Andrey wrote, its never getting removed. If we remove it, we'll add either another method where you can migrate to or you don't need it anymore.

We'll definitely not remove something which is essential when covering this specific e2e testing use-case.

@mxschmitt Good news, thank you for the reply :)

[regseb]

To replace the deprecated Page.waitForNavigation() method, you can add the waitNavigation option to the Locator.click() method (and all methods that have the noWaitAfter option):

• waitNavigation boolean (optional)

  Forces wait for the main frame navigation. It is useful for when you run code which will indirectly cause the page to navigate. e.g. The click target has an onclick handler that triggers navigation from a setTimeout. Defaults to false.

[nekolab]

@regseb

To replace the deprecated Page.waitForNavigation() method, you can add the waitNavigation option to the Locator.click() method (and all methods that have the noWaitAfter option):

Any reference? I cannot find any related change neither in recent commits, nor the type definition for the click API

playwright/packages/protocol/src/channels.ts

Lines 3154 to 3164 in f15ea35

	export type ElementHandleClickOptions = {
	force?: boolean,
	noWaitAfter?: boolean,
	modifiers?: ('Alt' | 'Control' | 'Meta' | 'Shift')[],
	position?: Point,
	delay?: number,
	button?: 'left' | 'right' | 'middle',
	clickCount?: number,
	timeout?: number,
	trial?: boolean,
	};

[regseb]

@nekolab

I misspoke. I meant to say: the Playwright team could develop a new waitNavigation option.

[brillout]

Its use is discouraged, because it's hard to make it work reliably. It only works if and only if you know for sure what the page is doing.

Can you elaborate? Our page.waitForNavigation() promises sometime timeout, even though we do follow the practice of calling page.waitForNavigation() before the action:

const navPromise = page.waitForNavigation()
await someActionTriggeringPageReload()
await navPromise // Sometimes never resolves and timeouts instead

[Mike-Ro]

I need to click and wait for the page to load.

Earlier, I used the wait waitForNavigation, but the IDE reports that this method has been deprecated:

await page.click('button');
await page.waitForNavigation({waitUntil: 'networkidle'});

I found a solution that works for me, but the question is - is this the correct solution within Playwright?

await Promise.all([
  page.click('button'),
  page.waitForLoadState('networkidle')
]);

[brillout]

Workaround:

/** Wait for a full page navigation/reload (i.e. complete DOM de-/reconstruction)
 *
 * Reliable alternative to Playwright's:
 *  - page.waitForURL() which doesn't work for page reloads (https://github.com/microsoft/playwright/issues/20853)
 *  - page.waitForNavigation() which is unreliable (https://github.com/microsoft/playwright/issues/20853#issuecomment-1698770812)
 */
async function waitForNavigation(): Promise<() => Promise<void>> {
  // We need to await page.evaluate() before the page navigation is triggered, otherwise Playwright throws:
  // ```bash
  // proxy.evaluate: Execution context was destroyed, most likely because of a navigation
  // ```
  await page.evaluate(() => (window._stamp = true))
  return async () => {
    await page.waitForFunction(() => window._stamp === undefined)
  }
}
declare global {
  var _stamp: undefined | true
}

Usage:

const navPromise = await waitForNavigation()
// Trigger page navigation
await navPromise()
// Page navigation is done

@brillout I just tried your workaround but couldn't get it to work. Maybe I am implementing it incorrectly...

I added a new .ts file to my project and modified the function to pass in the page:

import { Page } from '@playwright/test';

export async function waitForNavigation(page: Page): Promise<() => Promise<void>> {
    await page.evaluate(() => (window._stamp = true));
    return async () => {
        await page.waitForFunction(() => window._stamp === undefined);
    };
}

declare global {
    var _stamp: undefined | true;
}

Then in a page object class where I click a button which causes the navigatin/reload:

const nav = await waitForNavigation(this.page);
await this.locators.bar.getByRole('link', { name: 'Add Document' }).click();
await nav();

When I run the test, it fails with a timeout error on the following line at .waitForFunction():
await page.waitForFunction(() => window._stamp === undefined);
Any thoughts very much appreciated.

[jpike88]

Ok, so its use is not recommended, not deprecated. Therefore, the correct way to do this is not to misuse the deprecated warning, and instead project the warning directly into the browser log and terminal.