Cypress:一种全新的 JavaScript E2E 测试框架

阅读时长 4 分钟读完

什么是 Cypress?

Cypress 是一种由 JavaScript 编写的端到端(End-to-End,E2E)测试框架, 它用于编写、运行和调试测试,而无需额外的配置或安装其他库或测试工具。它可以在现代浏览器中进行自动化测试,如 Google Chrome,Firefox和Electron应用程序。

Cypress采用基于 Electron 的体系结构,因此在浏览器运行测试时,测试代码被放置在主进程中,因此您可以使用断点,打印语句和调试器控制台。

与传统的 Selenium 测试相比,Cypress具有更快的运行速度,可读性更好的代码,以及更容易查错的方式。

如何使用 Cypress?

Cypress拥有简单易用的API,使得 E2E 测试的编写变得迅速而简单。 Cypress提供了一个交互式运行环境,让开发人员可以像在DevTools控制台中检查DOM元素功能一样,对测试用例进行交互式测试。

安装 Cypress

你可以使用 npm 进行 Cypress 的安装,运行以下命令:

编写测试

Cypress 的测试文件都存放在 cypress/integration/ 目录下,测试文件必须以spec.js为扩展名。Cypress 支持 BDD 和 TDD 风格的编写测试代码。

下面是一个简单的示例,它测试了登录表单的验证和提交,我们使用 TodoMVC 应用来演示。在你的项目根目录下创建一个名为 e2e 的文件夹,再在里面创建 integration/login.spec.js 文件并将以下代码复制到文件中:

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

这个测试用例访问了待办事项列表应用,并在其中创建了一个新任务,并且检查了任务列表中是否缺少创建新任务所需的电子邮件和密码。我们可以通过以下命令来运行测试:

Cypress 如何与其他工具集成?

Cypress 能够与现有的工具和技术栈集成,例如 CI 工具,如 Jenkins 和 Circle CI,以及其他框架,例如 React,Angular 和 Vue。

Cypress 也可以通过 REST API 来测试 RESTful APIs。您只需使用 cy.request() 去发送 HTTP 请求即可。

通过 Cypress 提供的 Cypress.Commands.add() API,你可以自定义测试命令,它们将被添加到 Cypress 对象上的命令列表中,并属于你的自定义命令。

结论

Cypress 已经成为前端开发人员的强大工具,它具有现代化的体系结构和易用性,使 E2E 的测试编写变得更加容易和简单。如果您正在考虑使用 E2E 测试,那么你不应该错过 Cypress,它将为您的测试代码带来新的维度。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6718cacfad1e889fe22e4786

纠错
反馈