Skip to main content
Version: 1.12.0

Navigations

Playwright can navigate to URLs and handle navigations caused by page interactions. This guide covers common scenarios to wait for page navigations and loading to complete.

Navigation lifecycle#

Playwright splits the process of showing a new document in a page into navigation and loading.

Navigations can be initiated by changing the page URL or by interacting with the page (e.g., clicking a link). Navigation ends when response headers have been parsed and session history is updated. The navigation intent may be canceled, for example, on hitting an unresolved DNS address or transformed into a file download. Only after the navigation succeeds, page starts loading the document.

Loading covers getting the remaining response body over the network, parsing, executing the scripts and firing load events:

  • Page.Url is set to the new url
  • document content is loaded over network and parsed
  • event Page.DOMContentLoaded event is fired
  • page executes some scripts and loads resources like stylesheets and images
  • event Page.Load event is fired
  • page executes dynamically loaded scripts
  • networkidle is fired when no new network requests are made for 500 ms

Scenarios initiated by browser UI#

Navigations can be initiated by changing the URL bar, reloading the page or going back or forward in session history.

Auto-wait#

Navigating to a URL auto-waits for the page to fire the load event. If the page does a client-side redirect before load, page.goto will auto-wait for the redirected page to fire the load event.

// Navigate the page
await page.GotoAsync("https://example.com");

Custom wait#

Override the default behavior to wait until a specific event, like networkidle.

// Navigate and wait until network is idle
await page.GotoAsync("https://example.com", new PageGotoOptions { WaitUntil = WaitUntilState.NetworkIdle });

Wait for element#

In lazy-loaded pages, it can be useful to wait until an element is visible with Page.WaitForSelectorAsync(selector, options). Alternatively, page interactions like Page.ClickAsync(selector, options) auto-wait for elements.

// Navigate and wait for element
await page.GotoAsync("https://example.com");
await page.WaitForSelectorAsync("text=Example Domain");
// Navigate and click element
// Click will auto-wait for the element
await page.GotoAsync("https://example.com");
await page.ClickAsync("text=Example Domain");

API reference#

Scenarios initiated by page interaction#

In the scenarios below, Page.ClickAsync(selector, options) initiates a navigation and then waits for the navigation to complete.

Auto-wait#

By default, Page.ClickAsync(selector, options) will wait for the navigation step to complete. This can be combined with a page interaction on the navigated page which would auto-wait for an element.

// Click will auto-wait for navigation to complete
await page.ClickAsync("text=Login");
// Fill will auto-wait for element on navigated page
await page.FillAsync("#username", "John Doe");

Custom wait#

page.click can be combined with Page.WaitForLoadStateAsync(state, options) to wait for a loading event.

await page.ClickAsync("button"); // Click triggers navigation
await page.WaitForLoadStateAsync(LoadState.NetworkIdle); // This resolves after "networkidle"

Wait for element#

In lazy-loaded pages, it can be useful to wait until an element is visible with Page.WaitForSelectorAsync(selector, options). Alternatively, page interactions like Page.ClickAsync(selector, options) auto-wait for elements.

// Click will auto-wait for the element and trigger navigation
await page.ClickAsync("text=Login");
// Wait for the element
await page.WaitForSelectorAsync("#username");
// Click triggers navigation
await page.ClickAsync("text=Login");
// Fill will auto-wait for element
await page.FillAsync("#username", "John Doe");

Asynchronous navigation#

Clicking an element could trigger asynchronous processing before initiating the navigation. In these cases, it is recommended to explicitly call Page.RunAndWaitForNavigationAsync(action, options). For example:

  • Navigation is triggered from a setTimeout
  • Page waits for network requests before navigation
// Using waitForNavigation with a callback prevents a race condition
// between clicking and waiting for a navigation.
await page.RunAndWaitForNavigationAsync(async () =>
{
// Triggers a navigation after a timeout
await page.ClickAsync("div.delayed-navigation");
});

Multiple navigations#

Clicking an element could trigger multiple navigations. In these cases, it is recommended to explicitly Page.RunAndWaitForNavigationAsync(action, options) to a specific url. For example:

  • Client-side redirects issued after the load event
  • Multiple pushes to history state
// Running action in the callback of waitForNavigation prevents a race
// condition between clicking and waiting for a navigation.
await page.RunAndWaitForNavigationAsync(async () =>
{
// Triggers a navigation with a script redirect.
await page.ClickAsync("a");
}, new PageWaitForNavigationOptions
{
UrlString = "**/login"
});

Loading a popup#

When popup is opened, explicitly calling Page.WaitForLoadStateAsync(state, options) ensures that popup is loaded to the desired state.

var popup = await page.RunAndWaitForPopupAsync(async () =>
{
await page.ClickAsync("a[target='_blank']"); // Opens popup
});
popup.WaitForLoadStateAsync(LoadState.Load);

API reference#

Advanced patterns#

For pages that have complicated loading patterns, Page.WaitForFunctionAsync(expression, arg, options) is a powerful and extensible approach to define a custom wait criteria.

await page.GotoAsync("http://example.com");
await page.WaitForFunctionAsync("() => window.amILoadedYet()");
// Ready to take a screenshot, according to the page itself.
await page.ScreenshotAsync();

API reference#