Cypress跨域重定向后无法获取新页面href的测试问题

测试场景 #

• 获取当前页面URL参数（示例：localhost:3000/?redirect_link=X）
• 点击页面内的跳过按钮
• 跳转到跨域外部页面
• 断言新页面的location等于参数中的X

问题现象 #

断言执行时机早于跳转完成，直接检查当前页面location导致不匹配；添加wait()或超时设置后，location返回null，断言依旧失败。现有代码执行顺序如下：

location
wrap redirect link
get button
click
location href
expected 'LOCALHOST' to equal PAGE X

现有测试代码 #

beforeEach(() => {
  cy.visit('/?redirect_link=X')
})

it('it skips and then redirects to another page', () => {
  cy.location().then((local) => {
    const arr = local.search.split('?')[1].split('&')
    const paramObj = {} as any
    arr.forEach((param) => {
      const [key, value] = param.split('=')
      if (key === 'redirect_link') {
        paramObj[key] = value
        cy.wrap(paramObj.redirect_link).as('redirect_link')
      }
    })
  })

  cy.get('[data-testid="button"]').click()

  cy.get('@redirect_link').then((redirect_link: string) => {
      cy.location('href').should('eq', '{PAGE X HERE}')
    })
})

已尝试的无效方法 #

• 使用cy.url()替代cy.location()，结果一致
• 监听cy.on('window:load')或cy.on('url:changed')，获取到的URL为null
• 给所有步骤添加超时、在click()后使用.then()，问题未解决
• 监听window:before:unload事件，无法获取目标跳转地址X

解决方案 #

Cypress受跨域安全限制，默认无法直接访问跨域页面的location，可通过以下两种方式解决：

方法1：拦截跳转请求（推荐） #

利用Cypress请求拦截功能，在点击按钮前监听跳转行为，直接验证目标地址是否匹配参数值：

beforeEach(() => {
  cy.visit('/?redirect_link=X')
})

it('verifies redirect target matches URL parameter', () => {
  // 简化参数提取逻辑
  cy.url().then(url => {
    const params = new URLSearchParams(new URL(url).search)
    const redirectLink = params.get('redirect_link')
    cy.wrap(redirectLink).as('redirectLink')
  })

  // 拦截所有导航类请求（适配window.location.href/表单提交等跳转方式）
  cy.intercept('*').as('redirectRequest')

  cy.get('[data-testid="button"]').click()

  // 验证拦截到的请求目标地址
  cy.get('@redirectLink').then(redirectLink => {
    cy.wait('@redirectRequest').then(interception => {
      expect(interception.request.url).to.eq(redirectLink)
    })
  })
})

方法2：修改Cypress配置允许跨域访问（仅测试环境） #

在cypress.config.js中关闭Web安全限制，配合cy.origin()处理跨域上下文：

// cypress.config.js
module.exports = {
  e2e: {
    chromeWebSecurity: false,
    // 其他配置项...
  },
}

调整测试代码，通过cy.origin()进入跨域页面上下文断言：

it('verifies redirected page location', () => {
  cy.url().then(url => {
    const params = new URLSearchParams(new URL(url).search)
    const redirectLink = params.get('redirect_link')
    
    cy.get('[data-testid="button"]').click()
    
    // 进入跨域页面上下文并断言
    cy.origin(redirectLink, { args: { redirectLink } }, ({ redirectLink }) => {
      cy.location('href').should('eq', redirectLink)
    })
  })
})

注意：关闭chromeWebSecurity存在安全风险，仅建议在测试环境使用；cy.origin()要求Cypress版本≥10。

关键说明 #

• 跨域跳转后原测试上下文失效，cy.location()/cy.url()会返回null
• 请求拦截无需修改安全配置，是验证跳转目标的更安全方式
• cy.origin()用于切换到跨域页面的测试上下文，需明确指定目标域名

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