Cypress如何操作嵌套两层Shadow DOM的iframe内部元素

现有代码问题 #

你写的测试代码存在4个核心问题，会直接导致交互失败：

• querySelector()未传入目标选择器，无法定位到第二层Shadow DOM的宿主节点
• 原生DOM操作没有Cypress的自动重试机制，元素/iframe未加载完成时就会抛出空引用错误
• iframe属于独立文档上下文，无法直接在父文档上下文通过find()查找iframe内部元素
• find()仅支持传入CSS选择器，直接传入文本New Organization无法匹配到对应元素

对应DOM结构参考：

前置配置 #

首先开启Cypress的Shadow DOM穿透支持，两种方式二选一即可：

1. 全局生效（推荐）：在cypress.config.js中添加配置，自动穿透所有层级的Shadow DOM，无需手动逐层调用shadow()

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    includeShadowDom: true,
    // 其他原有配置
  },
});

2. 单次生效：不修改全局配置的话，获取元素时手动调用.shadow()逐层穿透即可。

其次添加iframe内容获取的自定义命令，解决iframe上下文隔离问题，在cypress/support/commands.js中添加：

Cypress.Commands.add('getIframeBody', (iframeSelector) => {
  return cy
    .get(iframeSelector)
    .its('0.contentDocument.body')
    .should('not.be.empty') // 内置重试等待，直到iframe内容加载完成
    .then(cy.wrap)
})

正确测试代码 #

全局开启Shadow DOM穿透的写法 #

// 自动穿透两层Shadow DOM定位iframe，再操作内部元素
cy.getIframeBody('formbuilder-mainpage iframe')
  .contains('New Organization') // 用contains匹配文本元素，不要把文本传给find
  .click()

手动穿透Shadow DOM的写法（无全局配置场景） #

cy.get('formbuilder-mainpage')
  .shadow() // 进入第一层Shadow Root
  // 替换成实际第一层Shadow Root下的第二层宿主节点选择器，对照截图补全即可
  .find('second-shadow-host-selector')
  .shadow() // 进入第二层Shadow Root
  .find('iframe')
  .its('0.contentDocument.body')
  .should('not.be.empty')
  .then(cy.wrap)
  .contains('New Organization')
  .click()

注意事项 #

• 不要在.should()回调内写DOM操作、点击这类有副作用的逻辑，.should()会在断言通过前反复重试执行回调，容易触发重复点击、DOM引用失效问题
• iframe加载是异步过程，必须等待contentDocument.body非空后再操作内部元素，否则会拿到空节点报错
• 匹配带指定文本的元素请用cy.contains()，cy.find()仅支持CSS选择器语法

内容的提问来源于stack exchange，提问作者Manikumar Nune