在前端开发中，测试是保证质量的重要步骤。Cypress 是一种流行的前端自动化测试工具，能够为开发者提供不仅仅质量测试的信息，而且性能和可靠性方面的信息。
在测试代码的编写和执行过程中，性能往往成为瓶颈。考虑到测试工具的执行速度是我们进行前端自动化测试时的一个重要指标，优化测试性能变得尤为重要。
在本文中，我们将会学习到一些优化 Cypress 测试性能的技巧来加速测试执行，主要包括以下三个方面：
- 编写高效的测试代码
- 配置合理的 Cypress 测试并行
- 优化环境设计和数据准备
1. 编写高效的测试代码
如何编写高效的测试代码是显而易见的问题。以下是一些技巧来确保测试代码的高效性：
（1）使用 .its 和 .invoke 代替 .get
在 Cypress 中，您可以通过 .get 定位元素以从网页中提取数据。而 .its 和 .invoke 命令更加高效，可以在一次定位中提取多个元素。
例如，以获取张表格单元格中既有内容又有 href 属性为例，以下代码是高效的：
-- -------------------- ---- ------- ------------- ---- -------------- ----------------- --- ------------- ---- -------- --------------- --------------- -------------------- ---- ------------- ---- -------- --------------- ------- -------------------- ----
它们从同一个查询中同时提取 table 标签中所有 td 标签的数量、第一个 td 标签的文本内容、第一个 td 标签的 href 属性。
（2）避免使用复杂等待器
华丽的等待器能够使我们的测试代码显得非常专业，但它们会影响测试的性能。Cypress 的默认等待时间已足够让我们从需要等待的操作中获取控制权。
为避免使用开发者定义的等待器，可以使用 Cypress 的 should 命令。他可以在断言通过前一直等待：
cy.get('input[type="submit"]').should('be.exist')（3）避免测试多个断言
在某些情况下，测试单个断言需要众多步骤。在这种情况下，我们可以通过测试多个断言以避免重复代码。
例如，在一个页面上测试同一元素的多个属性是否符合预期，可以这样编写：
cy.get('nav a[href="/search"]')
.should(($element) => {
expect($element).to.have.attr('target', '_blank');
expect($element).to.have.attr('rel', 'noopener');
expect($element).to.have.text('Search');
});（4）缩短流程
减少测试流程长度可能会大大提高测试执行速度。代价就是这可能会降低代码覆盖率。
例如，我们在这里使用 Cypress 来模拟一个鼠标悬停一个元素并打开二级菜单的情况：
cy.get('#menu').trigger('mousemove');
cy.get('#submenu').should('be.visible');可以使用更短的方式来完成这个测试：
cy.get('#menu').trigger('mouseenter').click();2. 配置合理的 Cypress 测试并行
合理的并行化可以帮助我们节省大量时间。如果您有多个测试机器可用，那么您可以轻松地通过配置 Cypress 进行并行化测试。
（1）使用 Cypress Dashboard
Cypress Dashboard 是 Cypress 公司提供的一项服务。使用此服务可以在“特定机器”上免费并行运行 Cypress 测试，而且还提供了许多信息，例如代码覆盖率、性能度量和测试结果等。
您可以在“运行器”信息中找到“CI”选项，设置测试运行时的 CI 指示器。例如，可以通过 Bamboo、Jenkins 等平台使用“CI”。
（2）利用 uncommitted 测试
通过使用 npms 安装 cypress-uncommitted，我们可以使用 test-uncommitted 命令，以停止所有未提交的版本。
这是一种快速测试可行性的方法。如果您使用的仓库中只有极少数量的未提交版本，这将非常有用。
以下是使用 Cypress uncommitted 的 CLI 命令：
"scripts": {
"test:local:uncommitted": "cypress-uncommitted run --headed --spec \"cypress/integration/*/*/*\""
}3. 优化环境设计和数据准备
（1）在虚拟机中运行测试
在虚拟机中运行 Cypress 测试可以增加测试的并发性。
（2）尝试使用 Cypress Image Snapshot
使用 Cypress Image Snapshot 可以避免过多的 API 调用，而是直接比较截图。这将使您的测试更快，因为不必等待 API 的响应。
以下是使用 Cypress Image Snapshot 的 CLI 命令：
"scripts": {
"cy-open": "cypress open",
"cy-run": "cypress run",
"cy-diff": "cypress run --env updateSnapshots=true"
}（3）优化完成数据准备
如果您使用的数据保存在某个远程服务器上，则应使用编写的代码块并尽可能减少数据的拉取时间。
例如，以下代码可用于优化测试运行即时生成新数据：
-- -------------------- ---- -------
------------------------------------ ------ -- -
----- ----- - ----------------------------------
--- ------ - ---
--- ---- - - ------- - - -- ---- ------ -- ------------------------------ - ---------------
------ -------
---
-------------------------------------- -- -- -
--------------------------------------- -- -
----- ---- - --------------------------------------- - ------------------------
-------------------------
--------------------------------
--------------------------------------------------------------------------
-------------------------------------------------------------
--------------------------
--------------------------------
---
---在常规步骤中，可以使用以下方法调用此命令：
beforeEach(() => {
cy.server();
cy.route('api/users').as('users');
cy.createUserData();
});总结
通过遵循这些技巧，您可以轻松优化 Cypress 测试的性能。编写高效的测试代码、合理地配置 Cypress 测试并行以及优化环境设计和数据准备都是使测试性能更快的可靠方法。
在优化测试性能时，请记住为所做的每个更改编写清晰、精简和可读代码，这将使测试更易于理解和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6484822e48841e9894386989