Cypress 12 中 iframe 交互策略：自定义工具取代插件

本文针对 cypress 12 升级后 `cypress-iframe` 插件失效的问题，提供了一套无需插件的自定义 iframe 交互解决方案。通过构建一个轻量级工具模块，利用 cypress 原生命令直接访问和操作 iframe 内部元素，确保测试流程的顺畅执行。文章详细介绍了实现方法、示例代码，并强调了跨域 iframe 的配置要点，帮助开发者高效应对 iframe 测试挑战。

Cypress 12 升级与 iframe 插件失效问题

随着 Cypress 版本迭代，某些第三方插件的兼容性可能会受到影响。例如，在 Cypress 12 版本中，一些用户反馈 cypress-iframe 插件不再正常工作，导致 cy.iframe 命令抛出 TypeError: cy.iframe is not a function 错误。这通常意味着该插件可能尚未适配最新版本的 Cypress，或者其内部实现与新版本存在冲突。面对此类问题，一种可靠且推荐的解决方案是放弃依赖第三方插件，转而利用 Cypress 原生能力构建自定义的 iframe 交互工具。

理解 Cypress 与 iframe 的交互机制

在 Cypress 中，iframe 的内容被视为一个独立的文档上下文。要访问 iframe 内部的元素，我们需要先获取到 iframe 元素本身，然后通过其 contentDocument 属性来访问 iframe 内部的 DOM。一旦获取到 contentDocument，我们就可以进一步获取其 body 元素，并将其包装成 Cypress 可操作的对象，从而链式调用 Cypress 命令。

构建自定义 iframe 交互工具模块

为了实现 iframe 内部元素的便捷操作，我们可以创建一个辅助模块，封装获取 iframe 文档和主体的方法。这将使我们的测试代码更加清晰和可维护。

1. 定义 getDocument 方法

getDocument 方法用于获取指定 iframe 的 contentDocument。它接收一个选择器作为参数，定位到 iframe 元素，然后通过 .its('0.contentDocument') 获取其内部文档对象，并使用 .should('exist') 确保文档已加载。

// cypress/support/iframe.js
const getDocument = (selector) => {
  return cy.get(selector)
           .its('0.contentDocument')
           .should('exist');
};

解释：

小艺

华为公司推出的AI智能助手

549

查看详情

• cy.get(selector)：获取 iframe 元素。
• .its('0.contentDocument')：.its() 命令用于获取其主题的属性。在这里，0 表示获取由 cy.get() 返回的 DOM 元素集合中的第一个元素（通常 iframe 只有一个），然后访问其 contentDocument 属性。
• .should('exist')：断言 contentDocument 存在，确保 iframe 内容已加载。

2. 定义 getBody 方法

getBody 方法在此基础上进一步获取 iframe 的 body 元素，并使用 cy.wrap 将其包装成 Cypress 命令链可操作的对象。

// cypress/support/iframe.js
const getBody = (selector) => {
  // 获取 iframe 的 contentDocument，然后访问其 body 属性
  // 并使用 cy.wrap 将其包装，以便可以继续链式调用 Cypress 命令
  // 参见：https://on.cypress.io/wrap
  return getDocument(selector)
           .its('body')
           .should('not.be.undefined')
           .then(cy.wrap);
};

解释：

• getDocument(selector)：调用前面定义的 getDocument 方法获取 iframe 的 contentDocument。
• .its('body')：获取 contentDocument 的 body 属性。
• .should('not.be.undefined')：断言 body 元素存在且不为 undefined。
• .then(cy.wrap)：cy.wrap 是一个非常重要的命令，它允许我们将一个非 Cypress 对象（如这里的 body DOM 元素）包装成一个 Cypress 可操作的“主题”，从而可以继续在其上链式调用 Cypress 的其他命令，如 .find()、.type() 等。

3. 整合并导出模块

将这两个方法封装在一个对象中并导出，方便在测试文件中导入和使用。

// cypress/support/iframe.js
const getDocument = (selector) => {
  return cy.get(selector)
           .its('0.contentDocument')
           .should('exist');
};

const getBody = (selector) => {
  return getDocument(selector)
           .its('body')
           .should('not.be.undefined')
           .then(cy.wrap);
};

const iframe = { getBody, getDocument };

export default iframe;

在测试文件中使用自定义 iframe 工具

创建好 cypress/support/iframe.js 模块后，你可以在任何测试文件中导入并使用它来与 iframe 内部元素进行交互。

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

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

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

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

    // 进一步验证 iframe 内部的某些结果
    iframe.getBody('iframe[id="my-iframe"]')
          .find('.success-message')
          .should('contain', '操作成功');
  });
});

跨域 iframe 的特殊处理

当 iframe 的源与主页面的源不同（即跨域）时，浏览器会实施同源策略，阻止脚本访问跨域 iframe 的 contentDocument。在这种情况下，Cypress 默认也会受到限制。为了绕过这一安全限制，你需要在 cypress.config.js 文件中设置 chromeWebSecurity: false。

重要提示：

• 设置 chromeWebSecurity: false 会禁用 Cypress 在 Chrome 浏览器中的同源策略限制，允许你访问跨域 iframe。
• 此设置仅影响 Chrome 浏览器及其衍生品（如 Electron），对其他浏览器（如 Firefox）可能无效或需要不同的配置。
• 禁用 chromeWebSecurity 可能会带来一定的安全风险，因为它允许测试脚本访问通常受限的跨域内容。因此，请仅在测试环境中且明确了解其含义的情况下使用。

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

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // 在这里实现 Node 事件监听
    },
    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
    // ... 其他配置
  },
  // 在这里设置 chromeWebSecurity
  chromeWebSecurity: false, 
});

总结

通过上述方法，即使 cypress-iframe 插件在 Cypress 12 中不再可用，我们依然能够通过构建一个轻量级的自定义工具模块来高效、稳定地与 iframe 内部元素进行交互。这种方法不仅避免了对第三方插件的依赖，增强了测试框架的稳定性，也加深了对 Cypress 原生工作原理的理解。同时，对于跨域 iframe 的场景，正确配置 chromeWebSecurity 选项是确保测试顺利进行的关键。

以上就是Cypress 12 中 iframe 交互策略：自定义工具取代插件的详细内容，更多请关注php中文网其它相关文章！