在影子DOM中查找元素 [英] Finding elements in the shadow DOM

问题描述

量角器1.7.0引入了一个新功能：新的定位器 由.deepCss ，有助于查找 shadow DOM 。

Protractor 1.7.0 has introduced a new feature: a new locator by.deepCss which helps to find elements within a shadow DOM.

它包括哪些用例？你要什么时候到达阴影DOM中的元素？

Which use cases does it cover? When would you want to reach elements in the shadow DOM?

^{我问这个问题的原因是缺少动机部分的事情 - 我认为量角器主要作为一个高级框架，有助于模仿真正的用户互动。访问阴影树听起来像一个非常深入的技术事情，你为什么要做它是困惑我。}

推荐答案

p>为了回答你的问题，这里有一个相关的问题：shadow dom提供什么信息，看看raw html不？

To answer your question, here's a related question: "what information does shadow dom provide that looking at raw html does not?"

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

The following snippet creates a shadom dom (view via chrome or firefox):

<input type="date">

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

If you click on the arrow, a pop up opens with all the dates, and you can select it.

现在想象你正在建造一个酒店预订应用程序，你做了一个自定义的阴影dom日期选择器，它将黑色（不允许用户选择）日期时房间

Now imagine you are building a hotel reservation app and you made a custom shadow dom date picker, where it would black out (and not allow user to select) dates when rooms are unavailable.

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

Looking at the raw html, you see <input type="date">, and the value/dates that a user selected. However, how would you test that the black out UI is working as intended? For that you would need to examine the shadow dom, where the pop up resides.

这篇关于在影子DOM中查找元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！