Cypress表单提交后跳转至错误新域名无法定位目标元素问题求解

问题核心原因 #

• 测试涉及两个不同根域名的跨域跳转，Cypress默认开启同源策略限制，跳转后上下文未自动切换，无法识别新域名下的DOM元素
• 原有cy.intercept配置仅匹配当前域名下的请求，无法命中跳转后新域名的感谢页请求，等待逻辑完全失效

可行解决步骤 #

1. 处理跨域权限（二选一即可，推荐第二种方案） #

• 方案A：临时关闭同源策略校验，在cypress.config.js中新增配置：

const { defineConfig } = require('cypress')
module.exports = defineConfig({
  e2e: {
    chromeWebSecurity: false,
    // 其余原有配置保持不变
  }
})

• 方案B：使用Cypress 12+官方推荐的cy.originAPI处理跨域上下文切换，无需修改全局安全配置，适配性更强

2. 修正请求监听规则 #

调整intercept匹配逻辑，覆盖跳转后的完整域名：

// 必须放在点击提交按钮的代码之前
cy.intercept({
  method: 'GET',
  url: 'https://sts.test.co.uk/IdentityDocuments/default/Thankyou',
}).as('thankyouPageLoad')

3. 调整测试执行顺序，完整流程参考代码 #

// 先注册感谢页请求监听
cy.intercept({
  method: 'GET',
  url: 'https://sts.test.co.uk/IdentityDocuments/default/Thankyou',
}).as('thankyouPageLoad')

// 点击提交按钮
cy.get('#submitButton').click()

// 等待感谢页请求正常返回
cy.wait('@thankyouPageLoad').its('response.statusCode').should('eq', 200)

// 先校验URL跳转符合预期，再操作元素
cy.url().should('eq', 'https://sts.test.co.uk/IdentityDocuments/default/Thankyou')

// 跨域场景下用origin包裹新域名下的所有DOM操作
cy.origin('https://sts.test.co.uk', () => {
  cy.get('#thankyou-details-panel')
    .should('contain','Thank you for completing the ID verification / Right to Study form. You will be notified if there are any issues with the document(s) provided.')
})

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