Cypress 12 iframe交互新范式：自定义命令与跨域配置详解

// cypress/support/iframe.js 或 cypress/support/commands.js
/**
 * 获取指定iframe的contentDocument
 * @param {string} selector - iframe的选择器
 * @returns {Cypress.Chainable<Document>} iframe的contentDocument
 */
const getDocument = (selector) => {
  // 1. 使用cy.get()获取iframe元素
  // 2. 使用.its('0.contentDocument')获取DOM元素的contentDocument属性
  //    注意：cy.get()返回的是一个jQuery对象，需要通过索引0访问原生DOM元素
  // 3. 使用.should('exist')确保contentDocument存在
  return cy.get(selector).its('0.contentDocument').should('exist');
};

/**
 * 获取指定iframe的body元素，并将其包装成Cypress可链式调用的对象
 * @param {string} selector - iframe的选择器
 * @returns {Cypress.Chainable<JQuery<HTMLElement>>} iframe的body元素
 */
const getBody = (selector) => {
  // 1. 调用getDocument获取iframe的contentDocument
  // 2. 使用.its('body')获取contentDocument的body属性
  // 3. 使用.should('not.be.undefined')确保body元素存在
  // 4. 使用.then(cy.wrap)将原生body元素包装成Cypress可操作的对象，
  //    这样后续才能在其上链式调用Cypress命令。
  return getDocument(selector).its('body').should('not.be.undefined').then(cy.wrap);
};

// 将函数导出，以便在测试文件中导入使用
const iframe = { getBody, getDocument };
export default iframe;

// 如果希望将其作为全局Cypress命令，可以这样定义：
// Cypress.Commands.add('iframeGetBody', getBody);
// Cypress.Commands.add('iframeGetDocument', getDocument);

// cypress/e2e/my-iframe-test.cy.js
import iframe from '../support/iframe'; // 根据实际路径调整

describe('测试iframe交互', () => {
  beforeEach(() => {
    // 假设你的应用在访问某个URL后会加载一个iframe
    cy.visit('/your-page-with-iframe');
  });

  it('能够与iframe内部元素进行交互', () => {
    // 假设iframe的id是 'my-iframe'
    // 首先获取iframe的body，然后在其内部查找元素
    iframe.getBody('iframe[id="my-iframe"]')
      .find('input[name="username"]') // 在iframe的body中查找用户名输入框
      .type('testuser') // 输入文本
      .should('have.value', 'testuser');

    iframe.getBody('iframe[id="my-iframe"]')
      .find('button.submit-button') // 在iframe的body中查找提交按钮
      .click(); // 点击按钮

    // 可以在这里添加更多断言，验证iframe内部操作后的结果
    // 例如，检查iframe内部是否有成功消息
    iframe.getBody('iframe[id="my-iframe"]')
      .find('.success-message')
      .should('be.visible')
      .and('contain', '操作成功');
  });
});

// cypress.config.js
const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    baseUrl: 'http://localhost:3000', // 你的应用基础URL
    chromeWebSecurity: false, // 禁用Chrome的Web安全策略，允许跨域iframe访问
  },
  // component: {
  //   devServer: {
  //     framework: 'react',
  //     bundler: 'webpack',
  //   },
  //   chromeWebSecurity: false, // 如果是组件测试也需要，则在此处配置
  // },
});