Cypress如何处理点击子域名链接时的窗口弹出认证？

针对从uk.myapp.com点击跳转至us.myapp.com时再次弹出认证窗口的问题，提供以下几种可行方案：

方案1：拦截跳转请求，手动添加认证头 #

利用cy.intercept拦截所有发往目标子域名的请求，主动注入HTTP基本认证的请求头，避免服务器返回401触发认证弹窗。

实现步骤： #

1. 编写生成认证头的工具函数

// 生成Base64编码的HTTP基本认证头
const getAuthHeader = (username, password) => {
  const encodedCredentials = btoa(`${username}:${password}`);
  return `Basic ${encodedCredentials}`;
};

2. 在测试中拦截请求并添加认证头

// 先访问已带认证的uk子域名
cy.visit('https://username:password@uk.myapp.com');

// 拦截所有us.myapp.com的请求，注入认证头
cy.intercept('https://us.myapp.com/**', (req) => {
  req.headers['Authorization'] = getAuthHeader('username', 'password');
}).as('usDomainRequest');

// 点击触发跳转的元素
cy.get('[data-testid="jump-button"]').click();

// 验证跳转成功
cy.wait('@usDomainRequest');
cy.url().should('include', 'us.myapp.com');

方案2：预先通过Session完成目标子域名认证 #

关闭Cypress的跨域安全限制，利用cy.session提前访问目标子域名完成认证，让浏览器保存认证会话，后续跳转时自动携带认证信息。

实现步骤： #

1. 修改Cypress配置文件（cypress.config.js）

module.exports = {
  e2e: {
    chromeWebSecurity: false, // 关闭跨域安全限制，允许跨子域名会话共享
  },
};

2. 在测试中预先认证目标子域名

// 创建跨子域名认证会话
cy.session('cross-subdomain-auth', () => {
  // 预先访问us子域名完成认证
  cy.visit('https://username:password@us.myapp.com');
  // 验证认证成功（根据实际页面元素调整）
  cy.get('.us-domain-header').should('be.visible');
});

// 访问初始uk子域名
cy.visit('https://username:password@uk.myapp.com');

// 点击跳转，此时浏览器已有us子域名的认证凭证，不会弹窗
cy.get('[data-testid="jump-button"]').click();
cy.url().should('include', 'us.myapp.com');

方案3：配置浏览器启动参数，全局自动认证 #

针对Chromium系浏览器（Chrome、Edge等），通过启动参数指定全局基本认证信息，所有该域名下的请求都会自动携带认证。

实现步骤： #

修改Cypress配置文件（cypress.config.js）：

module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      on('before:browser:launch', (browser, launchOptions) => {
        if (browser.family === 'chromium' && browser.name !== 'electron') {
          // 指定需要自动认证的域名白名单
          launchOptions.args.push('--auth-server-whitelist=*.myapp.com');
          // 设置全局基本认证账号密码
          launchOptions.args.push('--basic-auth=username:password');
          return launchOptions;
        }
        return launchOptions;
      });
    },
  },
};

配置完成后，测试中直接访问初始域名即可，跳转至子域名时浏览器会自动完成认证，不会弹出窗口。

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