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

问题描述

Protractor 1.7.0 引入了一个新功能:一个新的定位器by.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.

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

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

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

推荐答案

为了回答你的问题，这里有一个相关的问题:shadow dom 提供了哪些查看原始 html 所没有的信息?"

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

以下代码段创建了一个 shadom 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.

现在假设您正在构建一个酒店预订应用程序，并且您制作了一个自定义 shadow 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.

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