如何为cy.origin添加Basic Authentication？切换baseUrl时如何保留该认证？

方法1：URL中嵌入认证信息 #

这是最可靠的实现方式，直接将用户名和密码嵌入到cy.origin的目标URL中，浏览器会自动完成Basic Auth验证：

cy.origin('https://your-username:your-password@auth-protected-site.com', () => {
  cy.visit('/') // 直接访问受保护页面，无需额外处理
})

注意：如果凭证包含特殊字符（如@、&），需要先做URL编码。

方法2：通过请求头传递认证信息 #

若不想在URL中暴露凭证，可以在cy.origin内部的cy.visit请求中添加Authorization头：

cy.origin('https://auth-protected-site.com', () => {
  const encodedCreds = btoa('your-username:your-password') // Base64编码用户名密码
  cy.visit('/', {
    headers: {
      'Authorization': `Basic ${encodedCreds}`
    }
  })
})

⚠️ 部分浏览器可能会拦截这种方式的Basic Auth，优先推荐URL嵌入法。

Basic Auth是基于域名生效的，不同域名需单独处理；同主域名下的子域名会自动共享认证状态，以下是通用解决方案：

1. 同主域名场景 #

如果切换的baseUrl属于同一个主域名（比如https://app1.example.com和https://app2.example.com），只需在第一个域名完成认证后，浏览器会自动在同主域名下发送认证信息，直接切换baseUrl访问即可：

// 先在第一个域名完成认证
cy.origin('https://your-username:your-password@app1.example.com', () => {
  cy.visit('/')
})

// 切换baseUrl后直接访问
Cypress.config('baseUrl', 'https://app2.example.com')
cy.visit('/') // 自动带上Basic Auth凭证

2. 不同域名场景：用Cypress Session复用认证状态 #

用Cypress的cy.session封装认证逻辑，切换baseUrl时调用该命令快速恢复认证状态，避免重复输入凭证：

// 封装自定义命令
Cypress.Commands.add('setupBasicAuth', (credentials, domain) => {
  cy.session([credentials, domain], () => {
    cy.origin(domain, { args: credentials }, ({ username, password }) => {
      const authHeader = `Basic ${btoa(`${username}:${password}`)}`
      cy.visit('/', { headers: { 'Authorization': authHeader } })
      // 验证认证成功（比如检查是否返回401）
      cy.get('body').should('not.contain', '401 Unauthorized')
    })
  })
})

// 使用示例
const authCreds = { username: 'user', password: 'pass' }

// 第一个baseUrl
Cypress.config('baseUrl', 'https://site-a.com')
cy.setupBasicAuth(authCreds, 'https://site-a.com')
cy.visit('/dashboard')

// 切换到第二个baseUrl
Cypress.config('baseUrl', 'https://site-b.com')
cy.setupBasicAuth(authCreds, 'https://site-b.com')
cy.visit('/profile')

该方式会缓存认证后的会话状态，重复调用时直接复用，提升测试效率。

内容的提问来源于stack exchange，提问作者Michael S.