如何使用Puppeteer填充Closed Shadow Root内的输入框？

针对你遇到的Shadow Root内输入框定位问题，以下是几种可行的解决方法：

方法1：利用Puppeteer浏览器上下文API直接操作 #

document是浏览器端专属对象，必须放在page.evaluate这类能进入页面上下文的方法中执行，代码示例：

// 填充邮箱输入框
await page.evaluate(() => {
  const loginForm = document.querySelector('#form');
  const emailInput = loginForm.shadowRoot.querySelector('#inputEmail');
  emailInput.value = 'your-email@example.com';
});

也可以用page.$eval简化，直接定位外层元素后操作其Shadow Root：

await page.$eval('#form', (form) => {
  form.shadowRoot.querySelector('#inputEmail').value = 'your-email@example.com';
});

方法2：使用puppeteer-shadow-selector库简化语法 #

这个库支持类似CSS选择器的穿透语法，无需手动遍历Shadow Root：

1. 先安装依赖：

npm install puppeteer-shadow-selector

2. 调用库方法定位并填充：

const { $shadow } = require('puppeteer-shadow-selector');

// 定位输入框并输入内容
const emailInput = await $shadow(page, '#form >>> #inputEmail');
await emailInput.type('your-email@example.com');

// 或者直接在回调里赋值
await $shadow(page, '#form >>> #inputEmail', (el) => {
  el.value = 'your-email@example.com';
});

方法3：分步手动定位Shadow Root元素 #

如果不想引入第三方库，也可以分步获取元素后操作：

// 先获取外层的login-form元素
const loginForm = await page.$('#form');
// 在元素上下文内访问其Shadow Root
await loginForm.evaluate((form) => {
  const input = form.shadowRoot.querySelector('#inputEmail');
  input.value = 'your-email@example.com';
});

你之前的错误原因说明 #

• 第一个错误：form::id(#inputEmail)不是Puppeteer支持的选择器语法，Puppeteer本身没有内置穿透Shadow Root的选择器，需要借助页面上下文或第三方库。
• 第二个错误：直接在Node.js环境中使用document，document仅存在于浏览器页面上下文，必须通过page.evaluate等方法进入浏览器环境才能调用。

注意：如果是closed类型的Shadow Root，新版本Puppeteer（v10+）通过Chrome DevTools协议可以正常访问，无需额外配置。

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