如何在Playwright中捕获'Uncaught (in promise) TypeError'？

未捕获的Promise错误（比如Uncaught (in promise) TypeError）通常不会仅通过console.error输出，而是会触发Playwright页面的pageerror事件——这就是你之前只监听console.error无法捕获这类错误的核心原因。结合监听console事件和pageerror事件，就能覆盖所有控制台错误和未处理异常。

具体实现代码 #

import { test, expect } from '@playwright/test';

test('验证页面无控制台错误和未捕获异常', async ({ page }) => {
  const consoleErrors: string[] = [];
  const uncaughtExceptions: Error[] = [];

  // 捕获所有console.error级别的日志
  page.on('console', (msg) => {
    if (msg.type() === 'error') {
      consoleErrors.push(msg.text());
    }
  });

  // 捕获未捕获的Promise拒绝和全局未处理异常
  page.on('pageerror', (error) => {
    uncaughtExceptions.push(error);
  });

  // 访问目标应用页面
  await page.goto('/'); // 替换为你的应用实际URL

  // 执行测试所需的交互操作（示例）
  // await page.getByRole('button', { name: '提交' }).click();

  // 等待页面异步操作完成（根据应用情况调整等待策略）
  await page.waitForLoadState('networkidle');

  // 断言无错误，否则测试失败并输出错误详情
  expect(consoleErrors).toEqual([], `发现控制台错误：${consoleErrors.join('; ')}`);
  expect(uncaughtExceptions).toEqual([], `发现未捕获异常：${uncaughtExceptions.map(e => e.message).join('; ')}`);
});

关键说明 #

• pageerror事件：专门监听页面中未被try/catch捕获的异常，包括Promise拒绝、同步代码抛出的未处理错误。
• console事件：捕获页面中主动调用console.error输出的错误信息。
• 等待策略：使用page.waitForLoadState('networkidle')或其他合适的等待方式，确保页面所有异步操作完成后再检查错误，避免漏掉延迟触发的异常。

可选优化 #

如果应用中有预期的错误需要忽略，可以在监听事件中添加过滤逻辑，比如：

page.on('pageerror', (error) => {
  // 忽略特定的预期错误
  if (!error.message.includes('预期忽略的错误信息')) {
    uncaughtExceptions.push(error);
  }
});

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