前言
在前端开发过程中，自动化测试是必不可少的一环。Cypress 是一个前端自动化测试框架，它结合了 Mocha、Chai 和 Sinon 三个 JavaScript 测试框架的功能，提供了更加简单易用的 API，支持自动化测试的全过程，包括 UI 测试、集成测试和端对端测试等。
本文将分享我在使用 Cypress 进行自动化测试的实践经验，包括 Cypress 的基本使用、常用命令和技巧、如何编写测试用例以及如何集成到 CI/CD 等方面，希望能为前端开发者提供一些帮助和指导。
Cypress 的基本使用
安装 Cypress
Cypress 可以通过 npm 安装，需要先在项目目录下执行以下命令：
npm install cypress --save-dev
安装完成后，可以在项目根目录中找到 node_modules/.bin/cypress 文件，执行以下命令启动 Cypress：
npx cypress open这会打开 Cypress 的图形界面，可以通过界面来管理测试用例、运行测试用例、查看测试结果等。
编写测试用例
Cypress 的测试用例是基于 JavaScript 编写的，可以通过 Cypress 提供的 API 来模拟用户的操作，比如点击按钮、输入文本、选择下拉框等。
以下是一个简单的测试用例示例，用于测试一个登录页面：
-- -------------------- ---- ------- --------------- ------ -- -- - ---------- ----- -------------- -- -- - ------------------ --------------------------------- ---------------------------------- ------------------------------- -------------------------- ------------- --------------------- ------- -- --展开代码
在这个测试用例中，我们首先通过 cy.visit 命令打开登录页面，然后分别通过 cy.get 命令获取账号、密码的输入框，输入正确的用户名和密码，最后点击登录按钮，通过 cy.url 命令检查是否跳转到了正确的页面，并且通过 cy.contains 命令检查是否显示了欢迎信息。
运行测试用例
在 Cypress 的图形界面中，可以通过单击测试文件或测试用例来运行测试用例，也可以通过命令行来运行测试用例。以下是常用的命令行命令：
# 运行所有测试用例 npx cypress run # 运行指定测试文件 npx cypress run --spec cypress/integration/login.spec.js # 运行指定测试用例 npx cypress run --spec cypress/integration/login.spec.js --testName "should login successfully"
常用命令和技巧
除了上述基本使用外，Cypress 还提供了很多有用的命令和技巧，以下是我在实践中常用的一些：
cy.wait：等待指定的时间，比如等待页面加载完成、等待异步请求返回等。cy.intercept：拦截网络请求，可以模拟网络请求的返回结果，用于测试网络请求相关的功能。cy.get：获取元素，支持 CSS 选择器、XPath 和自定义选择器。cy.contains：查找包含指定内容的元素。cy.wrap：包装元素，将元素包装成一个可链式调用的对象。cy.should：断言元素是否符合指定的条件，比如是否可见、是否包含指定的文本等。cy.exec：执行任意的 JavaScript 代码，用于编写复杂的测试用例和自定义命令。
以下是一个使用 cy.intercept 命令拦截网络请求的示例代码：
-- -------------------- ---- ------- ----------------- --------- -- -- - ---------- --------- ------- --------- -- -- - ---------------------- ------------------- ------------ - ----- ------- ---------------- --------------------- ------- --------------------------------------- -- - --------------------------------------------------------- -- -- --展开代码
在这个测试用例中，我们通过 cy.visit 命令打开一个页面，然后通过 cy.intercept 命令拦截了一个 GET 请求，并返回了一个名为 admin 的用户信息。最后通过 cy.wait 命令等待拦截到的请求返回，并通过断言来检查返回结果是否正确。
如何编写测试用例
编写测试用例是 Cypress 自动化测试的核心，它需要考虑到很多方面，比如测试场景、测试数据、测试覆盖率等。以下是一些编写测试用例的经验和建议：
确定测试场景
测试场景是测试用例的基础，它需要考虑到系统的各种功能和业务流程。在确定测试场景时，可以参考系统的需求文档、业务流程图、用户故事等。
设计测试数据
测试数据是测试用例的关键，它需要覆盖系统的各种情况，比如正常情况、异常情况、边界情况等。在设计测试数据时，可以参考系统的输入输出、数据模型、数据字典等。
考虑测试覆盖率
测试覆盖率是测试用例的重要指标，它需要覆盖系统的各种功能和业务场景。在考虑测试覆盖率时，可以参考系统的代码覆盖率、功能覆盖率、业务场景覆盖率等。
使用 Page Object 模式
Page Object 是一种设计模式，用于将页面元素和页面操作封装成一个对象，方便测试用例的编写和维护。在使用 Page Object 模式时，可以将页面元素和页面操作分别封装成一个类，然后在测试用例中直接调用。
以下是一个使用 Page Object 模式的示例代码：
-- -------------------- ---- ------- ----- --------- - ------- - ------------------ - --- --------------- - ------ ------------------- - --- --------------- - ------ ------------------- - --- ------------- - ------ ----------------------- - --------------- --------- - --------------------------------- --------------------------------- ------------------------ - - --------------- ------ -- -- - ----- --------- - --- ----------- ---------- ----- -------------- -- -- - ----------------- ------------------------ --------- -------------------------- ------------- --------------------- ------- -- --展开代码
在这个测试用例中，我们首先定义了一个 LoginPage 类，封装了登录页面的元素和操作，然后在测试用例中直接调用 LoginPage 类的方法来操作页面元素和执行操作。
集成到 CI/CD
将自动化测试集成到 CI/CD 是保证代码质量和减少人工测试工作量的重要手段。在将 Cypress 自动化测试集成到 CI/CD 时，可以参考以下步骤：
- 在 CI/CD 环境中安装 Cypress。
- 在 CI/CD 环境中运行 Cypress，生成测试报告。
- 将测试报告上传到测试报告平台或者版本控制系统中。
以下是一个使用 GitHub Actions 将 Cypress 自动化测试集成到 CI/CD 的示例代码：
-- -------------------- ---- ------- ----- -- --- ----- --------- - ---- ----- ----- -------- ------------- ------ - ----- -------- ---- ----- ------------------- - ----- ------- ------------ ---- --- ------- - ----- --- ----- ---- --- --- ------- - ----- ------ ---- ------- ----- -------------------------- ----- ----- ------------ ----- ---------------展开代码
在这个示例中，我们首先在 on 字段中指定了触发 CI/CD 的条件，然后在 jobs 字段中定义了一个名为 test 的作业，指定了作业运行的环境和步骤。其中，Run tests 步骤中运行了 Cypress 自动化测试，并生成了测试报告，Upload test results 步骤将测试报告上传到了 GitHub Actions 中。
结语
Cypress 是一个非常强大的前端自动化测试框架，它提供了丰富的 API 和工具，可以帮助前端开发者提高代码质量和工作效率。在实践中，我们需要结合自己的项目和业务场景来设计和编写测试用例，并将自动化测试集成到 CI/CD 中，实现全面的自动化测试覆盖。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d97ca9a941bf7134120486
