使用Puppeteer的Lighthouse User-Flow强制移动模拟问题（已设桌面配置）

你遇到的问题核心是：Lighthouse在执行流程步骤时，会覆盖你通过Puppeteer预先设置的桌面视口、UA等配置，哪怕你已经在settingsOverrides里指定了桌面参数。这是因为Lighthouse默认的桌面模拟规则优先级更高，且部分配置项的逻辑和你预期不一致。

关键修复方案 #

1. 禁用Lighthouse的屏幕模拟，复用Puppeteer的视口 #

将screenEmulation.disabled设为true，让Lighthouse直接使用你通过Puppeteer设置好的1920×1080桌面视口，而不是强制替换为它默认的桌面模拟尺寸。

2. 补充禁用触摸模拟与设备模拟 #

部分网站会通过触摸支持而非仅视口宽度判断设备类型，所以在Puppeteer设置视口时要明确禁用触摸；同时添加disableDeviceEmulation参数，彻底关闭Lighthouse的设备模拟逻辑。

修改后的代码示例 #

import puppeteer from 'puppeteer';
import { startFlow } from 'lighthouse';

const DESKTOP_UA =
  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36';

export default async function runFlow({ baseUrl, creds }) {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  // 先通过Puppeteer锁定桌面环境
  await page.setUserAgent(DESKTOP_UA);
  await page.setViewport({ 
    width: 1920, 
    height: 1080, 
    deviceScaleFactor: 1, 
    isMobile: false,
    hasTouch: false // 关键：禁用触摸模拟，避免网站触发移动端布局
  });

  const flow = await startFlow(page, {
    name: 'Velaris: Login → Cockpit → Organization',
    configContext: {
      settingsOverrides: {
        formFactor: 'desktop',
        disableDeviceEmulation: true, // 彻底关闭设备模拟
        screenEmulation: {
          disabled: true, // 复用Puppeteer已设置的视口
        },
        emulatedUserAgent: DESKTOP_UA,
      }
    }
  });

  await flow.navigate(`${baseUrl}/login`, { stepName: 'Login' });
  await flow.startTimespan({ stepName: 'Open Organization' });
  // ... rest of flow
}

额外排查点 #

• 检查网站响应式逻辑：部分网站会通过navigator.maxTouchPoints等API判断设备，确保Puppeteer的hasTouch: false设置生效。
• 升级Lighthouse版本：旧版本的User-Flow存在配置优先级bug，升级到最新稳定版可避免此类问题。
• 避免后续代码修改视口：如果流程中后续有修改视口的逻辑，会再次触发布局切换。

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