使用Cypress访问测试应用遇弹窗、页面空白问题咨询

需要输入用户ID、密码的弹窗不属于普通DOM元素，分两类场景对应处理，不要尝试直接用选择器定位弹窗元素——不管是浏览器原生HTTP认证弹窗，还是window原生弹窗（alert/confirm/prompt），都不在网页DOM树内，常规元素定位逻辑完全失效。

方案1：优先使用Cypress原生auth参数处理HTTP Basic认证弹窗 #

需要输账号密码的阻塞式弹窗，90%概率是HTTP Basic 原生认证弹窗，之前手动拼接http://用户名:密码@域名的方式在高版本Chrome/Edge中会被默认拦截，且密码含特殊字符（@、:、/等）时会出现URL解析错误，导致后续静态资源、接口请求全部失败，页面白屏。
直接用cy.visit自带的auth参数传凭证即可，Cypress会自动在请求头中携带合规的Authorization信息，不会触发弹窗，也不会出现URL解析错误：

// 替换为实际目标地址和账号密码
cy.visit('https://your-app-target-url.com', {
  auth: {
    username: '实际用户ID',
    password: '实际登录密码'
  }
})

方案2：提前拦截window原生弹窗 #

如果确认是window触发的prompt类输入弹窗（alert本身不支持输入，需要输入内容的原生弹窗为prompt类型），必须在页面加载前就重写弹窗方法，等弹窗弹出后页面线程会被阻塞，后续处理代码无法执行：

cy.visit('https://your-app-target-url.com', {
  onBeforeLoad(win) {
    // 重写prompt方法，匹配弹窗提示文本返回对应输入内容
    win.prompt = (tipText) => {
      if (tipText.includes('用户ID')) return '实际用户ID'
      if (tipText.includes('密码')) return '实际登录密码'
      return null
    }
    // 冗余处理：拦截不需要操作的alert、confirm弹窗避免阻塞
    win.alert = () => true
    win.confirm = () => true
  }
})

方案3：全请求携带凭证解决白屏问题 #

如果用前两种方式访问后依然白屏，打开浏览器开发者工具检查Network面板，大概率是首屏之后的静态资源、接口请求没有携带认证信息，返回401状态码导致页面渲染失败。可以通过cy.session缓存全局登录态，配合请求拦截给所有站点请求自动加认证头：

// 在测试用例最前置逻辑中执行，缓存登录态避免每个用例重复认证
const userId = '实际用户ID'
const pwd = '实际登录密码'
cy.session([userId, pwd], () => {
  // 首次访问带认证信息留存登录态
  cy.request({
    method: 'GET',
    url: 'https://your-app-target-url.com',
    auth: { username: userId, password: pwd }
  })
})

// 全局拦截所有目标站点请求，自动补全认证头
cy.intercept('https://your-app-target-url.com/**', (req) => {
  req.auth = { username: userId, password: pwd }
})

// 再正常访问页面即可
cy.visit('https://your-app-target-url.com')

避坑说明 #

• 禁止使用手动拼接用户信息到URL的写法，现代浏览器默认拦截该类导航行为，兼容性极差
• 不要尝试定位原生弹窗的元素，原生弹窗由浏览器控制，不属于网页内容，Cypress选择器无法识别
• 所有window弹窗的拦截逻辑必须写在onBeforeLoad钩子中，页面加载完成后再注册拦截不会生效

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