Cypress应用

shadow

遍历进入元素的 shadow DOM。

语法

.shadow()
.shadow(options)

用法

正确用法

cy.get('.shadow-host').shadow()

错误用法

cy.shadow() // 错误，不能直接链式调用 'cy'
cy.exec('npm start').shadow() // 错误，'exec' 不返回 DOM 元素
cy.get('.not-a-shadow-host').shadow() // 错误，目标元素必须包含 shadow root

参数

options (Object)

传入一个选项对象来改变 .shadow() 的默认行为。

选项	默认值	描述
log	true	在 命令日志 中显示该命令
timeout	defaultCommandTimeout	在 超时 前等待 cy.get() 解析的时间

生成结果

• .shadow() 返回它找到的新 DOM 元素。
• .shadow() 是一个查询命令，可以安全地链式调用其他命令。

示例

查找并点击 shadow DOM 中的按钮

<div class="shadow-host">
  #shadow-root
  <button class="my-button">点击我</button>
</div>

// 返回 [#shadow-root (open)]
cy.get('.shadow-host').shadow().find('.my-button').click()

规则

要求

• .shadow() 必须链式调用在返回 DOM 元素的命令之后，且该 DOM 元素必须是一个 shadow host（即直接附加了 shadow root）。

断言

• .shadow() 会自动 重试 直到元素 存在于 DOM 中。
• .shadow() 会自动 重试 直到元素包含 shadow root。
• .shadow() 会自动 重试 直到所有链式断言通过。

超时设置

• .shadow() 可能会因等待元素 存在于 DOM 中 而超时。
• .shadow() 可能会因等待元素包含 shadow root 而超时。
• .shadow() 可能会因等待添加的断言通过而超时。

已知问题

在使用 cy.click() 时，有时在 Chrome 中无法正确点击元素。这是由于 规范中的歧义 导致的。

在这种情况下，可以像下面这样将 'top' 传递给 cy.click()：

cy.get('#element').shadow().find('[data-test-id="my-button"]').click('top')

命令日志

遍历进入元素的 shadow DOM

cy.get('.shadow-host').shadow()

上述命令会在命令日志中显示为：

当点击命令日志中的 shadow 命令时，控制台会输出以下内容：

另请参阅

• cy.get() 的 includeShadowDom 选项
• cy.find() 的 includeShadowDom 选项
• cy.contains() 的 includeShadowDom 选项
• includeShadowDom 配置选项