Cypress 如何在测试执行期间捕获意外错误消息？

在使用 Cypress 进行端到端测试时，我们可能会遇到需要捕获和处理意外错误消息的情况。Cypress 提供了几种方法来帮助捕获这些错误，以便可以根据测试用例的需要进行相应的处理。

监听窗口错误事件

Cypress 可以监听 window 对象上的 error 事件来捕获未被捕获的 JavaScript 错误。我们可以在 Cypress.on 或者 cy.on 中使用 uncaught:exception 事件。例如：

javascript
// 在测试脚本中，可以这样设置
Cypress.on('uncaught:exception', (err, runnable) => {
  // 我们可以打印出错误信息进行调试
  console.error('发现未捕获的异常:', err);
  // 返回 false 以防止 Cypress 失败
  return false;
});

这允许我们在测试脚本中处理错误，并决定是否忽略特定的错误，继续执行测试，或者让测试失败。

监听应用的 onError 事件

如果我们在测试一个单页应用（SPA），并且该应用使用了某些错误处理机制，如 window.onerror，我们可以在测试中设置监听器来捕获这些错误：

javascript
cy.visit('http://example.com', {
  onBeforeLoad(win) {
    cy.spy(win, 'onerror');
  }
});

// 后面可以断言 onerror 是否被调用以及调用次数
cy.window().then((win) => {
  expect(win.onerror).to.have.callCount(1);
});

在测试代码中捕获 Promise 异常

当使用 cy.then() 或其他 Cypress 命令工作时，我们可以直接在链式调用中捕获和处理 Promise 异常：

javascript
cy.get('.some-element').then(($element) => {
  return doSomethingThatReturnsAPromise($element).catch((err) => {
    // 处理错误
  });
});

使用 cy.request 捕获网络请求错误

当使用 cy.request 对外部 API 或服务发起网络请求时，我们可以直接捕获请求错误：

javascript
cy.request({
  url: 'http://example.com/api/data',
  failOnStatusCode: false // 这会防止返回非 2xx 状态码的响应导致测试失败
}).then((response) => {
  if (response.status !== 200) {
    // 处理错误响应
  }
});

示例：捕获后端 API 错误

假设有一个测试用例需要验证用户无法使用错误的凭证登陆系统：

javascript
// 登录函数，这里使用了 cy.request 并设置了 failOnStatusCode 为 false
function loginWithCredentials(username, password) {
  return cy.request({
    method: 'POST',
    url: '/api/login',
    body: { username, password },
    failOnStatusCode: false
  });
}

// 测试用例
describe('登录功能', () => {
  it('应该无法用错误的凭证登录', () => {
    loginWithCredentials('incorrect_user', 'wrong_password').then((response) => {
      expect(response.status).to.eq(401); // 验证响应状态码是 401 Unauthorized
      expect(response.body.error).to.include('Unauthorized'); // 验证响应体包含特定的错误消息
    });
  });
});

在这个例子中，我使用了 cy.request 并设置了 failOnStatusCode: false，这样即使 API 返回错误状态码，测试也不会立即失败。这允许我们在 then 回调中访问响应对象，检查状态码和响应内容来确认错误处理是正确的。