使用Puppeteer无法点击Cookie按钮的问题求助

我尝试用Puppeteer关闭网站Cookie横幅/弹窗，能通过日志或条件判断成功定位到按钮元素，但点击操作完全无效，截图里横幅始终存在。已经试过多种方法，调试多日都没解决，多个站点都出现这个问题。Puppeteer版本用了^22.4.1，也试过最新版。

示例代码（以makeup.uk为例，实际为捷克站点） #

const puppeteer = require("puppeteer");

(async function main() {
  try {
    const browser = await puppeteer.launch({
      headless: true,
      defaultViewport: {
        width: 1920,
        height: 1080,
      },
    });
    const page = await browser.newPage();

    const response = await page.goto("https://makeup.uk/", {
      waitUntil: ["domcontentloaded", "networkidle2"],
    });

    // 第一种方法，无效
    const xp = '::-p-xpath("//button[contains(text(), \"Accept\")]")';
    const el = await page.waitForSelector(xp);
    await el.click();

    // 第二种方法，无效
    const buttons = await page.$$('::-p-xpath("//button")');
    for (const button of buttons) {
      let text = await button.evaluate((el) => el.textContent);
      if (text.includes("Accept")) {
        console.log("Found my button!"); // 控制台能打印这条日志！
        await button.evaluate((b) => b.click());
      }
    }

    const date = new Date().toTimeString();
    await page.screenshot({ path: date + ".png", fullPage: true });
    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();

调试信息 #

打印第一种方法中的el，终端显示已找到元素：

el CdpElementHandle {
  handle: CdpJSHandle {},
  [Symbol(_isElementHandle)]: true
}

我还尝试过在page.evaluate()中直接查找元素等方法，结果一致：能找到按钮但点击无效，Cookie横幅始终存在。

可能的解决方案 #

1. 确保元素处于可交互状态 #

很多Cookie弹窗按钮可能被遮挡、隐藏或处于不可交互状态，先等待元素可见且可交互：

const xp = '::-p-xpath("//button[contains(text(), \"Accept\")]")';
// 等待元素可见且可交互
await page.waitForSelector(xp, { visible: true, timeout: 5000 });
const el = await page.$(xp);
// 模拟真实用户的点击延迟
await el.click({ delay: 100 });

2. 在页面上下文内直接触发点击事件 #

ElementHandle的点击有时会有兼容性问题，改用页面内的DOM操作触发完整的点击事件：

await page.evaluate(() => {
  // 用XPath查找按钮
  const acceptBtn = document.evaluate(
    '//button[contains(text(), "Accept")]',
    document,
    null,
    XPathResult.FIRST_ORDERED_NODE_TYPE,
    null
  ).singleNodeValue;
  
  if (acceptBtn) {
    // 触发包含冒泡的鼠标点击事件，模拟真实用户操作
    acceptBtn.dispatchEvent(new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
      view: window
    }));
  }
});

3. 调整浏览器启动参数 #

部分站点的Cookie弹窗依赖特定浏览器特性，尝试禁用Cookie控制相关功能：

const browser = await puppeteer.launch({
  headless: true,
  defaultViewport: { width: 1920, height: 1080 },
  args: [
    '--disable-features=CookieControls',
    '--disable-popup-blocking'
  ]
});

4. 模拟真实用户的交互路径 #

先滚动到元素位置，确保元素在视口内后再点击：

const xp = '::-p-xpath("//button[contains(text(), \"Accept\")]")';
const el = await page.waitForSelector(xp);
// 滚动到元素可见位置
await el.scrollIntoView();
// 等待滚动完成
await page.waitForTimeout(500);
await el.click();

5. 检查是否有iframe嵌套 #

部分Cookie弹窗会放在iframe里，需要先切换到对应的iframe：

// 找到包含Cookie弹窗的iframe
const iframe = await page.waitForSelector('iframe[src*="cookie"]');
const frame = await iframe.contentFrame();
// 在iframe内查找按钮并点击
const acceptBtn = await frame.waitForSelector('button:has-text("Accept")');
await acceptBtn.click();

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