如何在Playwright中检测Page.goto加载页面后的各类错误？

下面是具体的实现方案，你可以把这些逻辑整合到测试用例里，一旦触发任一错误就标记测试失败：

1. 捕获JavaScript异常 #

在调用page.goto()之前，监听pageerror事件，收集页面抛出的所有未捕获JS异常，加载完成后断言没有异常：

test('页面无JS异常', async ({ page }) => {
  const jsExceptions = [];
  page.on('pageerror', (error) => {
    jsExceptions.push(error.message);
  });

  await page.goto('你的目标页面URL');

  // 断言没有JS异常
  expect(jsExceptions).toHaveLength(0);
});

2. 捕获console.error输出 #

同样在goto前监听console事件，筛选出类型为error的日志，最后断言没有这类日志：

test('页面无console.error', async ({ page }) => {
  const consoleErrors = [];
  page.on('console', (msg) => {
    if (msg.type() === 'error') {
      consoleErrors.push(msg.text());
    }
  });

  await page.goto('你的目标页面URL');

  expect(consoleErrors).toHaveLength(0);
});

3. 捕获缺失的资源请求（JS、CSS等） #

监听requestfailed事件，判断失败请求的资源类型，收集符合条件的失败请求，最后断言没有这类失败：

test('页面资源加载正常', async ({ page }) => {
  const failedResources = [];
  // 定义需要检测的资源类型
  const targetResourceTypes = ['script', 'stylesheet'];

  page.on('requestfailed', (request) => {
    const resourceType = request.resourceType();
    if (targetResourceTypes.includes(resourceType)) {
      failedResources.push(`资源加载失败: ${request.url()} (类型: ${resourceType})`);
    }
  });

  await page.goto('你的目标页面URL');

  expect(failedResources).toHaveLength(0);
});

整合到一个测试用例里 #

如果想在一次goto中同时检测三类错误，可以把三个监听逻辑合并：

test('页面加载无三类错误', async ({ page }) => {
  const jsExceptions = [];
  const consoleErrors = [];
  const failedResources = [];
  const targetResourceTypes = ['script', 'stylesheet'];

  // 监听JS异常
  page.on('pageerror', (error) => jsExceptions.push(error.message));

  // 监听console.error
  page.on('console', (msg) => {
    if (msg.type() === 'error') consoleErrors.push(msg.text());
  });

  // 监听资源加载失败
  page.on('requestfailed', (request) => {
    const resourceType = request.resourceType();
    if (targetResourceTypes.includes(resourceType)) {
      failedResources.push(`资源加载失败: ${request.url()} (类型: ${resourceType})`);
    }
  });

  await page.goto('你的目标页面URL');

  // 依次断言，有任一错误就抛出
  expect(jsExceptions).toHaveLength(0);
  expect(consoleErrors).toHaveLength(0);
  expect(failedResources).toHaveLength(0);
});

注意：如果你的页面有预期内的错误（比如故意抛出的测试异常），可以在断言时排除这些特定内容，避免误判。

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