如何将axios获取的auth token传入Cypress测试的cy.visit方法中

方案1：直接在当前spec文件中实现 #

首先导入你封装的getAuthToken方法，配合cy.wrap处理异步Promise，同时增加token缓存逻辑避免重复请求：

// 顶部导入你的工具方法，替换为实际的文件路径
import { getAuthToken } from './your-auth-utils-path'

describe("My Test", () => {
  // 缓存token和过期时间，减少不必要的接口请求
  let cachedToken = null
  // 预留5分钟冗余时间，避免token刚好过期导致测试失败
  const TOKEN_VALID_DURATION = 55 * 60 * 1000
  let tokenExpireAt = 0

  beforeEach(() => {
    // 缓存token有效时直接使用
    if (cachedToken && Date.now() < tokenExpireAt) {
      cy.visit(`/?token=${cachedToken}&testing=1`)
      return
    }

    // 无有效token时重新请求
    cy.wrap(getAuthToken()).then(authToken => {
      cachedToken = authToken
      tokenExpireAt = Date.now() + TOKEN_VALID_DURATION
      cy.visit(`/?token=${authToken}&testing=1`)
    })
  })

  // 你的其余测试用例逻辑
  //...
})

说明：cy.wrap会自动等待你传入的Promise完成resolve，再执行后续的then逻辑，完全符合Cypress的命令队列执行规则，不会出现token未获取完成就提前执行cy.visit的问题。

方案2：封装为全局自定义命令（多spec复用推荐） #

如果多个测试文件都需要用到带权限的访问，可以把逻辑封装为Cypress全局命令，减少重复代码：

1. 打开cypress/support/commands.js（或commands.ts如果用TypeScript），添加以下代码：

import { getAuthToken } from '../your-auth-utils-path'

// 全局缓存token
let cachedToken = null
const TOKEN_VALID_DURATION = 55 * 60 * 1000
let tokenExpireAt = 0

Cypress.Commands.add('visitWithAuth', () => {
  if (cachedToken && Date.now() < tokenExpireAt) {
    cy.visit(`/?token=${cachedToken}&testing=1`)
    return
  }

  cy.wrap(getAuthToken()).then(authToken => {
    cachedToken = authToken
    tokenExpireAt = Date.now() + TOKEN_VALID_DURATION
    cy.visit(`/?token=${authToken}&testing=1`)
  })
})

// TypeScript用户需要额外添加类型声明，避免类型报错
declare global {
  namespace Cypress {
    interface Chainable {
      visitWithAuth(): Chainable<void>
    }
  }
}

2. 在你的spec文件中直接调用即可：

describe("My Test", () => {
  beforeEach(() => {
    cy.visitWithAuth()
  })

  // 其余测试用例
  //...
})

可选优化：替换axios为cy.request避免跨域问题 #

如果调用getAuthToken时出现跨域报错，可以直接用Cypress自带的cy.request重写token获取逻辑，无需额外配置跨域：

Cypress.Commands.add('getAuthToken', () => {
  let cachedToken = null
  const TOKEN_VALID_DURATION = 55 * 60 * 1000
  let tokenExpireAt = 0

  if (cachedToken && Date.now() < tokenExpireAt) {
    return cy.wrap(cachedToken)
  }

  const requestData = {} // 替换为你原来的请求参数
  return cy.request({
    method: 'POST',
    url: 'https://.../oauth2/v2.0/token',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    form: true, // 自动将body转为x-www-form-urlencoded格式
    body: requestData
  }).then(res => {
    cachedToken = res.body.access_token
    tokenExpireAt = Date.now() + TOKEN_VALID_DURATION
    return cachedToken
  })
})

使用方式：

beforeEach(() => {
  cy.getAuthToken().then(authToken => {
    cy.visit(`/?token=${authToken}&testing=1`)
  })
})

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