Cypress如何在身份验证弹窗中输入内容并完成确认提交

可以实现，你遇到的是浏览器原生的HTTP Basic Auth 身份验证弹窗，不属于页面DOM元素，无法通过Cypress的DOM操作指令直接填写输入框，无需模拟手动点击弹窗，通过以下两种方案即可直接完成认证：

方案1：URL 内嵌认证信息（最简方案） #

直接在访问的应用URL中拼接用户名和密码，格式为协议://用户名:密码@应用访问路径，示例代码如下：

// 替换为实际用户名、密码、应用地址即可
cy.visit('https://admin:test123@your-app.com/home')

方案2：请求头携带 Authorization 认证信息 #

如果URL内嵌认证信息不符合你的测试规范，可以在发起访问请求时主动携带基础认证头：

const username = '你的实际用户名'
const password = '你的实际密码'
// 生成符合Basic Auth规则的Base64编码凭证
const authToken = btoa(`${username}:${password}`)

cy.visit('https://your-app.com/home', {
  headers: {
    Authorization: `Basic ${authToken}`
  }
})

全局配置优化 #

如果全量测试用例都需要经过该身份验证，可以将认证逻辑配置为全局规则，避免每个用例重复编写：

• 直接将认证信息拼接在cypress.config.js的baseUrl配置项中
• 也可以通过Cypress.Commands.overwrite重写visit命令，默认携带认证头

内容的提问来源于stack exchange，提问作者andisan