通过Chrome开发者工具控制台将点击发送到“生成的源代码/计算的html”按钮

Question

我必须在一个网页上查看大量视频（下面的截图）。视频被部分隐藏。要观看每个视频，我必须一个一个地单击more按钮（如下图所示）。

每页通常有40个视频。不断反复滚动并单击more按钮很乏味，而且如果我继续这样做，我会遭受重复性的压力伤害。

因此，我想我应该使用Chrome开发工具的console来识别按钮，并在一次批处理中将所有点击发送给他们。

我可以使用Chrome开发工具中的more工具找到inspect按钮，如下所示：

通过more，inspect按钮的DOM树面包屑（请单击以放大，下面有两个图像部分）：

more按钮标记代码如下：

<button class="d2l-label-text" type="button">
    <d2l-icon class="d2l-button-subtle-icon" icon="d2l-tier1:chevron-down" dir="ltr"></d2l-icon>
    <span class="d2l-button-subtle-content"><!---->more<!----></span>
    <slot></slot>
</button>

，并且more按钮的class是d2l-label-text

我认为我会在console中做类似的事情：

> let allbuttonsArray = document.getElementsByClassName("d2l-label-text");

  for (let eachbutton of allbuttonsArray) {
    eachbutton.click();
  }

但是，事实证明document.getElementsByClassName("d2l-label-text")并没有抓住任何东西。结果数组的长度为0。

我尝试与其他选择器一起玩耍，发现console不是从generated source/computed html抓取的，它只是抓取source中的标签/元素（可以通过right-click, view source获得原始资源。

我的问题：我在做什么错？如何获得console来抓住generated source/computed html more按钮？

Answer 1

如屏幕截图所示，该元素位于ShadowRoot内部，这意味着不能直接从主<init-param>对其进行访问。

要找到这样的元素，您必须递归访问ShadowRoot链。
就您而言，此链中有两个元素。

<context-param>

如果ShadowRoot是由页面以with open('encdb.csv') as MC, open('encgadb.csv') as S: for x, y in zip(MC, S): print(type(x)) res = json.loads(x) print(type(res)) 模式创建的，则可能必须将document钩入page context script。

Answer 2

您知道您要获取的内容是否在页面内的iframe中吗？

如果是这样，我认为您需要先获取iframe，然后使用

theiframe.getElementsByClassName()