概述
Cypress 是一个流行的前端自动化测试框架，它的特色不仅在于易于上手、易于使用，而且它也是一个功能强大的工具，它可以帮助我们进行界面测试和端到端测试。这些测试通常需要测试整个页面甚至整个应用的性能，因此，Cypress 也支持性能测试。
本文将介绍如何使用 Cypress 来进行性能分析，我们将逐步了解如何使用 Cypress 的 API 来收集数据并分析它们，最后我们将看到如何记录并可视化数据以便更好地理解它们。
性能测试
在进行性能测试时，我们通常想要测量以下指标:
- 页面加载时间
- 渲染页面所需的时间
- JS 执行时间
- 网络请求的响应时间
以上指标是我们通常希望在性能测试中测量的指标，而这些指标可以通过浏览器的性能 API 访问到。
下面我们将警告如何使用 Cypress 的 API 来收集这些数据。
构建性能测试
要构建性能测试，我们需要以下步骤:
- 在
before块中启动性能测试收集器 - 访问我们要测试的页面或应用
- 在
after块中停止性能测试收集器 - 处理并记录数据
步骤 1 和 3 是通过调用 Cypress 的 cy.window 命令来完成的，该命令允许我们在测试期间与浏览器窗口进行交互。
以下示例演示了如何启动和停止性能测试监听器:
--------- -- -
---------------------- -- -
-----------------------------
--
--
-------- -- -
---------------------- -- -
---------------------------
----------------------------------- -------- ------
----- -------- - -------------------------------------------- ----------
-- -------
--
--在 before 中，我们使用 window.performance.mark 命令来标记测试的开始，而在 after 中，我们使用 window.performance.mark 和 window.performance.measure 命令来标记测试的结束，并使用 window.performance.getEntriesByName 命令来获取 duration 的测量结果，然后处理这些数据。
现在，我们已经设置了性能测试收集器，我们还需要访问要测试的页面或应用，下面是如何完成的。
--------- --- ------ -- -- - -------------------- -- ------ --
现在我们已经设置了性能测试收集器，并访问了我们要测试的页面，我们已经可以开始收集数据了。
收集数据
现在我们可以开始收集性能数据，我们将收集以下指标:
- 页面加载时间
- 渲染页面所需的时间
- JS 执行时间
- 网络请求的响应时间
下面是如何收集这些数据的代码：
--------- --- ------ -- -- -
-----------
----------- -- -
-----------------
----------------------
-----------------------------
--
------------------
---------
----------- -- -
---------------------------
----------------------------------- -------- ------
----- -------- - -------------------------------------------- ----------
----- ------- - -----------
----------------------------------------
-------------- ---- -- -----------------------------------
-- ---------
--
--上面代码中我们使用了 cy.clearCookies() 和 cy.clearLocalStorage() 命令来确保我们的测试不会受到任何以前的 cookie 或本地存储的影响。然后，我们使用 cy.window() 命令来获取浏览器窗口对象，然后设置开始标记。
之后使用 cy.visit() 命令来访问我们要测试的页面，然后再次使用 cy.window() 命令获取浏览器窗口对象，然后设置结束标记和测量持续时间，最后我们使用 cy.wrap() 命令记录加载时间并将其记录在 Cypress 的测试报告中。
我们还可以使用其他指标监视测量，例如渲染时间、 JS 执行时间和网络请求时间：
--------- --- ------ -- -- -
-----------
----------- -- -
-----------------
----------------------
-----------------------------
--
------------------
---------
----------- -- -
---------------------------
----------------------------------- -------- ------
----- -------- - -------------------------------------------- ----------
----- ------- - -----------
----------------------------------------
-------------- ---- -- -----------------------------------
----- ------- - --------------------------------------------
----- --------- - -------------------- --------- -- --- - ------------------ --
----- ------ - ------------------------- -- ---------------------- --- ---------------------- --------- -- --- - ------------------ --
----- ---------- - --------- - ------
----------------------------
------------------------------------
-- -------
--
--在这个例子中，我们使用 window.performance.getEntriesByType 命令来获取所有网络请求，然后计算它们的总时间、JS 执行时间以及渲染时间。
我们还可以使用其他对性能更敏感的方法，例如性能指标采样等方法，但这超出了本文的范围。
记录数据
最后，我们需要将收集的数据记录下来，以便我们可以分析它们并进行任何必要的改进。这可以通过写一个用于 Cypress 的自定义报告器来完成：
----- -- - -------------
-------- ---------- ------- -
----- ------ - ------------ -------
------ ------------ - ------- - ------
-
-------- ---------------------------- -
---------------- -- -- -
----- ------- - -
--------- ------------------------------------------------------------------------
------- ----------------------------------------
----------- --------------------------------------------
-
----------------- - ---------------- - -------------- - ------------------
----- ---- - ----------------------- ----- --
---------------------------------------- -----
--
-
-------------- - --------------------我们可以将上面的代码放在 cypress/support/index.js 中，并调用它以包含我们的报表记录器：
----- -------------------- - ------------------------
-------------- - ---- ------- -- -
--------------------------- --------- -------------- -- ----------------- ---------------
---------- -
-------------- -
--------------------
------ ----
--
--
------ ------
-
-------------- - ---- ------- -- -
----------------------------
------ ------
-上面的代码将 createCustomReporter 导出为 Cypress 的测试支持模块，以便我们在此处引用并使用。
我们可以通过运行测试来生成 results.json 文件，以便我们可以进一步分析性能数据。
结论
在本文中，我们了解了如何使用 Cypress 进行性能测试。我们已经覆盖了性能测试的基础知识以及如何使用 Cypress 的 API 收集和记录数据。尽管性能测试是一个复杂的主题，但本文所述的技术应该足以让您了解如何在 Cypress 中收集性能数据，以便进一步分析和优化应用程序。
参考文献
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673310420bc820c582404dbe