Cypress 12+ 版本中处理 iframe：构建自定义命令的实用指南

// cypress/support/iframe.js (建议放置在support目录下)

/**
 * 获取指定 iframe 的 contentDocument。
 * @param {string} selector - 用于定位 iframe 的 CSS 选择器。
 * @returns {Cypress.Chainable<Document>} iframe 的 contentDocument。
 */
const getDocument = (selector) => {
  return cy.get(selector)
           .its('0.contentDocument') // 获取 iframe 元素的 contentDocument 属性
           .should('exist'); // 确保 contentDocument 存在
};

/**
 * 获取指定 iframe 的 body 元素，并使用 cy.wrap 包装，以便后续链式调用 Cypress 命令。
 * @param {string} selector - 用于定位 iframe 的 CSS 选择器。
 * @returns {Cypress.Chainable<JQuery<HTMLBodyElement>>} iframe 的 body 元素。
 */
const getBody = (selector) => {
  // 查找 iframe 的 body 并包装它，以便可以对其进行更多命令的链式调用
  // 参见：https://on.cypress.io/wrap
  return getDocument(selector)
           .its('body') // 获取 contentDocument 的 body 属性
           .should('not.be.undefined') // 确保 body 存在
           .then(cy.wrap); // 使用 cy.wrap 包装 body 元素，使其可链式调用 Cypress 命令
};

// 将这些函数封装成一个对象并导出
const iframe = { getBody, getDocument };

export default iframe;

// cypress/e2e/my-iframe-test.cy.js (您的测试文件)

import iframe from '../support/iframe'; // 导入自定义 iframe 模块

describe('测试 iframe 交互', () => {
  beforeEach(() => {
    // 假设您的测试页面包含一个 id 为 'my-iframe' 的 iframe
    cy.visit('/your-page-with-iframe.html'); 
  });

  it('能够与 iframe 内部元素进行交互', () => {
    // 使用自定义的 iframe.getBody 方法获取 iframe 的 body，然后在其上链式调用 Cypress 命令
    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 内部的提交按钮
          .click(); // 点击按钮

    // 可以在 iframe 内部进行进一步的断言
    iframe.getBody('iframe[id=my-iframe]')
          .contains('提交成功')
          .should('be.visible');
  });

  it('能够获取 iframe 的文档对象', () => {
    iframe.getDocument('iframe[id=my-iframe]')
          .should('have.property', 'title', 'Iframe Title'); // 检查 iframe 文档的标题
  });
});

// cypress.config.js

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

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // 在这里实现 Node 事件监听器
    },
    baseUrl: 'http://localhost:8080', // 您的应用基础URL
    chromeWebSecurity: false, // 禁用 Chrome 浏览器的 Web 安全策略
  },
});