How do I wait for the page to navigate after a click in Playwright?

Click, then call await page.waitForURL(...) with a glob, a regular expression or a predicate for the address you expect. Alternatively, assert await expect(page).toHaveURL(...) and then assert something on the new page.

This answer is one piece of Chapter 13: Waiting and Synchronisation.

Auto-Waiting Deep Dive
Explicit Waiting Methods
Handling Race Conditions
Controlling the Clock
Practice and interview questions: Waiting & Synchronization

A click that navigates returns before the new page has loaded. If the next line looks for an element on the new page, it may run against the old one, or against a page that is still loading.

page.waitForURL() waits for the main frame to reach a matching URL, and by default it also waits for the new page's load event. It accepts a glob such as '**/index.html?**', a regular expression, or a predicate.

In the example, the test signs in on the login page. The app checks the details, then redirects to the dashboard. The test:

fills Work email and Password and clicks Sign in
waits for a URL containing index.html
asserts the URL again with toHaveURL(), and that the header shows the signed-in user, Anita Rao

The last assertion is the one that matters: it proves the redirect led somewhere useful, not just to a matching address.

Avoid the older pattern of wrapping page.waitForNavigation() and the click in Promise.all. The docs mark waitForNavigation() deprecated and "inherently racy", and recommend waitForURL() instead.

navigate.spec.js(https://practice.learnplayforge.com)

import { test, expect } from '@playwright/test';

test('signing in navigates to the dashboard', async ({ page }) => {
  await page.goto('/login.html?mock=static&seed=42');
  await page.getByLabel('Work email').fill('ops@meridian.test');
  await page.getByLabel('Password').fill('Passw0rd!');
  await page.getByRole('button', { name: 'Sign in' }).click();

  await page.waitForURL('**/index.html?**');
  await expect(page).toHaveURL(/\/index\.html/);
  await expect(page.getByTestId('current-user')).toHaveText('Anita Rao');
});

Output

1 passed (2.5s)

Test yourself

What does the Playwright documentation recommend instead of page.waitForNavigation()?

Practised in the full course: the drill Deprecated navigation wait.

See the chapter

AI can write the test now. The job is knowing whether it checks anything. That's what the course teaches, one chapter at a time.

163 lessons · 226 drills · start free

How do I wait for the page to navigate after a click in Playwright?

Related questions