Cypress升级后点击支付按钮出现Basic Auth弹窗如何处理？

正在进行足球比赛售票页面的自动化测试，目标网站处于预生产环境，访问主站需Basic Auth认证，因此使用命令：

cy.visit('https://user:pass@tickets.demo.com/')

正常访问主站无问题。但客户近期为支付网关新增了Basic Auth认证，点击支付按钮后会弹出认证窗口。此前使用Cypress 9.5.1版本时可自动忽略该弹窗，升级至Cypress 10.8.0版本后，执行到支付步骤时出现认证错误导致测试崩溃。已知cy.visit的auth配置仅适用于页面访问场景，需要处理点击操作后触发的支付网关认证。当前环境Node版本为8.13.2。

解决方案 #

1. 拦截支付网关请求，注入Authorization头 #

通过cy.intercept拦截所有支付网关相关请求，在请求头中直接添加Basic Auth凭证，从根源避免弹出认证窗口。

• 先通过btoa生成Base64编码的认证字符串（Node 8.13.2原生支持该方法）
• 拦截请求并注入请求头

示例代码：

// 预生成支付网关的Basic Auth凭证（替换为实际用户名和密码）
const paymentAuthToken = btoa('payment-user:payment-pass');

// 拦截支付网关的所有请求，添加Authorization头
cy.intercept('https://payment-gateway.demo.com/**', (req) => {
  req.headers['Authorization'] = `Basic ${paymentAuthToken}`;
}).as('paymentRequests');

// 执行支付按钮点击操作
cy.get('#pay-button').click();

// 可选：等待支付请求完成，确保认证生效
cy.wait('@paymentRequests');

2. 配置Cypress允许跨域并结合全局拦截 #

若支付网关与主站为跨域域名，需先在Cypress配置中关闭跨域安全限制，再进行请求拦截：

1. 修改cypress.config.js（Cypress 10+使用该配置文件）：

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    chromeWebSecurity: false, // 允许跨域请求
    setupNodeEvents(on, config) {
      // 可添加其他节点事件配置
    },
  },
});

2. 再按照方案1的拦截代码处理支付请求即可。

3. 替换支付跳转URL为带凭证的地址 #

若点击支付按钮后会直接跳转到支付网关页面，可拦截跳转请求，将URL替换为嵌入Basic Auth凭证的格式：

// 拦截支付跳转请求，替换为带认证的URL
cy.intercept('GET', 'https://payment-gateway.demo.com/checkout', (req) => {
  req.url = 'https://payment-user:payment-pass@payment-gateway.demo.com/checkout';
});

// 点击支付按钮
cy.get('#pay-button').click();

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