如何用waitForFunction等待ShadowRoot内的Cookie授权按钮并点击

你的问题核心是waitForFunction的写法错误，导致无法正确等待ShadowRoot内的元素，以下是问题分析和解决方案：

错误原因拆解 #

1. 第一种写法错误：在浏览器执行的代码里用了page.evaluate——这是Node端Puppeteer的API，浏览器环境根本不存在，直接导致执行失败。
2. 第二种写法错误：没有做空值检查，当外层元素或ShadowRoot还未加载时，链式调用document.querySelector(...).shadowRoot.querySelector(...)会抛出TypeError: null is not an object，waitForFunction会把这种报错判定为执行失败，而非继续等待。
3. 第三种写法错误：直接在Node环境执行了document.querySelector（此时页面元素还未加载，返回null），把null传给waitForFunction，自然触发报错。

正确实现方式 #

方案1：逐层空值检查的waitForFunction #

通过分步判断元素是否存在，避免空值报错，让waitForFunction持续等待直到目标按钮出现：

// 等待ShadowRoot内的Cookie授权按钮加载完成
await page.waitForFunction(() => {
  // 先找外层宿主元素
  const hostElement = document.querySelector("#page_reg > div:nth-child(1)");
  if (!hostElement) return false;
  // 检查ShadowRoot是否存在
  const shadowRoot = hostElement.shadowRoot;
  if (!shadowRoot) return false;
  // 检查目标按钮是否存在
  return shadowRoot.querySelector("#consent-layer > div.consent-layer__btn-container > button.btn.btn--secondary.js-accept-essential-cookies") !== null;
});

// 按钮出现后执行点击
await page.evaluate(() => {
  document.querySelector("#page_reg > div:nth-child(1)")
    .shadowRoot
    .querySelector("#consent-layer > div.consent-layer__btn-container > button.btn.btn--secondary.js-accept-essential-cookies")
    .click();
});

方案2：用可选链简化代码（现代浏览器支持） #

如果目标浏览器支持ES2020+的可选链操作符?.，可以大幅简化代码，同时避免空值报错：

// 等待按钮出现
await page.waitForFunction(() => {
  return document.querySelector("#page_reg > div:nth-child(1)")?.shadowRoot?.querySelector(".js-accept-essential-cookies") !== null;
});

// 执行点击
await page.evaluate(() => {
  document.querySelector("#page_reg > div:nth-child(1)")?.shadowRoot?.querySelector(".js-accept-essential-cookies").click();
});

关键说明 #

waitForFunction的核心逻辑是反复执行传入的函数，直到函数返回true，所以必须保证函数在元素未出现时返回false，而非抛出错误——这是你之前所有尝试失败的核心原因。

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