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
- Scenarios initiated by browser UI
- Scenarios initiated by page interaction
- Advanced patterns
#
Navigation lifecyclePlaywright 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
- page.on("domcontentloaded") event is fired
- page executes some scripts and loads resources like stylesheets and images
- page.on("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 UINavigations can be initiated by changing the URL bar, reloading the page or going back or forward in session history.
#
Auto-waitNavigating 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.
- Sync
- Async
#
Custom waitOverride the default behavior to wait until a specific event, like networkidle
.
- Sync
- Async
#
Wait for elementIn lazy-loaded pages, it can be useful to wait until an element is visible with page.wait_for_selector(selector, **kwargs). Alternatively, page interactions like page.click(selector, **kwargs) auto-wait for elements.
- Sync
- Async
#
API reference#
Scenarios initiated by page interactionIn the scenarios below, page.click(selector, **kwargs) initiates a navigation and then waits for the navigation to complete.
#
Auto-waitBy default, page.click(selector, **kwargs) 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.
- Sync
- Async
#
Custom waitpage.click
can be combined with page.wait_for_load_state(**kwargs) to wait for a loading event.
- Sync
- Async
#
Wait for elementIn lazy-loaded pages, it can be useful to wait until an element is visible with page.wait_for_selector(selector, **kwargs). Alternatively, page interactions like page.click(selector, **kwargs) auto-wait for elements.
- Sync
- Async
#
Asynchronous navigationClicking an element could trigger asynchronous processing before initiating the navigation. In these cases, it is recommended to explicitly call page.expect_navigation(**kwargs). For example:
- Navigation is triggered from a
setTimeout
- Page waits for network requests before navigation
- Sync
- Async
#
Multiple navigationsClicking an element could trigger multiple navigations. In these cases, it is recommended to explicitly page.expect_navigation(**kwargs) to a specific url. For example:
- Client-side redirects issued after the
load
event - Multiple pushes to history state
- Sync
- Async
#
Loading a popupWhen popup is opened, explicitly calling page.wait_for_load_state(**kwargs) ensures that popup is loaded to the desired state.
- Sync
- Async
#
API reference- page.click(selector, **kwargs)
- page.wait_for_load_state(**kwargs)
- page.wait_for_selector(selector, **kwargs)
- page.expect_navigation(**kwargs)
- page.wait_for_function(expression, **kwargs)
#
Advanced patternsFor pages that have complicated loading patterns, page.wait_for_function(expression, **kwargs) is a powerful and extensible approach to define a custom wait criteria.
- Sync
- Async