javascriptpuppeteerplaywright

Why is Playwright screenshot timing out with "waiting for fonts to load..."?


Why is the Playwright timing out when taking a screenshot? I'm trying to take a screenshot of the MongoDB login website but it's not taking screenshots and giving timeout errors.

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  await page.goto("https://account.mongodb.com/account/login");

  await page.screenshot({ path: "mongo.png" });

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

I tried to do the same thing in Puppeteer and it works fine!


Solution

  • For some reason, certain sites fail to fire the "load" event, which is the navigation state that Playwright waits for by default with goto. It's good to see a site that reproduces this behavior.

    I generally suggest using "domcontentloaded" (or even "commit") instead of "load", since it's faster and more reliable than "load", and never seems to time out:

    const playwright = require("playwright"); // ^1.42.1
    
    let browser;
    (async () => {
      browser = await playwright.chromium.launch({headless: false});
      const page = await browser.newPage();
      await page.goto("https://account.mongodb.com/account/login", {
        waitUntil: "domcontentloaded",
      });
      await page.screenshot({path: "mongo.png"});
    })()
      .catch(err => console.error(err))
      .finally(() => browser?.close());
    

    For pages that aren't stable before screenshotting, you can use something like this (Puppeteer is easily convertible to Playwright), or wait for a certain site-specific selector or network request to finish. A timeout can also work for temporary debugging, but is usually flaky and discouraged.

    Unfortunately, I'm not sure yet why Puppeteer works and Playwright doesn't, and what specific behavior on the page prevents goto from resolving for Playwright (this behavior sometimes occurs in Puppeteer too). Possibly there's a slightly different definition of what "load" means, or some implementation detail that causes Playwright to fail on this particular site. So clearly, it's not just the site's behavior at play here--the library also matters. You might want to open an issue with Playwright, or try a few older versions to see whether the behavior may have changed over time.

    Note that @playwright/test also seems to work, strangely enough! I can only reproduce the issue in a non-test script like the one above.

    I'll look into it further if I have more time--I'm posting this as a preliminary answer. This is a very interesting question worth a revisit.