如何在封闭的 shadowDOM 下自动化网页答案

【问题标题】：How to automate webpage under a closed shadowDOM如何在封闭的 shadowDOM 下自动化网页
【发布时间】：2019-06-19 07:15:28
【问题描述】：

网页的一部分处于封闭的影子根模式下。我们如何通过 selenium 或 javascript 实现自动化？

编辑： 我们可以在 chrome://inspect/#apps 中看到阴影下的 DOM。这似乎是子 DOM。当我们的 ShadowRoot DOM 阻碍我们自动化时，是否可以在父 DOM 和上述子 DOM 之间进行通信以对子 DOM 执行操作？

【问题讨论】：

【解决方案1】：

简单的回答：你不能。

更复杂的答案：

覆盖Element.prototype.attachShadow 函数以覆盖closed 设置并将其强制为open。

或者重写你的组件以不使用closed。这可以通过组件检查查询参数并在大部分时间使用关闭并在测试模式下打开。

更新

封闭组件是一种尝试，允许组件创建者某种程度的安全性，其他任何人都无法破坏他们的组件。虽然开发人员工具仍然可以看到内部，但外部代码却不能，除非组件以某种方式暴露了 shadowRoot。

一个封闭的组件应该做的，而不是暴露他们的shadowRoot，而是提供足够的属性和函数来允许组件的用户做他们需要的一切。

想想<video> element。它们在它和它的父元素HTMLMediaElement 之间有几十个属性以及几十个函数和事件。该组件拥有<video> 的用户几乎可以做任何事情所需的一切。

如果我们以这种方式编写组件，那么关闭应该不是问题。

有时人们想测试 Web 组件的各个方面，但他们实际上应该只关注公共接口，而不必担心内部 DOM。

如何测试<input> 元素。大多数情况下，您设置.value = "some value"; 或在change 或input 上添加事件侦听器。

只要您的组件正确地公开测试它们所需的一切，那么关闭就不再是问题。

【讨论】：

我们可以在 chrome://inspect/#apps 中看到阴影下的 DOM。是否可以在父 DOM 和上述子 DOM 之间进行通信以对子 DOM 执行操作？
这通常通过让父代码调用函数或在组件上设置属性和属性来完成。然后组件的工作就是调整其内部 DOM。这允许分离关注点并保持组件可重用。 (en.wikipedia.org/wiki/Separation_of_concerns)
好的！这是一个非常有趣的事实。但是我们如何模拟父子组件之间的通信呢？
这个想法是有一些测试页面，允许你的全局 JS 代码与每个组件进行交互。然后，您可以通过公共接口（属性、属性和函数）验证所有内容。如果您有一个带有子 WC 的 WC，并且它们位于封闭的 DOM 中，那么您将无法测试内部 DOM 元素，除非您提供一种获取它们的方法'open'。如果它们未打开，则将它们视为黑匣子，仅测试公共接口。这与测试 3rd 方库没有什么不同。但是，如果您确实需要测试整个页面上的所有交互，那么您必须将其打开。