如何解决 Cypress 访问 https 站点仍然出现不安全警告的问题？
背景
在进行前端自动化测试时，我们通常使用 Cypress 作为测试工具。但是在使用 Cypress 访问 https 站点时，有些情况下仍然会出现不安全警告，这样会影响我们的测试结果。本文将介绍如何解决这一问题。
原因分析
通常情况下，一个网站在使用 https 协议时，会使用 SSL/TLS 协议进行加密通信，以保证通信的安全性。Cypress 使用的是 Electron 浏览器，而 Electron 浏览器本身带有一个内置的证书机构（root certificate authority），可以向操作系统验证自签名证书。这意味着 Cypress 可以识别大多数自签名证书。然而，当某些站点的证书不被 Cypress 信任时，就会出现不安全警告。
解决方案
对于上述情况，我们可以通过以下两种方式来解决：
1. 添加自定义证书
我们可以手动添加自定义证书，以使 Cypress 可以信任该证书。
首先，我们需要获得该站点的自定义证书。通常，我们可以在浏览器中打开该站点，在地址栏上点击锁图标，然后点击证书按钮，再选择复制到文件，将证书以 .pem 格式保存下来。
接着，我们可以在 Cypress 的配置文件中添加以下代码：
-- -------------------- ---- -------
----- -- - --------------
-------------- - ---- ------- -- -
--------------------------- --------- -------------- -- -
-- --------------- --- ----------- -
----- ----------- - -------------------
-- ---------------------------- -
-------------------------------------------------- - ---------------------------- ---------
-
-
------ --------------
---
--其中，需要将 path/to/cert.pem 替换为证书文件的路径。
2. 关闭 SSL/TLS 校验
如果站点无法提供有效证书，或者我们无法获取该站点的自定义证书，我们可以在 Cypress 的配置文件中添加以下代码，以关闭 SSL/TLS 校验：
module.exports = (on, config) => {
on('before:browser:launch', (browser, launchOptions) => {
if (browser.family === 'chromium') {
launchOptions.preferences.default['ignore-certificate-errors'] = true;
}
return launchOptions;
});
};示例代码
我们以访问 https://self-signed.badssl.com/ 为例，演示如何添加自定义证书。
首先，我们需要在浏览器中打开该站点，在地址栏上点击锁图标，然后点击证书按钮，再选择复制到文件，将证书以 .pem 格式保存下来。
然后，我们在 Cypress 的配置文件 cypress.json 中添加以下代码：
{
"baseUrl": "https://self-signed.badssl.com/",
"chromeWebSecurity": false
}接着，我们在 support/index.js 中添加以下代码：
-- -------------------- ---- -------
----- -- - --------------
-------------- - ---- ------- -- -
--------------------------- --------- -------------- -- -
-- --------------- --- ----------- -
----- ----------- - -----------------------------------
-- ---------------------------- -
-------------------------------------------------- - ---------------------------- ---------
-
-
------ --------------
---
--其中，需要将 cypress/fixtures/badssl_cert.pem 替换为证书文件的路径。
最后，我们编写一个测试用例，检查页面是否有特定元素：
describe('访问 https://self-signed.badssl.com/', () => {
it('应该显示“user-agent”', () => {
cy.visit('/')
cy.get('pre').should('contain', 'user-agent')
})
})运行测试用例后，我们可以看到控制台输出的日志，证明我们已经成功访问了站点：
cy.visit()
cy.url()
.should('eq', 'https://self-signed.badssl.com/')
cy.get('pre')
.should('contain', 'user-agent')结论
本文介绍了在使用 Cypress 访问 https 站点仍然出现不安全警告的问题，以及两种解决方案：添加自定义证书和关闭 SSL/TLS 校验。同时，我们还演示了如何使用自定义证书的方法来访问自签名证书的站点。希望这篇文章能够帮助读者解决类似的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6709cbf7d91dce0dc87bc7ef