Writing out the page contents in Playwright

I recently had a problem with a failing Playwright test that only happened when running in Docker.

The test that was failing was:

let locator = page.locator('a[href="/login"].nav-link');
await locator.click();

await expect(page).toHaveTitle(/Log in/);

The test clicks the link to go to /login and then checks that the next page’s title contains the text “Log in”. Not an especially complicated test, so I was quite surprised when it failed claiming that the title was blank.

To work out what was happening, I wanted to view the HTML that the Playwright browser was seeing. To do this I added this after the click() call.:

await page.waitForLoadState();
console.log("Page content: ", await page.content());

The HTML for the page was then rendered into my terminal and showed that the HTML wasn’t what I expected. It was then relatively easy to sort the problem and all was well again.