如何在Puppeteer中获取HTML自定义元素内部的子元素？

问题原因 #

Salesforce的Aura/Lightning自定义组件使用了Shadow DOM对内部元素做了封装，常规的DOM选择器无法直接穿透Shadow Root访问内部节点。另外你在控制台调用document.getElementById('#input-5')本身也有语法错误——getElementById的入参不需要带#前缀，就算修正语法，全局DOM查询也无法命中Shadow DOM内部的元素。
还要注意不要用input-5这类动态生成的ID做选择器，Aura每次渲染都会生成不同的ID，优先用外层lightning-input上稳定的sfdc_usernameinput类名定位，不会随渲染变化。

解决方案 #

这里提供两种可直接落地的写法：

方案1：手动穿透Shadow Root（兼容性最好） #

直接通过JS逻辑访问Shadow Root再查询内部元素，兼容所有Puppeteer版本：

// 直接赋值并触发输入事件，适配Aura表单的校验逻辑
await page.$eval('lightning-input.sfdc_usernameinput', (el) => {
  const innerInput = el.shadowRoot.querySelector('input.slds-input');
  innerInput.value = 'myusername';
  // 触发原生输入事件，让Aura框架能捕获到值变更
  innerInput.dispatchEvent(new Event('input', { bubbles: true }));
});

如果需要模拟真实输入的按键效果，也可以先拿到元素句柄再调用type方法：

const innerInput = await page.evaluateHandle(() => {
  const lightningInput = document.querySelector('lightning-input.sfdc_usernameinput');
  return lightningInput.shadowRoot.querySelector('input.slds-input');
});
await innerInput.type('myusername');

方案2：使用深度选择器（写法更简洁） #

新版Puppeteer支持>>>深度选择符，可以直接跨Shadow DOM查询元素：

await page.type('lightning-input.sfdc_usernameinput >>> input.slds-input', 'myusername');

如果要定位密码框，同理替换外层类名即可，密码框的lightning-input一般会带sfdc_passwordinput类名，替换上面的类名就能正常定位填充。

内容的提问来源于stack exchange，提问作者Darko Romanov