Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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!

Tags:

2

Answers


  1. 0

    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.

    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.

    Login or Signup to reply.
  2. 0

    How modern web applications handle page ‘load’ differently than traditional web applications?

    I think from web test automation perspective, it’s important to understand this on fundamental level:

    Modern web applications like React,Angular or vue don’t fire load events
    on web pages as traditional web applications do because they use a
    different approach to loading and rendering content. Traditional web
    applications load all of the HTML, CSS, and JavaScript for a page at
    once, and then render the page when everything is loaded. This can
    cause a delay in the page appearing, especially if the page has a lot
    of content. Modern web applications, on the other hand, use a
    technique called asynchronous loading to load the page content in
    smaller chunks. This allows the page to start rendering as soon as the
    first chunk of content is loaded, which makes the page appear faster
    to the user.

    As a result of this different approach to loading and rendering
    content, modern web applications don’t fire load events in the same
    way that traditional web applications do.

    I think its important to keep this in mind while doing UI automation.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search