Cypress无法访问modal-dialogue弹窗，出现跨域错误如何解决？

你遇到的报错本质是：页面弹出的登录模态框内部是嵌入了第三方身份认证服务的跨源iframe，和你访问的https://app.staging.showcare.io不属于同一个源，浏览器默认的同源策略禁止当前站点的JS访问跨源iframe的DOM元素，Cypress默认遵循该安全限制，因此触发报错。

方案1：临时关闭Chrome安全策略（仅本地测试适用） #

如果你仅在本地用Chromium内核浏览器（Chrome、Edge）跑测试，可以通过修改Cypress配置快速规避限制：

• 旧版本Cypress（<10）：在cypress.json中添加配置

{
  "chromeWebSecurity": false
}

• 新版本Cypress（≥10）：在cypress.config.js/ts中添加配置

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    chromeWebSecurity: false,
    // 其他原有配置
  }
})

注意：该方案修改了浏览器默认安全规则，不建议在CI/CD生产测试流水线中使用

方案2：使用cy.origin()处理跨源交互（推荐兼容所有场景） #

Cypress 9.6及以上版本提供了官方的跨源操作API cy.origin()，可以直接处理跨域页面的交互，无需修改安全配置。你只需要先通过浏览器开发者工具查看登录模态框iframe的src地址，确认对应的第三方登录域名（示例假设为https://auth.showcare.io），修改代码如下：

describe('Login', function(){
  it('Login Successfully', function(){
    cy.visit('https://app.staging.showcare.io/product-showcase')
    // 等待登录模态框的iframe加载完成
    cy.get('.modal-dialog iframe').should('be.visible')
    // 替换为你实际的登录页域名
    cy.origin('https://auth.showcare.io', () => {
      // 该作用域内的所有操作都运行在登录域名的上下文下
      cy.get('#signInFormUsername').click().type('test@example.com')
      // 后续密码输入、点击登录等操作都写在这里
    })
  })
})

方案3：API登录绕过UI交互（自动化测试最佳实践） #

UI登录操作执行效率低且容易受页面变动影响，更推荐直接调用登录接口获取鉴权凭证，提前注入到浏览器中跳过登录步骤：

1. 调用身份认证服务的登录接口，获取access_token、id_token等鉴权凭证
2. 通过cy.setCookie()或者cy.window().then(win => win.localStorage.setItem('token', xxx))把凭证存入浏览器
3. 再次访问目标页面，无需操作登录弹窗就已经是登录状态

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