如何在Playwright中使用console.log？测试变量日志无法显示

你的代码里有两个关键问题导致看不到日志：

• page是Playwright的Node.js端API，不能在page.evaluate()内部（浏览器上下文）调用，所以page.on('console')在这里完全无效。
• 你的Promise没有调用resolve，测试会一直挂起，根本执行不到后续逻辑。

下面是修正后的两种实现方式：

方式1：在浏览器开发者工具查看日志 #

直接在浏览器上下文里用console.log，同时在测试代码里监听浏览器的console事件，既能在浏览器控制台看到日志，也能把日志输出到测试终端：

test('largest contentful paint', async ({ page }) => {
  // 监听浏览器console事件，把日志同步到测试终端
  page.on('console', msg => {
    console.log(`浏览器日志: ${msg.text()}`);
    // 若要查看完整对象，可解析日志参数
    msg.args().forEach(async arg => {
      const value = await arg.jsonValue();
      console.log('日志详情:', value);
    });
  });

  await page.goto('http://localhost:3000/', { waitUntil: 'networkidle' });

  const largestContentfulPaint = await page.evaluate(() => {
    return new Promise((resolve) => {
      new PerformanceObserver((l) => {
        const entries = l.getEntries();
        const largestPaintEntry = entries.at(-1);
        // 直接在浏览器环境打印，会被上面的监听捕获
        console.log('largestPaintEntry', largestPaintEntry);
        // 必须调用resolve，否则测试会无限挂起
        resolve(largestPaintEntry.startTime);
      }).observe({
        type: 'largest-contentful-paint',
        buffered: true,
      });
    });
  });

  await expect(largestContentfulPaint).toBeLessThan(2500);
});

方式2：直接在测试终端打印变量 #

不需要依赖浏览器console，把largestPaintEntry从浏览器上下文传回Node.js端，直接在测试代码里打印：

test('largest contentful paint', async ({ page }) => {
  await page.goto('http://localhost:3000/', { waitUntil: 'networkidle' });

  const [largestContentfulPaint, largestPaintEntry] = await page.evaluate(() => {
    return new Promise((resolve) => {
      new PerformanceObserver((l) => {
        const entries = l.getEntries();
        const largestPaintEntry = entries.at(-1);
        // 把需要的数值和完整对象一起返回
        resolve([largestPaintEntry.startTime, largestPaintEntry]);
      }).observe({
        type: 'largest-contentful-paint',
        buffered: true,
      });
    });
  });

  // 在测试终端直接打印变量
  console.log('largestPaintEntry:', largestPaintEntry);
  await expect(largestContentfulPaint).toBeLessThan(2500);
});

补充说明：PerformanceObserver可能会因页面内容更新多次触发，若只想获取最终的LCP值，可确认entries.at(-1)为最后一次触发的条目，利用buffered: true参数确保获取所有已生成的性能条目后再取值即可。

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