作为一名前端开发人员，你肯定希望你的应用能够顺利地运行，并且能够快速地发现潜在的问题。这是必不可少的一部分，因此你需要一个强大的自动化测试框架。在这里，我们将介绍 Cypress，它是一个现代的前端 UI 自动化测试工具。 在这篇文章中，我们将详细地了解如何使用 Cypress 进行自动化测试，并提供实践中的一些示例代码和指导意义。
什么是 Cypress？
Cypress 是一个用于现代 Web 应用程序的前端测试框架。它与其他测试框架相比，提供了以下几个特点：
自动等待机制 - Cypress 可以自动等待异步操作完成，例如像 AJAX、等待元素出现、等待 URL 更改等；
可访问性 (A11y) 支持 - Cypress 可以测试网站的无障碍性；
现场调试 - Cypress 可以帮助你在测试期间断点调试，以发现错误；
可重复的测试 - Cypress 可以使你的测试成为一个可重复的测试，可以在不同的环境下运行；
容易集成 - Cypress 可以与其他工具进行集成。
作为一个前端自动化测试框架，Cypress 非常容易安装和使用。它使用 JavaScipt 进行编写，使得测试代码可以直接放置在 Web 应用程序中。 Cypress 自动化测试工具提供了灵活的 API，可以测试多种不同类型的 Web 应用程序。
如何安装 Cypress？
使用 Cypress 进行自动化测试并不需要太多的学习成本。为了开始使用 Cypress，你首先需要确保你已经安装了 Node.js 和 NPM。
你可以通过运行以下命令安装 Cypress：
npm install cypress --save-dev
或者，你可以在 Github 上直接下载最新版本的 Cypress。将其解压后，你可以使用以下命令在本地运行 Cypress：
npm run cy:open
这将启动 Cypress 的 GUI 应用程序，供你使用。从 GUI 中，你可以选择要运行的测试，为之分配一个命名空间，以及选择现代和“父层”测试。所有命令都是通过图形用户界面执行的，Cypress 会在内部执行。
如何进行 Cypress UI 自动化测试？
使用 Cypress 进行 UI 自动化测试确实需要一些编程技巧和知识。在这里，我们将看一些示例代码，以帮助你入门。
语法结构
Cypress 的语法结构非常容易掌握。下面是一个简单的测试用例：
-- -------------------- ---- -------
----------------- -- --------- -- -- -
------------------------ -- -- -
--------------------------------- -- ----
------------------------ -- - -- ----
----------------------------------- -------- -- ----
-------------------------------------------------
----------------------------------------- -- ---------
------------------ -- ----
--
----------------------------------------- -- -----------
--
--代码的第一部分是 describe 语句。它是一个上下文语句，用于描述测试用例的总体场景。下一部分是 it 语句。它是一个单独的测试用例，它描述了测试用例的期望行为。
最后，代码中的 cy 对象是 Cypress 的核心对象，它提供了测试各种属性和方法。例如，我们使用 cy.visit() 命令访问页面。在表单中，我们可以找到表单中的字段并填写它们。最后，我们等待页面上的成功信息出现。
测试 UI 元素
常见的 UI 元素包括表单、链接、按钮和列表。 Cypress 有许多方法帮助你查找和测试这些元素。
查找和填写文本框域
it('应该能够填写姓名', () => {
cy.visit('http://localhost:3000')
cy.get('.name').type('Peter Parker').should('have.value', 'Peter Parker')
})首先，我们使用 cy.visit() 命令访问页面。然后，我们使用 cy.get() 命令查找具有 .name 类的元素，并使用 cy.type() 命令填写它们。最后，我们使用 .should() 命令确保该元素存在，并具有已填写的值。
选择单选框和复选框
it('应该能够选择男性单选框并选择多个爱好', () => {
cy.visit('http://localhost:3000')
cy.get('.gender-radio').check('男').should('be.checked')
cy.get('.hobbies-checkbox').check(['羽毛球', '阅读']).should('be.checked')
})使用 .check() 命令选择和取消选择单选按钮和复选框。
选择下拉菜单选项
it('应该正确选择理由下拉列表项', () => {
cy.visit('http://localhost:3000')
cy.get('.reason-select').select('我需要帮助').should('have.value', 'help')
})在选择下拉列表项时，我们使用 .select() 命令，并在其后面传递下拉菜单中的文本。
坚持一定的方式来安排你的测试代码
Cypress 提供了内置的架构，旨在帮助规范化测试用例的编写，并使代码更新更容易。这种格式是 规范的结构测试文件。
-- -------------------- ---- -------
----------------- -- --------- -- -- -
------------- -- -
------------- -- -----------
--
------------------ -- -- -
----------------- -- -- -
-- ---
--
--
---------------- -- -- -
-------------------- -- -- -
-- ---
--
--
--使用 beforeEach() 函数访问站点。在特定的测试场景中，声明此前提条件可以很方便地访问数据层，并使整个测试过程更加自动化。
实时自动化测试
在编辑测试用例时，有利于自动运行测试。将以下命令添加到 package.json 中：
{
"scripts": {
"test": "cypress run"
}
}然后在终端中运行 npm test。Cypress 会自动运行你的测试，并在每个测试用例结束时，将测试结果输出到控制台。这使得构建过程更加快速和自动化。当然，在提交代码之前，请确保所有测试用例均已通过！
总结
在本文中，我们已经学习了如何开始使用 Cypress 进行自动化测试，以及如何进行不同的 UI 元素测试。通过使用 Cypress，你可以在不同的环境中运行可重复的测试，以验证代码的稳定性和正确性。使用 Cypress，你可以得到一个可重用的测试框架，如果你需要在代码仓库之间共享测试，则可以将它们变为 npm 软件包。希望本文可以帮助您了解如何进行 Cypress UI 自动化测试，并帮助您轻松测试您的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649024e148841e9894e50d83