求助：如何在Cypress中渲染指定页面的iFrame？

1. 解决跨域限制问题 #

主页面与目标iFrame属于不同域名，Cypress默认拦截跨域请求，需先在配置文件中开启跨域支持：
在cypress.config.js（或cypress.config.ts）中添加配置：

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    chromeWebSecurity: false, // 关闭Chrome跨域安全策略，适配旧版Cypress
    experimentalSessionAndOrigin: true, // 新版Cypress推荐的跨域处理方案
  },
});

2. 定位并访问iFrame内容 #

方法一：原生Cypress命令实现

无需额外插件，直接定位iframe并切换上下文：

// 访问主页面
cy.visit('https://testnewpage.digitaldisbursements.org/');

// 定位iframe并切换到其上下文
cy.get('iframe[title="Payment method selection section."]')
  .its('0.contentDocument.body')
  .should('not.be.empty')
  .then(cy.wrap);

// 操作iframe内元素（示例：验证指定文本存在）
cy.contains('Payment method'); // 替换为iframe内实际存在的文本

方法二：使用Cypress iframe插件（更简洁）

1. 安装插件：

npm install -D cypress-iframe

2. 在cypress/support/e2e.js中导入插件：

import 'cypress-iframe';

3. 访问并操作iframe：

cy.visit('https://testnewpage.digitaldisbursements.org/');

// 等待iframe加载完成并切换上下文
cy.frameLoaded('iframe[title="Payment method selection section."]');
cy.iframe().contains('Payment method'); // 操作iframe内元素

3. 注意事项 #

• 务必等待iframe完全加载后再执行操作，should('not.be.empty')或frameLoaded可实现自动等待
• 若iframe加载缓慢，可配合cy.wait()或依赖Cypress自动重试机制确保元素可访问
• 若遇到加载失败，检查目标iframe是否存在X-Frame-Options限制，需后端配合调整

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