前言
随着前端应用逐渐复杂，测试变得越来越重要。E2E（End-to-End）测试是确保应用程序在各个模块和部分之间正确运行的重要组成部分。准确地说，E2E 测试是测试整个应用程序的流程——从用户启动应用程序开始，到应用程序的最终目标。在此过程中，应用程序的每个组成部分都会被测试，以确保它们工作良好并且可以正确交互。
在 E2E 测试中，Cypress 是一个强大而又灵活的工具，可以帮助您测试各种用户场景。在正在构建和维护 E2E 测试套件时，您需要知道一些技巧和注意事项，以避免错误和提高可维护性。
在本文中，我们将介绍 Cypress 的一些重要特性并提供一些技巧和注意事项，以帮助您构建流畅、高效和可靠的 E2E 测试套件。
Cypress 简介
Cypress 是一个基于 JavaScript 的端到端测试框架，它提供了强大的 API 和工具，使得测试前端应用变得轻松。Cypress 提供了一些很棒的功能，包括自动等待、自动重试、自动截图、实时重新加载和命令式断言。Cypress 是一个非常灵活的测试框架，并提供了各种功能，可以帮助测试员编写覆盖各种场景的测试代码。
安装 Cypress
Cypress 的安装非常简单，您可以通过 npm 安装 Cypress。
npm install cypress --save-dev
配置 Cypress
安装 Cypress 后，您需要配置您的项目，以便使用 Cypress 编写和运行测试。创建 ./cypress.json 文件以配置 Cypress 属性。
{
"baseUrl": "http://localhost:8080",
"viewportWidth": 1366,
"viewportHeight": 768,
"trashAssetsBeforeRuns": true,
"screenshotsFolder": "cypress/screenshots",
"videosFolder": "cypress/videos"
}Cypress E2E 测试技巧
使用 Custom Commands
Cypress 允许您使用 Custom Commands 向命令列表中添加自定义命令。这使得您可以重复使用共同的操作，并且保持测试代码简洁易读。
Cypress.Commands.add('login', ({ username, password }) => {
cy.visit('/login')
cy.get('[name="username"]').type(username)
cy.get('[name="password"]').type(password)
cy.get('[type="submit"]').click()
})在上面的例子中，我们创建了一个 login 命令，该命令需要用户名和密码作为参数。该命令将打开登录页面、填写表单并单击提交按钮。在测试代码中，可以使用以下命令调用该命令：
cy.login({ username: 'foo', password: 'bar' })使用 Fixtures
测试代码中的数据应该保持干净和有序。Cypress 允许您在 ./fixtures 目录中定义数据以用于测试。该目录中的文件可以是 JSON、CSV、Excel 等格式。
{
"username": "foo",
"password": "bar"
}在测试代码中，可以使用以下命令从 fixtures 中读取数据：
cy.fixture('auth-data').then((authData) => {
cy.login(authData)
})使用环境变量
在测试期间，您可能需要使用环境变量来配置您的测试。Cypress 允许您使用 Cypress.env 对象来访问和设置环境变量。
// 设置环境变量
Cypress.env('apiKey', '1234567890')
// 访问环境变量
const apiKey = Cypress.env('apiKey')使用断言
Cypress 提供了很多种断言，这些断言可以帮助您编写可读性强的测试，并且最大程度降低代价。
cy.get('h1').should('contain', 'Welcome to My App')
cy.get('#my-form').should('have.class', 'error')
cy.get('#input').should('have.attr', 'type', 'email')
cy.get('button').should('be.disabled')在测试中使用 wait() 命令
在测试中经常需要等待页面或元素加载完成，并在数据加载完成后执行测试操作。为了避免在测试中使用阻塞式函数，Cypress 提供了 wait() 命令。
cy.get('#my-form').submit()
cy.wait(2000)
cy.url().should('include', '/dashboard')在测试中使用重试机制
在测试期间，页面和元素可能会在不同时期发生变化。应用程序中的操作可能会需要多次尝试才能成功。为了解决这些问题，Cypress 提供了重试机制。当重试机制启用时，Cypress 会自动重试失败的操作。
cy.get('#my-form').submit({ timeout: 10000, retryOnStatusCodeFailure: true })在测试中使用钩子
Cypress 支持钩子，在测试的规定时间点执行可定义的操作。钩子被分为有先决条件和没有先决条件的两种类型。
有先决条件的钩子：
-- -------------------- ---- -------
--------- -- -
--------------------------------------- -- -
------------------
--
--
------------- -- -
----------------------
--没有先决条件的钩子：
-- -------------------- ---- ------- --------- -- - -- ---------------- -- -------- -- - -- ---------------- -- ------------- -- - -- ------------ -- ------------ -- - -- ------------ --
Cypress E2E 测试注意事项
避免多次登录
在测试过程中，避免多次登录应用程序。您可以在 before() 钩子中登录，并在测试之间保留登录状态。
避免使用 Cypress 的内置超时
Cypress 默认的超时时间可能会导致错误的结果。在运行测试时，请确保使用恰当的超时时间。
避免使用定时器
在测试代码中使用定时器可能会导致意外的结果。如果您需要等待元素加载，使用 Cypress 提供的等待机制。
避免使用绝对路径
在测试代码中使用绝对路径可能会导致失败。使用 Cypress 的“相对路径”功能，它会在已测试的应用程序的基础上解析路径。
避免在测试中进行 CORS 请求
Cypress 不支持跨域资源共享（CORS）的请求。如果您需要测试功能，应完全模拟服务器内容。
cy.server()
cy.route('GET', '/todos', { todos: [] })
cy.visit('/dashboard')结论
通过使用以上技巧和注意事项，Cypress 测试可以得到更好的维护性和可靠性。Cypress 拥有特性丰富、易使用、灵活性高的特性，可以帮助开发人员和测试人员在开发前端应用时创建高质量且易维护的代码。
在使用 Cypress 进行前端 E2E 测试时，请始终阅读官方文档，并尝试使用箇例代码进行实际编写。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671fcddc2e7021665eff94c5