在进行前端自动化测试时，我们经常需要模拟用户在浏览器中进行的各种操作。然而，在某些情况下，浏览器会弹出 HTTP 基础验证弹窗，要求用户输入用户名和密码才能继续访问网站。这对于自动化测试来说是一个难题，因为它会阻塞测试流程。本文将介绍如何使用 Cypress 处理浏览器 HTTP 基础验证弹窗。
HTTP 基础验证
HTTP 基础验证是一种简单的身份验证方式，它通过在 HTTP 请求头中添加 Authorization 字段来进行身份验证。当浏览器需要访问需要验证的资源时，服务器会发送一个 401 Unauthorized 的响应，并在响应头中包含一个 WWW-Authenticate 字段，告诉浏览器需要进行身份验证。浏览器弹出一个对话框，要求用户输入用户名和密码，并将用户名和密码添加到 Authorization 字段中，再次发送请求。如果用户名和密码正确，服务器将返回请求的资源，否则返回 401 Unauthorized 的响应。
Cypress 处理 HTTP 基础验证
Cypress 可以使用 cy.request() 命令发送 HTTP 请求，但是它不能处理浏览器弹出的 HTTP 基础验证弹窗。为了解决这个问题，我们可以使用 cypress-ntlm-auth 插件。这个插件可以模拟 Windows NTLM 身份验证，包括 HTTP 基础验证。
首先，在 Cypress 项目中安装 cypress-ntlm-auth 插件：
--- ------- ----------------- ----------
然后，在 Cypress 的支持文件（cypress/support/index.js）中添加以下代码：
----- -------- - ---------------------------------------- -------------- - ---- ------- -- - ---------- ---------------------- -
最后，在测试文件中使用 cy.ntlmAuth() 命令发送带有用户名和密码的 HTTP 请求，如下所示：
-------------- ---- ----- ---------------- -- -- -
---------- ------ ---- ----- ---------------- -- -- -
-------------
--------- -----------
--------- -----------
------- ---------
------------ -------------
--
------------
---- ----------------------
----- -
----- -----------
----- -----------
---------------- -----
-
--
--
--在这个例子中，我们使用 cy.ntlmAuth() 命令发送 HTTP 请求之前，先进行身份验证。我们需要提供用户名、密码、域和工作站这些信息。然后，我们使用 cy.request() 命令发送一个带有用户名和密码的 HTTP 请求。
注意，我们需要将 sendImmediately 设置为 false，这样浏览器才会等待身份验证完成后再发送请求。如果将其设置为 true，浏览器会立即发送一个没有身份验证信息的请求，这将导致身份验证失败。
总结
Cypress 是一个非常强大的前端自动化测试工具，但是它不能处理浏览器弹出的 HTTP 基础验证弹窗。使用 cypress-ntlm-auth 插件，我们可以模拟身份验证，从而处理这个问题。本文介绍了如何使用 cypress-ntlm-auth 插件处理浏览器 HTTP 基础验证弹窗，并提供了示例代码。希望本文能够帮助你解决这个问题，并提高你的前端自动化测试技能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/656d4696d2f5e1655d59367d