如何为Cypress所有cy.visit请求统一配置基础身份验证

方案1：封装带默认auth的自定义visit命令 #

操作步骤如下：

• 首先将身份凭据存入Cypress环境变量，避免硬编码，可选择以下任意一种存储方式：
  • 直接写入cypress.config.js的env配置项
  • 存入项目根目录的.env文件，配合cypress-dotenv插件读取
• 在cypress/support/commands.js中定义自定义命令：

Cypress.Commands.add('visitWithAuth', (url, options = {}) => {
  // 从环境变量读取凭据
  const auth = {
    username: Cypress.env('BASIC_AUTH_USER'),
    password: Cypress.env('BASIC_AUTH_PWD')
  }
  // 合并传入的options，支持单条用例临时覆盖auth配置
  return cy.visit(url, {
    auth,
    ...options
  })
})

测试用例中直接调用cy.visitWithAuth('目标页面url')即可自动携带身份验证信息。

方案2：全局重写visit命令自动注入auth #

如果所有测试用例访问站点都需要基础认证，可以直接重写原生cy.visit命令，不需要修改原有测试代码的调用逻辑：

// 写入cypress/support/e2e.js（Cypress 10+版本，旧版本对应support/index.js）
Cypress.Commands.overwrite('visit', (originalFn, url, options = {}) => {
  const defaultAuth = {
    username: Cypress.env('BASIC_AUTH_USER'),
    password: Cypress.env('BASIC_AUTH_PWD')
  }
  return originalFn(url, {
    auth: defaultAuth,
    ...options
  })
})

配置完成后原有测试代码中的cy.visit('url')不需要做任何修改，自动携带认证信息。

方案3：全局请求拦截统一添加Authorization头 #

如果除了页面访问之外，站点的接口请求也需要携带基础认证，可以通过拦截规则给所有匹配的请求统一加认证头：

// 写入cypress/support/e2e.js
beforeEach(() => {
  // 匹配所有目标域名的请求，可自行修改匹配规则
  cy.intercept('https://你的目标站点域名/**', (req) => {
    // 生成base64编码的认证信息
    const auth = Buffer.from(`${Cypress.env('BASIC_AUTH_USER')}:${Cypress.env('BASIC_AUTH_PWD')}`).toString('base64')
    req.headers['Authorization'] = `Basic ${auth}`
  })
})

常见问题排查 #

如果配置后不生效，可优先排查两个问题：

• 环境变量读取失败：可以在命令文件中添加cy.log(Cypress.env('BASIC_AUTH_USER'))打印确认凭据是否正常读取
• 命令文件未被正确导入：确认cypress.config.js中supportFile配置指向了命令所在的文件，Cypress 10+默认是cypress/support/e2e.js，需要在这个文件中导入./commands

内容的提问来源于stack exchange，提问作者Šahen Bdojan