Cypress 的 UI 自动化测试实践总结-JavaScript中文网-JavaScript教程资源分享门户

前言

随着现代 Web 应用的复杂性的不断增加，UI 自动化测试成为了必不可少的一环。Cypress 是一个基于 Electron 的前端自动化测试工具，旨在提供一种流畅而优雅的编写、运行和调试 Web 应用程序的方式。它支持跨浏览器的测试以及可靠的浏览器间同步，同时具备易于设置和维护的全栈性能检查，完全在 JavaScript 中编写。

在本文中，我们将深入了解 Cypress 的 UI 自动化测试实践，分别从工作原理、优点、与其他自动化测试框架的对比以及实战经验等方面进行总结，希望能为读者提供有价值的帮助。

工作原理

Cypress 使用了许多前沿的技术来改变自动化测试的方式，包括 Shadow DOM 的支持、智能等待、实时重新加载和针对网络错误的特殊处理。它通过 Nodejs 在 Electron 引擎中运行获得了更快的测试速度和更轻松的调试。Cypress 的工作流程如下：

从测试文件开始，Cypress 将加载我们需要测试的 Web 应用程序。
Cypress 会打开一个新的浏览器窗口，并将 Web 应用程序渲染到其中。
Cypress 然后开始运行测试文件中的代码。
在这个过程中，Cypress 会注入一些 JavaScript 代码到 Web 应用程序中，这样它就能轻易地控制应用程序并进行测试。
当测试结束时，Cypress 将关闭浏览器窗口并输出测试结果。

优点

Cypress 与其他自动化测试框架相比，具有以下优点：

可以在浏览器中进行调试：Cypress 具有一个内置调试工具，可以在测试时通过浏览器的开发工具进行调试，实现起来非常简单。
支持更真实的浏览器中的测试：与其他自动化测试框架不同，Cypress 的测试是在浏览器内运行的，因此能够模拟出更真实的用户交互。
清晰的错误日志：Cypress 的错误日志不仅提供错误的详细信息，还提供了一个指向错误位置的快速链接，以便您快速找到和修正问题。
智能等待：Cypress 会自动等待页面中所有渲染的元素，无需手动编写等待逻辑。
实时重新加载：Cypress 可以在您修改测试代码时立即重新加载页面，这样您就可以立即查看更改。
自动截图：当测试失败时，Cypress 会自动截取失败的步骤，这样您就可以更容易地找到问题所在。

与其他自动化测试框架的对比

Cypress 与其他自动化测试框架相比具有以下优点：

速度更快：Cypress 不使用 Selenium WebDriver，它使用了很多 Nodejs 和 Electron 的技术，因此测试速度更快。
无需等待：在 Cypress 中，您不需要编写显式等待逻辑，因为 Cypress 会在需要等待时自动等待。
可以直接测试 Shadow DOM：在 Cypress 中，您可以直接测试 Shadow DOM，而无需使用其他自动化测试框架的固有解决方案。
自动化测试脚本与应用程序在同一个进程内：在 Cypress 中，测试脚本与应用程序在同一进程内运行，这使得您可以在不同步测试代码的情况下执行许多操作。

实战经验

以下是几个使用 Cypress 进行自动化测试的示例场景：

登录测试

// javascriptcn.com 代码示例
describe('登录测试', () => {
  beforeEach(() => {
    cy.visit('/');
  });

  it('输入错误的用户名和密码时，应该不能登录', () => {
    cy.get('#username').type('John');
    cy.get('#password').type('Doe');
    cy.get('form').contains('登录').click();
    cy.get('#error').contains('用户名或密码错误');
  });

  it('输入正确的用户名和密码时，应该可以登录', () => {
    cy.get('#username').type('jane.doe');
    cy.get('#password').type('password');
    cy.get('form').contains('登录').click();
    cy.url().should('include', '/dashboard');
  });
});

E2E 测试

// javascriptcn.com 代码示例
describe('电子商务应用程序', () => {
  beforeEach(() => {
    cy.visit('/');
  });

  it('可以将商品添加到购物车', () => {
    cy.get('.search-bar').type('T-shirt');
    cy.get('.search-button').click();
    cy.get('.product').first().find('.add-to-cart-button').click();
    cy.get('.cart-icon').click();
    cy.get('.cart-item').should('not.be.empty');
  });

  it('可以删除购物车中的商品', () => {
    cy.get('.search-bar').type('T-shirt');
    cy.get('.search-button').click();
    cy.get('.product').first().find('.add-to-cart-button').click();
    cy.get('.cart-icon').click();
    cy.get('.cart-item').first().find('.delete-button').click();
    cy.get('.cart-item').should('be.empty');
  });
});

测试网络请求

// javascriptcn.com 代码示例
describe('网络请求测试', () => {
  it('可以正确发送 POST 请求', () => {
    cy.request('POST', '/login', {
      username: 'jane.doe',
      password: 'password',
    }).then((response) => {
      expect(response.status).to.eq(200);
    });
  });

  it('可以正确发送 GET 请求', () => {
    cy.request('GET', '/products').then((response) => {
      expect(response.status).to.eq(200);
      expect(response.body).to.have.length.greaterThan(0);
    });
  });
});

结语

Cypress 是一个功能强大的自动化测试框架，它拥有流畅且优雅的 API、智能等待、实时重载、影子DOM支持等独特的功能，可以帮助前端开发人员更快更稳定地编写高质量的UI自动化测试脚本。为了成功使用 Cypress 进行前端 UI 自动化测试，我们需要仔细分析测试用例和应用程序，并确定测试策略。这些最佳实践和技巧将有助于您开始使用和利用 Cypress 进行高效的 UI 自动化测试。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654c16b57d4982a6eb5c216a