在 shadow DOM 中查找元素答案

【问题标题】：Finding elements in the shadow DOM在 shadow DOM 中查找元素
【发布时间】：2015-04-25 07:25:59
【问题描述】：

Protractor 1.7.0 引入了一项新功能：一个新的定位器by.deepCss，它有助于在shadow DOM 中查找元素。

它涵盖了哪些用例？您希望何时访问 shadow DOM 中的元素？

^{我问这个问题的原因是我错过了这个问题的动机部分——我认为量角器主要是一个有助于模仿真实用户交互的高级框架。访问阴影树听起来像是一个非常深入的技术问题，你为什么要这样做让我感到困惑。}

【问题讨论】：

我会编辑标题以匹配问题的上下文，但我不确定 Protractor/WebDriver 和一般用途之间的用例是否会有所不同。
@BoltClock 是的，我同意，好点。如果你有更好的标题，请编辑。此外，可能用selenium 标记是有道理的..
我不打算添加这个作为答案，因为有人可能有更好的说法，但问题与为什么量角器有这么多定位器策略相同。本质上，开发人员可能希望验证 shadowdom 中的元素，因为它是 UI 显示的一部分。
@hankduan 你是对的，它可能过于宽泛而无法回答。我想最重要的是我只是在现实世界的场景中错过了用例。谢谢。

【解决方案1】：

为了回答您的问题，这里有一个相关的问题：“shadow dom 提供哪些信息，而查看原始 html 却没有？”

以下 sn-p 创建一个 shadom dom（通过 chrome 或 firefox 查看）：

&lt;input type="date"&gt;

如果您单击箭头，则会打开一个包含所有日期的弹出窗口，您可以选择它。

现在假设您正在构建一个酒店预订应用程序，并且您制作了一个自定义 shadow dom 日期选择器，当房间不可用时，它会在其中涂黑（并且不允许用户选择）日期。

查看原始 html，您会看到 <input type="date">，以及用户选择的值/日期。但是，您将如何测试黑屏 UI 是否按预期工作？为此，您需要检查弹出窗口所在的影子 dom。

【讨论】：

很好的例子，现在我发现它对我来说更有意义并且具有实用价值。谢谢！
你能不能也看看这个帖子：Accessing elements in the shadow DOM？看来我们无法访问原生 HTML5 元素的影子 DOM。这是真的吗？谢谢。
我没有尝试过，但如果隐藏了 html5 原生 shadow dom，我不会感到惊讶。这个选择器的目的一直是测试自定义创建的 shadow dom。

【解决方案2】：

我问这个问题的原因是我在这件事的动机部分上遗漏了 - 我认为量角器主要是一个有助于模仿真实用户交互的高级框架。访问影子树听起来像是一个非常深入的技术问题，你为什么要这样做让我感到困惑。

在这个介绍影子 DOM 的 website 中似乎并非如此。它说：

Shadow DOM 将内容与表示分离，从而消除命名冲突并改善代码表达。

Shadow DOM 主要有助于分离内容以避免命名冲突并改进代码表达，使其更整洁更好（我假设）。很抱歉，我实际上并没有使用 Selenium，所以这里有一个提供更多信息的网站：http://webcomponents.org/polyfills/shadow-dom/

希望对您有所帮助！

【讨论】：

感谢您的链接。我想我越来越接近于理解 shadow dom 的用途，但问题仍然存在：如果有人在 shadow DOM 中隐藏了实现细节，我们为什么要在浏览器测试的端到端期间访问它？..这是关于它背后的动机和一个现实世界的例子..