如何在Cypress自动化中绕过跨域策略及解决iframe认证加载问题

嘿，针对你遇到的这两个Cypress跨域相关问题，我来分享几个实用的解决办法：

Cypress默认遵循浏览器的同源策略，但测试场景下我们可以通过两种常用方式绕过：

• 全局关闭Web安全策略
  修改项目根目录下的cypress.config.js（或.ts）文件，添加chromeWebSecurity: false配置，这会禁用同源限制、跨域iframe加载限制等，适合快速解决测试中的跨域问题：

  module.exports = defineConfig({
    e2e: {
      setupNodeEvents(on, config) {
        // 这里可以添加其他节点事件配置
      },
      chromeWebSecurity: false, // 关闭Chrome的Web安全策略
    },
  });
  

  注意：这个设置只适合测试环境，生产环境绝对不要使用。

• 使用cy.origin()命令（推荐，Cypress 12+支持）
  如果你不想全局关闭安全策略，可以用cy.origin()来包裹跨域域名下的操作，它能让Cypress在不同域名间无缝切换，同时保持浏览器安全策略：

  cy.origin('https://目标跨域域名.com', () => {
    // 在这里执行该域名下的所有操作，比如点击按钮、输入内容
    cy.get('#some-element').click();
  });
  

你访问Teams站点时遇到的iframe认证加载失败，本质也是跨域限制导致的，结合你的示例代码，给你两个可行方案：

方案1：关闭Web安全策略+处理iframe #

1. 先按上面的方法修改cypress.config.js，开启chromeWebSecurity: false；
2. 安装cypress-iframe插件来处理iframe操作（先执行npm install cypress-iframe --save-dev，然后在cypress/support/e2e.js里导入import 'cypress-iframe';）；
3. 修改测试代码，处理认证iframe：

   describe('Initial Cypress Tests', () => {
     it('navigate to MSteams site and handle auth iframe', () => {
       cy.visit('https://teams.microsoft.com/_#/');
       
       // 等待认证iframe加载完成（根据实际iframe的src调整选择器）
       cy.frameLoaded('iframe[src*="login.microsoftonline.com"]');
       // 切换到iframe并执行认证操作
       cy.iframe('iframe[src*="login.microsoftonline.com"]').then(($iframe) => {
         const $body = $iframe.contents().find('body');
         cy.wrap($body).find('#i0116').type('你的用户名');
         cy.wrap($body).find('#i0118').type('你的密码');
         cy.wrap($body).find('#idSIButton9').click();
       });
       
       // 认证完成后回到Teams站点，验证跳转成功
       cy.url().should('include', 'teams.microsoft.com');
     });
   });
   

方案2：使用cy.origin()处理跨域认证（无需关闭安全策略） #

如果你的Cypress版本是12及以上，更推荐这个方法，无需全局关闭安全策略：

describe('Initial Cypress Tests', () => {
  it('navigate to MSteams site with cross-domain auth', () => {
    cy.visit('https://teams.microsoft.com/_#/');
    
    // 当页面跳转到微软认证域名时，用cy.origin包裹认证操作
    cy.origin('https://login.microsoftonline.com', () => {
      cy.get('#i0116').type('你的用户名');
      cy.get('#i0118').type('你的密码');
      cy.get('#idSIButton9').click();
    });
    
    // 认证完成后验证是否回到Teams站点
    cy.url().should('contain', 'teams.microsoft.com');
  });
});

这个方法更安全，因为它只在特定跨域域名下执行操作，不会全局禁用安全策略。

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