Cypress 测试框架运行的常见报错及解决方案-JavaScript中文网-JavaScript教程资源分享门户

Cypress 是一个流行的前端自动化测试框架，它能够帮助我们进行端到端的测试，并提供了丰富的 API 和插件来简化测试过程。然而，在使用 Cypress 进行测试时，我们可能会遇到一些常见的报错，本文将介绍这些报错及其解决方案。

报错 1：Timed out retrying after ...

这个报错通常是由于 Cypress 在某些命令执行失败后进行了重试，但仍然无法成功执行，导致超时而出现的。这可能是由于页面加载速度慢、网络不稳定或页面元素不可见等原因引起的。

解决方案：

增加 defaultCommandTimeout 的值，使 Cypress 在执行命令时更加耐心。可以在 cypress.json 文件中增加以下配置：
```
{
  "defaultCommandTimeout": 10000
}
```
这将把默认的命令超时时间从 4 秒增加到 10 秒。
增加 requestTimeout 的值，使 Cypress 在执行网络请求时更加耐心。可以在 cypress.json 文件中增加以下配置：
```
{
  "requestTimeout": 10000
}
```
这将把默认的请求超时时间从 4 秒增加到 10 秒。

在测试代码中使用 cy.wait() 命令，等待页面加载完成或某个元素可见。

cy.wait(5000); // 等待 5 秒
cy.get('#button').should('be.visible'); // 等待元素可见

报错 2：cy.type() failed because this element is not visible

这个报错通常是由于 Cypress 在执行 cy.type() 命令时，目标元素不可见，导致无法输入内容。这可能是由于元素被遮挡、样式不正确或动画效果影响等原因引起的。

解决方案：

在测试代码中使用 cy.get() 命令，确保目标元素可见后再执行 cy.type() 命令。
```
cy.get('#input')
  .should('be.visible')
  .type('Hello, World!');
```
在测试代码中使用 cy.wait() 命令，等待元素可见后再执行 cy.type() 命令。
```
cy.get('#input')
  .wait(5000)
  .type('Hello, World!');
```

报错 3：Timed out retrying after ...

这个报错通常是由于 Cypress 在执行 cy.get() 命令时，无法找到目标元素而导致的。这可能是由于元素还未加载、页面结构变化或选择器不正确等原因引起的。

解决方案：

在测试代码中使用 cy.wait() 命令，等待元素加载完成后再执行 cy.get() 命令。
```
cy.wait(5000); // 等待 5 秒
cy.get('#button');
```
在测试代码中使用 cy.contains() 命令，根据元素的文本内容来查找元素。
```
cy.contains('Submit');
```

在测试代码中使用 cy.get() 命令的回调函数，根据元素的属性或其他特征来查找元素。

cy.get('input').then($inputs => {
  const $username = $inputs.filter('[name="username"]');
  const $password = $inputs.filter('[name="password"]');
  cy.wrap($username).type('admin');
  cy.wrap($password).type('admin');
});

报错 4：cy.click() failed because this element is detached from the DOM

这个报错通常是由于 Cypress 在执行 cy.click() 命令时，目标元素已经不在文档中，导致无法点击。这可能是由于页面结构变化、动态生成的元素或其他操作影响等原因引起的。

解决方案：

在测试代码中使用 cy.get() 命令，确保目标元素存在后再执行 cy.click() 命令。
```
cy.get('#button')
  .should('exist')
  .click();
```
在测试代码中使用 cy.wait() 命令，等待元素的父元素出现后再执行 cy.click() 命令。
```
cy.get('#parent')
  .wait(5000)
  .find('#button')
  .click();
```

报错 5：Cypress detected that you invoked one or more cy commands in a custom command but returned a different value

这个报错通常是由于 Cypress 在执行自定义命令时，该命令返回了一个错误的值，导致 Cypress 无法正确处理后续命令。这可能是由于自定义命令中的异步操作或错误处理不正确等原因引起的。

解决方案：

在自定义命令中使用 cy.wrap() 命令，将异步操作转换为可链式调用的形式。

Cypress.Commands.add('login', (username, password) => {
  cy.request('POST', '/login', { username, password })
    .then(response => {
      cy.wrap(response.body.token).as('authToken');
    });
});

在自定义命令中使用 cy.then() 命令，对异步操作进行链式调用。

-- -------------------- ---- -------
----------------------------- ---------- --------- -- -
  ------------------ --------- - --------- -------- --
    -------------- -- -
      ---------------------------------------------
    --
    -------- -- -
      -----------------------
    ---
---

总结

本文介绍了 Cypress 测试框架运行过程中可能遇到的常见报错及其解决方案，希望能帮助大家更好地使用 Cypress 进行自动化测试。需要注意的是，在编写测试代码时，应该尽可能地避免出现这些报错，保证测试的稳定性和可靠性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6513fd7795b1f8cacdc76caa