Answer
Navigating to a URL in Playwright
Basic Navigation
TypeScript
await page.goto('https://example.com');
Playwright automatically waits for the page to reach a network-idle or load state before continuing.
Navigation with Wait Strategy
TypeScript
// Wait until 'load' event fires (default)
await page.goto('https://example.com', { waitUntil: 'load' });
// Wait until DOMContentLoaded
await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
// Wait until no network activity for 500ms (great for SPAs)
await page.goto('https://example.com', { waitUntil: 'networkidle' });
// Wait until page commits navigation (fastest — no wait for loading)
await page.goto('https://example.com', { waitUntil: 'commit' });
With Custom Timeout
TypeScript
await page.goto('https://slow-site.com', { timeout: 60000 }); // 60s timeout
Get the Response
TypeScript
const response = await page.goto('https://api.example.com');
console.log(response?.status()); // 200
Other Navigation Methods
TypeScript
// Go back to previous page
await page.goBack();
// Go forward
await page.goForward();
// Reload the page
await page.reload();
// Wait for a specific URL after navigation (useful after form submit)
await page.waitForURL('**/dashboard');
await page.waitForURL(/dashboard/);
Full Example in a Test
TypeScript
import { test, expect } from '@playwright/test';
test('navigate and verify page title', async ({ page }) => {
await page.goto('https://playwright.dev');
await expect(page).toHaveTitle(/Playwright/);
await expect(page).toHaveURL('https://playwright.dev/');
});
Relative URLs (Using baseURL)
Set baseURL in playwright.config.ts and use relative paths:
TypeScript
// playwright.config.ts
export default defineConfig({
use: { baseURL: 'https://myapp.com' },
});
// In test
await page.goto('/login'); // Resolves to https://myapp.com/login
await page.goto('/dashboard');