Open Several Pages with page.goto()

How it works

page.goto(url) loads an address in the current tab and resolves once the page fires its load event. You can change that point with the waitUntil option: domcontentloaded resolves earlier, commit resolves as soon as the response starts, and networkidle waits for network traffic to stop.

Unlike many browser tools, goto() hands back the main HTTP response. That lets a script check the status code of the page it just opened, which is a quick way to catch a broken route before looking at any element.

About the assignment

You load two practice pages in the same tab, one after the other, and log each title as soon as its page is ready. It shows that a single page object can be reused for every navigation in a script.

What you will do

1. 1Await page.goto() for Text Fields, then log its title after the label Page 1:.
2. 2Await page.goto() again, this time for Buttons.
3. 3Log the second title after the label Page 2:.
4. 4Read each title right after its own navigation finishes.

Common mistakes

• Relative URLs without a base

  In a plain script, page.goto('/Elements/Links') fails with an invalid URL error. Relative paths only work when a baseURL is set on the context or in the test config.

• Relying on networkidle

  Pages that poll or stream data may never go quiet, so networkidle makes tests slow or flaky. Wait for the element you need instead.

• Expecting an error for a 404

  goto() does not throw when the server answers 404 or 500. It throws only when navigation itself fails, so check response.status() when the status matters.

In a real test suite

Starter code

The editor above opens with this code. Fill in the TODO lines, then run and submit it.

const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();

    // TODO: Navigate to TextFields page and print title
    // TODO: Navigate to Buttons page and print title

    await browser.close();
})();