如何用Puppeteer处理iframe中的Shadow DOM并点击按钮？

云原生阿岚

2026-8-2

解决iframe内Shadow DOM按钮点击问题

错误原因

你代码里的frame是Puppeteer的Frame实例对象，并非浏览器原生的window或document对象，所以它没有querySelector方法，必须在iframe的浏览器上下文环境中执行DOM查询操作。

可行解决方案

方案1：直接在iframe上下文执行点击逻辑

通过frame.evaluate()将DOM操作代码注入到iframe的运行环境中，在该环境内可以直接使用原生DOM API访问Shadow DOM：

const frameHandle = await page.$("iframe.iframe_1");
const frame = await frameHandle.contentFrame();

// 注入代码到iframe上下文，完成Shadow DOM内按钮点击
await frame.evaluate(() => {
  // 找到承载Shadow Root的宿主元素
  const shadowHost = document.querySelector(".shadow-root");
  // 访问Shadow Root并定位按钮
  const targetBtn = shadowHost.shadowRoot.querySelector("#btn_1");
  // 执行点击
  targetBtn.click();
});

方案2：等待元素加载完成后点击（更稳定）

如果iframe或Shadow DOM内容是异步加载的，使用frame.waitForFunction()等待目标元素出现后再执行点击，避免因元素未加载导致的错误：

const frameHandle = await page.$("iframe.iframe_1");
const frame = await frameHandle.contentFrame();

// 等待Shadow DOM内的按钮可用并点击
await frame.waitForFunction(() => {
  const shadowHost = document.querySelector(".shadow-root");
  // 先检查Shadow Host和Shadow Root是否存在
  if (!shadowHost?.shadowRoot) return false;
  
  const targetBtn = shadowHost.shadowRoot.querySelector("#btn_1");
  if (targetBtn) {
    targetBtn.click();
    return true;
  }
  return false;
});