Puppeteer网页爬取中自动关弹窗后仍无法定位元素求助

你的问题核心在于弹窗处理的时机和可靠性不足：固定超时等待无法适配弹窗的动态加载节奏，且弹窗关闭后未确保页面完全恢复交互就尝试获取目标元素，导致选择器查找失败。以下是针对性的修复方案：

修复步骤 #

1. 修正弹窗选择器：原选择器中类名间的空格是后代选择器语法，需改为.连接，确保选中同时拥有多个类的按钮元素
2. 替换固定超时为事件驱动等待：用Puppeteer原生API等待弹窗出现、点击后等待弹窗完全消失，避免依赖不可靠的setTimeout
3. 确保目标元素可见后再获取：每次循环前等待目标元素加载并可见，应对页面动态更新的情况

修改后的完整代码 #

const puppeteer = require("puppeteer");
const urls = [
  "https://www.winamax.fr/paris-sportifs/match/34169987",
  "https://www.winamax.fr/paris-sportifs/match/39073593",
];

(async () => {
  const browser = await puppeteer.launch({
    executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
    headless: false,
    args: [
      "--incognito",
      "--blink-settings=imagesEnabled=false",
      "--disable-css-animations",
    ],
    defaultViewport: null,
  });

  // 初始化页面并处理弹窗
  const pages = await Promise.all(
    urls.map(async (url) => {
      const page = await browser.newPage();
      await page.goto(url, { timeout: 0, encoding: "utf-8" });

      // 等待弹窗按钮出现（兼容两种弹窗样式）
      const popupButtonSelector = ".tarteaucitronCTAButton.tarteaucitronDeny, .sc-PJClH.sc-jfdOKL.sc-fmGnzW.sc-eoXOpV.sc-kMizLa.HcSjC.euooKa.dWNwst.dtmNbI.casXlC";
      await page.waitForSelector(popupButtonSelector, { timeout: 15000 });
      await page.click(popupButtonSelector);

      // 等待弹窗完全消失
      await page.waitForFunction(
        (selector) => !document.querySelector(selector),
        { timeout: 10000 },
        popupButtonSelector
      );

      return page;
    })
  );

  // 无限循环爬取数据
  while (true) {
    await Promise.all(
      pages.map(async (page) => {
        const targetSelector = ".sc-jQHtVU.sc-bWXABl.gOFGcM.cHHGHO";
        // 等待目标元素可见后再获取内容
        await page.waitForSelector(targetSelector, { visible: true, timeout: 10000 });
        const equipeA = await page.$eval(targetSelector, el => el.textContent.trim());
        
        const now = new Date();
        console.log(`[${now.toLocaleString()}] 爬取到队伍名称: ${equipeA}`);
      })
    );
    await new Promise(resolve => setTimeout(resolve, 10000));
  }

  await browser.close();
})();

关键改动说明 #

• 弹窗处理可靠性提升：通过waitForSelector等待按钮出现，waitForFunction确认弹窗消失，确保页面状态稳定后再进行后续操作
• 目标元素获取容错性增强：每次循环都等待元素可见，避免页面动态更新导致的选择器查找失败
• 移除冗余代码：删除了tableau_valeurs的无效操作，直接输出爬取结果

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