如何获得HTML自定义元素的子元素？
如何获得HTML自定义元素的子元素？
提问于 2021-10-06 10:46:41
我正在用木偶手写一个刮刀，我需要填充一个用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')，就会确认这一点。
那我怎么得到那个输入呢？
编辑:添加一个屏幕截图，显示这里发生的事情:带有子元素的标记，但无法访问它们。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-06 12:54:49
您要寻找的元素被封装在阴影DOM中，从而使它们不受常规DOM查询方法的影响。
您仍然可以这样查询它们：
document.querySelector("lightning-badge").shadowRoot.querySelector('#input-5')示例:在这个Aura演示页面上，我可以使用以下代码获取闪电徽章的文本：
document.querySelector("lightning-badge").shadowRoot.textContent“起始位置”
当然，这个查询也可以在带傀儡的page.evaluate方法中执行。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69464295
复制相关文章
相似问题
腾讯云开发者
