How to check nested shadow elements using cypress. Io

在使用 Cypress 进行自动化测试时，处理 Web Components 的阴影 DOM (Shadow DOM) 可能会是一个挑战。因为阴影 DOM 允许 Web 开发者将标记封装和样式隐藏起来，这意味着它不在主文档 DOM 中可见。不过，从 Cypress 4.5.0 开始，Cypress 支持了对阴影 DOM 的直接查询。

步骤一：启用阴影 DOM 支持

首先，确保在 Cypress 配置中启用了对阴影 DOM 的支持。可以在 cypress.json 配置文件中添加如下设置：

json
{
  "includeShadowDom": true
}

这个配置项使 Cypress 在执行 DOM 查询时会自动穿透阴影根，这意味着你可以像查询常规 DOM 一样查询阴影 DOM。

步骤二：使用标准的查询命令

配置启用后，你可以使用 Cypress 的标准查询命令如 cy.get() 来选择阴影 DOM 中的元素。例如，如果你的阴影 DOM 结构如下：

html
<custom-element>
  #shadow-root
    <div class="inside-shadow">Content inside shadow DOM</div>
</custom-element>

你可以这样查询阴影内的元素：

javascript
cy.get('custom-element').find('.inside-shadow').should('contain', 'Content inside shadow DOM');

示例：测试一个嵌套在多层阴影 DOM 中的元素

如果有多层嵌套的阴影 DOM，Cypress 的查询也会穿透这些层。假设结构如下：

html
<custom-element>
  #shadow-root
    <nested-element>
      #shadow-root
        <div class="deep-inside-shadow">Deep content</div>
    </nested-element>
</custom-element>

你可以使用下面的 Cypress 命令来检查这个深层嵌套的内容：

javascript
cy.get('custom-element')
  .find('nested-element')
  .find('.deep-inside-shadow')
  .should('contain', 'Deep content');

结论

通过允许 includeShadowDom 配置和使用标准的 DOM 查询方法，Cypress 提供了一种强大且简单的方式来测试包括嵌套阴影 DOM 在内的现代 Web 应用。这种方法不仅减少了测试代码的复杂性，而且提高了测试的可维护性和可靠性。