在进行前端自动化测试时，使用 Cypress 可以快速高效地进行端到端测试。但是，在访问 https 站点时，经常会遇到 “SSL 错误” 的问题。在本文中，我们将学习如何使用 Cypress 解决这一问题。
问题描述
假设我们要在 Cypress 中访问一个 https 站点，但是浏览器会提示我们存在 SSL 错误，如下图所示：
这个错误是由于 SSL 证书不受信任而导致的。一般在浏览器中，我们可以选择 “继续前往网站”，但在 Cypress 中，则无法进行选择操作。因此，需要通过代码来解决这个问题。
解决方案
解决 “SSL 错误” 的方法是让 Cypress 屏蔽这个错误，通过 Cypress 的配置来达到这一目的。
我们可以在项目的 cypress.json 文件中添加以下配置内容：
{
"chromeWebSecurity": false
}这个配置项的作用是关闭 Chrome 浏览器的 Web 安全策略，从而使 Cypress 可以忽略 SSL 错误。
但是，这个配置会打开所有站点的 SSL 错误提示，从而降低了测试数据的安全等级。
为了仅对特定的站点清除 SSL 错误提示，可使用如下代码：
-- -------------------- ---- -------
-------------------------------------- -- -- -
-------------
----- ------------
---
------------ -
------------- ----- -- -
----- -------- - ------------------------
-----------------
----------------------------- - ------- ------ --
----------- -- -
-------------- ----- -------------- ------ --------------- ------- --------------- ---
---
--
----------------- ------
---
---这个代码片段定义了一个名为 bypassSSLError 的自定义 Cypress 命令。通过调用该命令并访问网站前，会在 onBeforeLoad 事件中向网站发出 HEAD 请求，从而在 Cypress 中设置站点的 Cookie，以解决 SSL 错误提示问题。
示例代码
以下是一个在 Cypress 中解决 SSL 错误的示例代码。我们假设访问的是百度站点：
-- -------------------- ---- -------
------------ --- ------ -- -- -
------------- -- -
--------------------
---
-------- ----- ---- -- -- -
-----------------------------------
---------------------------------- -------------
---
---在这个示例中，我们会先调用自定义 Cypress 命令 bypassSSLError，在访问 https://www.baidu.com/ 时将会自动跳过 SSL 错误提示，保证测试正常运行。
总结
通过本文，我们学习了解决 Cypress 中访问 https 站点出现的 “SSL 错误” 问题的两种方法。在设置 Cypress 配置项时，我们需要考虑保证测试数据的安全等级；在使用自定义 Cypress 命令时，则需要根据站点的 Cookie 进行设置。这些方法都可以帮助我们在测试中解决 “SSL 错误” 的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469d161968c7c53b09a0f43