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

Posted 2023-03-07

【中文标题】通过 Chrome 开发工具控制台将点击发送到“生成的源/计算的 html”按钮

【英文标题】：send clicks to "generated source/computed html" buttons via Chrome Dev Tools console

【发布时间】：2019-10-05 19:09:37

【问题描述】：

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

每页通常有 40 个视频。不断滚动并一遍又一遍地点击more 按钮很乏味，如果我继续这样做，我想我会受到重复性压力伤害。

所以，我想我会使用 Chrome 开发工具的console 来识别按钮并在一个批处理过程中向它们发送全部点击。

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

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

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 按钮？

【问题讨论】：

您是否有指向相关页面的链接，或者您能否建立一个沙盒来复制该问题？

【参考方案1】：

从屏幕截图中可以看出，该元素位于 ShadowRoot 内，这意味着无法直接从主 document 访问它。

要找到这样的元素，您必须递归访问 ShadowRoot 链。 在您的情况下，此链中有两个元素。

for (const more of document.querySelectorAll('d2l-more-less')) 
  for (const buttonSubtle of more.shadowRoot.querySelectorAll('d2l-button-subtle')) 
    const btn = buttonSubtle.shadowRoot.querySelector('button');
    if (btn) btn.dispatchEvent(new MouseEvent('click', bubbles: true));
  

如果 shadowRoot 是由页面在 'closed' 模式下创建的，您可能必须在 page context script 中挂钩 Element.prototype.attachShadow。

【讨论】：

感谢您的建议。我直接在控制台中尝试了您的代码，但没有成功。所以我稍后会尝试Element.prototype.attachShadow 的建议。特别感谢您如此精美地记录了您的回复（带有链接）。我已为您投票，如果 attachShadow 建议有效，我会将其标记为正确答案。

首先在 devtools 中验证 ShadowRoot 的状态：puu.sh/EpwpX/1dc0c5de86.png

谢谢。 shadow roots 均已打开，此处为屏幕截图：imgur.com/qL0xbP1

这意味着这个答案中的方法会起作用，但你需要适当地调整它。例如，那些不是类，而是元素标签名称，我现在才从你的新屏幕截图中意识到。也可能该元素使用不同的事件侦听器，例如 mousedown，您可以在 devtools 的“事件侦听器”子面板中看到它。无论如何，如果不亲自尝试该页面，我不知道如何提供进一步的帮助。

显然是因为事件监听器附加到.d2l-label-text，而不是button。

【参考方案2】：

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

如果是这样，我相信您需要先获取 iframe，然后再使用

theiframe.getElementsByClassName()

【讨论】：

内容不在iframe 中。谢谢你的有用建议。我看到了一些关于iframe 是如何导致这种行为的参考资料。

@thanks_in_advance 那么我认为查看更多的 html 会有所帮助。一个非常基本的测试工作。 ---然后在控制台中--- var rows = document.getElementsByTagName('tr'); console.log(rows.length);

感谢您帮我解决这个问题，Pineapple。您的基本测试对我有用（我将该代码放在一个新的 .htm 文件中并运行该代码并且它有效。我已将 HTML DOM-tree 的面包屑添加到我原来的问题中，请看一下（他们在几张截图）。