Cypress 自动化测试开发经验与故障解决方案的总结-JavaScript中文网-JavaScript教程资源分享门户

什么是 Cypress？

Cypress 是一种基于 JavaScript 的端到端测试自动化工具，它是一个开源测试工具，并可以在任何 JavaScript 软件工程中使用。它使用了常用的前端技术栈，如 Mocha、Jasmine 和 jQuery 等。 Cypress 专注于端到端测试自动化，可以轻松地检测代码错误，查找 UI 界面问题以及优化应用程序性能。

开始使用 Cypress

使用 Cypress 进行自动化测试，需要安装 Cypress ，可使用 npm 命令安装：

npm install cypress --save-dev

之后，您需要在您要测试的应用程序上启动 Cypress 。通过运行以下命令，即可打开 Cypress 的运行界面。

./node_modules/.bin/cypress open

在 Cypress 运行界面中，您可以手动运行测试，也可以编写测试代码，Cypress 会自动运行您的测试代码。

Cypress 自动化测试开发经验

1. 在 Cypress 中使用自定义命令

Cypress 允许您自定义命令以便在测试过程中重复使用它们。这些自定义命令可以是任何您以前使用 Cypress 或 JavaScript 编写的代码。假设您希望在每个测试运行之前检查一个 cookie 是否存在，您可以创建一个自定义命令并在您的测试代码中使用它。

Cypress.Commands.add('checkCookie', (cookieName, value) => {
  cy.getCookies(cookieName).should('have.property', 'value', value);
});

2. 使用 Cypress 的中介者模式

Cypress 的中介者模式可以帮助您处理测试中的异步代码。如果您已经使用过 JavaScript 的异步代码，您知道这些代码往往会很难以处理。Cypress 的中介者模式可以轻松地解决这些问题。

cy.get('.search-input').type('JavaScript {enter}');
cy.get('.search-results li')
  .should('have.length', 10)
  .each(($el) => {
    cy.wrap($el).should('contain', 'JavaScript');
  });

在上面的代码中，第一个命令发送一个搜索请求并将其键入搜索输入框，第二个命令等待搜索结果加载和验证，然后将每个搜索结果检查，以确保它包含 “JavaScript”。

3. 在测试过程中使用断言

您可以使用 Cypress 的断言来检查代码的准确性和正确性。Cypress 的断言是基于 Chai 库创建的，并且有很多可以选择的断言方法。

cy.get('.search-results li')
  .should('have.length', 5)
  .each(($el) => {
    cy.wrap($el).should('contain', 'JavaScript');
  });

上面的代码检查结果是否有 5 条，然后检查结果是否包含 “JavaScript”。

Cypress 自动化测试故障解决方案

1. 通知 Cypress 不要等待网络请求

在某些情况下，网络请求可能需要很长时间才能完成，从而导致 Cypress 超时并导致测试失败。您可以使用 Cypress 的 $ requestTimeout 来告诉 Cypress 忽略特定请求的超时。

Cypress.Server.defaults({
  delay: 500,
  force404: false,
  whitelist: (xhr) => {
    // Only wait for GET requests
    return xhr.method === 'GET';
  },
});

在上面的代码中，Cypress 会等待 GET 请求的返回结果，但不会等待 POST 请求的结果。

2. 解决 Cypress 和外部代码的冲突

如果您的测试代码和应用程序中的其他代码存在冲突，则可能会导致 Cypress 失败，并且可能会非常难以确定问题。您可以使用 cy.wrap() 来包装测试代码中的任何代码，以确保 Cypress 能够正确运行其测试。

cy.window().then(($window) => {
  const someGlobalVariable = $window.someGlobalVariable;

  cy.wrap(someGlobalVariable).as('variable');
});

在上面的代码中，使用 cy.wrap() 将 someGlobalVariable 包装起来，确保 Cypress 能够正确访问它。

结论

Cypress 是一个很好的自动化测试框架，可以方便地检测代码错误，找出 UI 界面问题以及优化应用程序性能。通过使用 Cypress，您可以轻松地检测代码和 UI 界面问题、提高代码质量，并加速应用程序的开发进程。我们需要不断学习和实践才能更好地开发和使用自动化测试技术。

参考文献

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