如何在Angular中用Puppeteer操作多层shadowRoot内的输入框？

方案一：用page.evaluate()直接在浏览器上下文操作DOM #

Puppeteer自带的page.type()无法访问Shadow DOM内的元素，你可以通过page.evaluate()进入浏览器上下文，逐层遍历Shadow DOM找到目标输入框，完成输入后还要触发对应事件——毕竟谷歌地图的地址搜索通常依赖input事件才能触发API调用。

代码示例 #

await page.evaluate(async () => {
  // 定位外层move-property组件
  const moveProperty = document.querySelector('move-property');
  // 获取组件的shadowRoot
  const moveShadowRoot = moveProperty.shadowRoot;
  // 在shadowRoot内找到address-search组件
  const addressSearch = moveShadowRoot.querySelector('address-search');
  // 获取address-search的shadowRoot
  const addressShadowRoot = addressSearch.shadowRoot;
  // 定位输入框（根据实际DOM结构调整选择器，比如添加class/id）
  const input = addressShadowRoot.querySelector('input[type="text"]');
  
  // 执行输入并触发必要事件
  input.focus();
  input.value = '目标搜索地址';
  // 派发input事件，确保谷歌地图API捕获到输入变化
  input.dispatchEvent(new Event('input', { bubbles: true }));
  // 如果address-search组件暴露了搜索方法，直接调用更可靠
  // 比如 addressSearch.triggerAddressSearch();
});

方案二：使用Puppeteer的deep选择器（按需尝试） #

Puppeteer 19.x版本已支持>>>穿透Shadow DOM的选择器，不过这属于实验性语法，部分Web组件可能不兼容，你可以尝试这种更简洁的写法：

代码示例 #

// 用deep选择器直接定位输入框
const inputSelector = 'move-property >>> address-search >>> input[type="text"]';
// 等待元素加载完成
await page.waitForSelector(inputSelector);
// 模拟真实输入（加delay避免触发反爬逻辑）
await page.type(inputSelector, '目标搜索地址', { delay: 100 });
// 若自动补全未触发，手动派发input事件
await page.evaluate(selector => {
  const input = document.querySelector(selector);
  input.dispatchEvent(new Event('input', { bubbles: true }));
}, inputSelector);

关键注意事项 #

• 选择器需匹配实际DOM：根据你提供的DOM截图调整querySelector参数，比如输入框的class、id或其他属性。
• 必须触发对应事件：仅设置input.value无法触发谷歌地图API，需手动派发input或change事件。
• 优先调用组件暴露方法：如果address-search组件本身有公开的搜索/输入方法，直接在evaluate中调用比操作输入框更稳定。

内容的提问来源于stack exchange，提问作者kuuhak-u