使用VS Code Playwright Test运行测试时console.log无输出求助

区分日志类型 #

先明确你的console.log是写在测试代码（Node.js环境）还是页面代码（浏览器环境），两种情况的解决方式不同：

情况1：测试代码中的console.log（Node端） #

1. 调整Playwright配置文件
   在playwright.config.ts中修改reporter配置，默认的HTML reporter不会在终端输出详细日志，换成list reporter或者同时启用多reporter：

   import { defineConfig, devices } from '@playwright/test';
   
   export default defineConfig({
     reporter: [
       ['list', { printSteps: true }], // 在终端打印测试步骤和日志
       ['html', { open: 'never' }] // 保留HTML报告生成
     ],
     use: {
       // ...其他配置
     },
   });
   

2. 检查运行命令参数
   确保运行测试时没有添加--quiet或类似静默输出的参数，直接执行：

   npx playwright test
   

   需要更详细日志的话，可添加--verbose参数：

   npx playwright test --verbose
   

3. VS Code扩展设置调整
   打开VS Code设置，搜索Playwright: Test Log Level，将其设置为info或debug，确保扩展能输出测试中的日志。

情况2：页面代码中的console.log（浏览器端） #

Playwright默认不会自动捕获页面的console输出，需要在测试中手动监听页面的console事件：

test('捕获页面日志', async ({ page }) => {
  // 监听页面console事件，将日志输出到终端
  page.on('console', (msg) => {
    console.log(`页面日志: ${msg.text()}`);
    // 如需打印完整调用栈，可使用msg.location()
  });

  await page.goto('你的测试页面地址');
  // 页面内的console.log会被捕获并输出
});

额外排查点 #

• 确认测试代码中的console.log没有被条件判断（如process.env.DEBUG）包裹，导致非调试环境下不执行。
• 检查VS Code的Output面板，切换到Playwright选项（而非Tasks），查看是否有日志输出。

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