传入lighthouseDesktopConfig后报告仍显移动端布局且测试超时求助

针对这个问题，核心是确保Lighthouse的桌面配置完全生效，同时避免Playwright页面本身的视口干扰，具体调整方案如下：

• 确认自定义工具checkWebVitals正确传递了Lighthouse配置。如果是你自己实现的工具，要保证调用Lighthouse核心函数时把配置作为第三个参数传入，示例：

  // checkWebVitals内部的关键调用逻辑
  const results = await lighthouse(page.url(), { port: portNumber }, lighthouseConfig);
  

• 手动覆盖桌面端核心配置项，防止默认值覆盖：

  // 基于官方桌面配置，强制指定桌面模式参数
  const customDesktopConfig = {
    ...lighthouseDesktopConfig,
    settings: {
      ...lighthouseDesktopConfig.settings,
      emulatedFormFactor: 'desktop',
      screenEmulation: {
        mobile: false,
        width: 1366,
        height: 768,
        deviceScaleFactor: 1,
        disabled: false,
      },
    },
  };
  // 将customDesktopConfig传给checkWebVitals
  await checkWebVitals({
    lighthouseConfig: customDesktopConfig,
    // 其余参数不变
  });
  

• 创建Playwright页面时指定桌面视口，避免页面本身渲染为移动端：

  const page = await browser.newPage({
    viewport: { width: 1366, height: 768 },
  });
  

Slow 3G网络下Lighthouse检测本身耗时较长，默认30秒超时不够用，可从以下几个维度调整：

• 延长Playwright测试的全局超时时间，在测试用例开头添加：

  test('Performance metrics for Slow 3g network',async({playwright,browserName})=>{
    test.setTimeout(60000); // 把超时时间改为60秒
    test.skip(browserName !== 'chromium','Running only on chrome');
    // 其余代码不变
  });
  

• 调整page.goto的等待策略，Slow 3G下networkidle可能永远达不到，换成更宽松的条件：

  // 改用load事件作为等待完成的标志
  await page.goto(HOME_PAGE_URL,{waitUntil:'load'});
  // 或者用networkidle2（2秒内无网络请求即视为完成）
  // await page.goto(HOME_PAGE_URL,{waitUntil:'networkidle2'});
  

• 在Lighthouse配置里延长检测阶段的超时时间：

  const customDesktopConfig = {
    ...lighthouseDesktopConfig,
    settings: {
      ...lighthouseDesktopConfig.settings,
      emulatedFormFactor: 'desktop',
      maxWaitForFcp: 60000, // 首次内容绘制最长等待时间
      maxWaitForLoad: 60000, // 页面加载最长等待时间
    },
  };
  

• 检查checkWebVitals内部是否有单独的超时设置，同步调整Lighthouse检测的超时参数：

  // 假设checkWebVitals里的options包含timeout配置
  const options = {
    port: portNumber,
    timeout: 60000, // 延长Lighthouse检测的超时时间
  };
  

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