如何获取 HTML 个自定义元素的子元素？

Question

我正在用 puppeteer 写一个爬虫，我需要填写一个用 Aura js 构建的表单的字段。问题是我无法访问输入和密码字段，因为它们位于自定义元素内：

<lightning-input class="input sfdc_usernameinput slds-form-element" data-aura-rendered-by="116:0" lightning-input_input-host=""><span lightning-input_input="" data-aria="" class="slds-assistive-text"></span><label lightning-input_input="" for="input-5" class="slds-form-element__label slds-no-flex slds-assistive-text">Username</label>
    <div lightning-input_input="" class="slds-form-element__control slds-grow">
        <input lightning-input_input="" type="text" id="input-5" aria-invalid="false" placeholder="Username" class="slds-input">
    </div>
</lightning-input>

当我尝试时：

await page.type('#input-5', 'myusername');

它抛出错误：

Error: No node found for selector: #input-5

如果我在浏览器控制台中尝试 document.getElementById('#input-5') 即可确认。

那么我如何获得该输入？

编辑：添加显示此处发生情况的屏幕截图：带有子元素但无法访问它们的标记。

Answer 1

您要查找的元素被封装在 shadow DOM 中，从而使它们对正常的 DOM 查询方法隐藏。

您仍然可以这样查询它们：

document.querySelector("lightning-badge").shadowRoot.querySelector('#input-5')

示例：在 this Aura demo page 我可以使用以下代码获取闪电徽章的文本：

document.querySelector("lightning-badge").shadowRoot.textContent

"Start Position"

这个查询当然也可以用 puppeteer 在 page.evaluate 方法中执行。

如何获取 HTML 个自定义元素的子元素？

How to get children of HTML custom elements?

html

javascript

web-scraping

puppeteer