Navigate to a Page with Playwright

The concept

Every Playwright test starts somewhere, and usually that is page.goto(). The page object represents a single browser tab. Calling page.goto(url) tells that tab to load a URL and, by default, waits until the page fires its load event before your next line runs.

Nearly every Playwright method returns a Promise, which is why you see await in front of almost every line. await pauses your test until the action has finished. Without it, your script races ahead and the next step may run against a page that has not loaded yet.

Loading a page is not the same as checking you landed on the right one. Redirects, login walls and typos can all leave you somewhere else, so a good first test asserts on the URL or title.

The fragile version

page.goto('https://example.com/dashboard'); // no await
await page.getByRole('heading', { name: 'Dashboard' }).click();

Why it breaks: The missing await means the navigation starts but the test does not wait for it. The next line may run before the page exists, and an unhandled rejected Promise can surface as a confusing error later in the run.

A robust Playwright version

await page.goto('https://example.com/dashboard');
await expect(page).toHaveURL(/\/dashboard/);
await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();

Each step is awaited, and the web-first assertions retry until the URL and heading match, so the test confirms where it actually ended up.

This is a general example on a made-up page, not the challenge’s reference solution.

Common mistakes

• Forgetting await on goto or on an assertion.
• Assuming goto succeeded without checking the URL or a heading.
• Adding waitForTimeout(3000) after navigation instead of asserting on something the page shows.

FAQ