前言
随着前端发展日新月异，我们对于前端应用的要求也越来越高。性能和用户体验是我们常常提到的关键词。在保证代码质量的同时，如何保证 Web 应用性能的峰值是我们需要学习和掌握的技能。本文将介绍如何在 Cypress 测试中实现性能与压力测试，帮助对前端测试和质量控制感兴趣的同学们加深对性能和测试的理解，提高前端开发和调优水平。
Cypress 简介
Cypress 是一个前端自动化测试框架。与传统的 Selenium 或者 Puppeteer 不同，Cypress 不需要依赖 Webdriver，它也完全地运行在浏览器中。Cypress 提供了完整的支持，包括点击、页面跳转、等待、网络请求和 UI 操作。Cypress 的一个显著新特性是它连环断言语法。Cypress 使用 Mocha 测试框架，并添加了一些额外的断言库，比如 Chai 以及 Sinon。它同时也提供了可扩展的插件 API，通过插件可以扩展它的功能。
性能测试范围
性能测试的目标是探讨系统能否满足其服务质量的需求。因此，执行性能测试时，需要测试其服务质量特性，如下面所示：
- 服务器质量：用于测试服务器硬件和软件。
- 网络质量：用于测试网络传输。
- 客户端质量：用于测试客户端软硬件。
- 软件质量：用于测试软件质量特性。
本文将讨论如何在 Cypress 测试中实现端到端性能和压力测试。端到端测试涉及多个系统级组件之间的交互。在本文中，我们将测试整个应用程序。我们将使用 cypress-plugin-snapshots 插件来保证每次运行的结果相同，并以测试 cases / fixture / snapshot 的方式存储结果。
性能测试概述
在进行性能测试之前，需要明确测试应用程序的基准。为此，您需要考虑应用程序的逻辑、功能和性能。接下来，介绍一些性能测试的术语：
- 单元测试：确保代码的每个组件和部件都能再次使用和进行单独的测试。实现这个目标的最好方式是使用 Cypress。
- 集成测试：集成测试确保代码库中的组件在一起工作。在 Cypress 中实施这个目标的最佳方式是使用 cypress-testing-library。
- 端到端测试：在这种类型的测试中，您测试体验而不是代码。在 Cypress 中实施这个目标的最佳方式是使用 cypress-real-events。
压力测试概述
性能测试主要关注系统的响应时间、吞吐量和负载。另一方面，压力测试主要关注系统的容量、吞吐量和负载水平。最好的压力测试是模拟正常使用情况的高压力。即使您对系统的使用情况非常了解，也不要以任何方式使用和影响生产。以下是一些压力测试的术语。
- 负载测试：测试系统在正常负载下的表现。
- 峰值测试：测试系统在执行重要任务时能否处理超出正常流量的所有请求。
- 节点测试：测试系统集群中各个节点之间的交互。
在 Cypress 中实现性能测试
性能测试该测试什么？
在 Cypress 中实现性能测试第一步是确定您要测试的项目。这涉及到确定需要测试哪些部分，需要测试的功能以及性能标准。对于每个组件都提供已知工作的基线是很重要的，这样就可以更轻松地排除特定组件的故障。
性能瓶颈场景设置
当您在 Cypress 中设置场景时，应遵循以下建议：
- 使用代表性数据。如果您在测试中使用的数据与部署的环境中使用的数据不同，则现实情况可能与测试不同。
- 仅测试一组过程可避免混淆测试结果。
您还需要确保您的应用程序在开始测试时处于相同的状态。要做到这一点，您可以使用 Cypress 中的 fixture / snapshot 的方式保存应用程序的状态。
性能测试脚本编写
Cypress 提供了一个工具，可以很容易地设置和执行性能测试。由于 Cypress 实现了一个非常直观、强大的断言，您可以很容易地创建断言并在测试过程中使用 Cucumber。
下面是一个示例测试脚本，用于在 Cypress 中实现端到端性能测试：
------ - ------------- ----------- - ---- -----------------------
--------------------- ----- ----- --------- -- -- -
------------- -- -
-- --- --- -------- ---- -- - ----- --- ------ ---- ---- ----- - ----------- -------
----------------- -----
-- ----- --- ---- --- ---- ---- ---- -- ------
---------------------------------------------------------------
--
---------- -- ---- -- ------ - ------- --- ------- -- -- -
--
----- ------- ------- ---- ---- ----- ---- --------
------- -- ----- ---- -- ---- --- ---------- -- ------- --------
---- -- ------- -- --- ---- --- -----
--
------------------------------------
-- ----- - ----- ---- ---- ----- --- -------- -- ------ --- --- -----
----------------------- -- -
--------------------------------------------
--
-- ---- ---- ---- --- --- ----- --- ---- --- -- -- ------
-------------------------------- -- ----------------------------------------------------------------- ----
--
---- -------- --- -------- --- --- --------- -- --- --- -----
--- ----- -- --- -- -- -- ---- ---- --- ------- ----- ----- -- - -------
-------- ---- -------- --- ------- --------
--
----------------------- -- -
-------------------------------------------
----------------------------------------- -------------------- -------------------
----- ------------------ - --------------------------------------------------
------------------------------- -- -------------------------------------------
--
-----------------------
-----------------
--------- -- -
----- ---- - ------------------------------
-- -------- ---- ------- --- -- -------- -- -------
----------------- - ----------- - --- - ----------------- - -------------------
--
------------------------------------------ -- -
-------------------------------------------------
------------------------------------------------
--
-- ---- --------- --- ------ --- -----
-------------
--
--性能测试运行
运行 Cypress 测试：
------- --- ------ ------------------------------------
下面是运行结束后，Cypress 测试结果的示例：
----------- ----- ----- ------- - ------ -- ---- -- ------ - ------- --- ----- -------- - ----------- - ------- ----
运行结束后，会在 cypress/videos 目录下生成测试运行过程的录像。
在 Cypress 中实现压力测试
在 Cypress 中实现压力测试，需要依赖 cypress-localstorage-commands 和 cypress-testing-library 这两个插件。cypress-localstorage-commands 可以帮助我们处理存储在本地存储中的数据，cypress-testing-library 可以帮助我们提高元素的查找速度。
压力测试场景设置
当您为 Cypress 压力测试设置场景时，应遵循以下建议：
- 使用代表性数据。如果您在测试中使用的数据与部署的环境中使用的数据不同，则现实情况可能与测试不同。
- 仅测试一组过程可避免混淆测试结果。
- 将本地存储和会话存储清除为默认值。
压力测试脚本编写
下面的示例显示了如何为应用程序编写并运行基本压力测试。
------ -------------------------------
------ - ------------ --------- - ---- --------------------------
---------------- ----- ----- --------- -- -- -
------------- -- -
------------------------
-------------
--
------- --- -------- ----- -- ------ -- -- -
----- ------------- - -
-- --- -- ---- -- --- ----
--------------------------------
-- ---- --- --- ---- -- -- ------- ---- --- ---- -- --- ----
-------------------------------------- ---
-- --- --- ---- ---- -------- ----- -- --- ----
--- ---- - - -- - - -------------- ---- -
--------------------------------
-
-- ---- --- --- ---- -- -- ------- ---- --- -- --- ----- -- --- ----
-------------------------------------- --------------- - ----
-- ------ --- -- --- ----- ---- --- ----
---------------------- - ----- ----------- ----------
-- ------- ---- --- ---- -- -----
-------------------------------------- ---
---------------------
--
--压力测试运行
运行 Cypress 压力测试：
------- --- ------ ------------------------------------ ----- ----------------
下面是运行结束后，Cypress 测试结果的示例：
------ ----- ----- ------- - --- --- -------- ----- -- ---- -------- - ------- ----
总结
Cypress 能够帮助您实现端到端性能测试和压力测试，收集实用数据来帮助您评估您的应用程序。随着您在 Cypress 中收集的数据越来越多，您将能够更好地理解您的应用程序，并在其中找到瓶颈。在本文中，我们分享了如何在 Cypress 中设置场景、编写脚本以及运行性能和压力测试。这非常有用，因为它可以让您更加容易地在前端应用程序开发周期的早期阶段就发现和解决性能和负载问题。同时，Cypress 的简单易用的特性和活跃的社区能够为您的应用程序性能测试提供很好的帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f865ddf6b2d6eab30772d8