Playwright截图超时提示「等待字体加载」，MongoDB登录页截图失败

问题重现 #

使用Playwright访问MongoDB登录页并截图时，出现「等待字体加载」的超时错误，但相同逻辑在Puppeteer中可正常运行。相关代码：

(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();
})();

解决方案 #

Playwright默认会等待页面完全加载（包括所有资源如字体、图片等），而MongoDB登录页的部分字体加载可能存在延迟或异常，导致超时。可通过以下方式解决：

• 调整goto的等待策略：改为等待DOM内容加载完成，而非等待所有资源加载完毕

  await page.goto("https://account.mongodb.com/account/login", { waitUntil: 'domcontentloaded' });
  

• 替换远程字体为系统默认：通过浏览器上下文设置跳过特定远程字体的加载，避免因字体加载超时卡住

  const context = await browser.newContext({
    fontFamilies: {
      // 将页面指定的远程字体替换为系统默认字体
      'Inter': 'sans-serif'
    }
  });
  const page = await context.newPage();
  

• 延长超时时间：若只是加载速度慢而非资源异常，可直接增加操作的超时阈值

  await page.goto("https://account.mongodb.com/account/login", { timeout: 60000 });
  await page.screenshot({ path: "mongo.png", timeout: 30000 });
  

原因分析 #

Puppeteer默认的goto等待策略是domcontentloaded，而Playwright默认是load（等待所有资源加载完成）。这一差异导致Playwright会等待所有字体加载完毕才继续执行，而MongoDB登录页的部分远程字体可能存在CDN加载延迟，最终触发超时。

内容的提问来源于stack exchange，提问作者wdwd