在影子DOM中查找元素

Question

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

它涵盖了哪些用例？你想什么时候到达影子DOM中的元素？

---

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

Answer 1

要回答你的问题，这是一个相关的问题：“影子dom提供哪些信息，查看原始HTML不是？”

以下代码段创建了一个shadom dom（通过chrome或firefox查看）：

<input type="date">

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

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

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

Answer 2

  

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

在此website中似乎没有显示阴影DOM的介绍。它说：

  

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

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

我希望这会对你有所帮助！