Puppeteer中QuerySelector返回空但浏览器端可正常获取元素如何解决

核心问题原因 #

• 无法跨环境传递DOM元素：page.evaluate 的返回值必须是可JSON序列化的原生类型，浏览器DOM节点属于宿主对象，不支持跨环境序列化传输，你直接返回DOM元素集合拿到的只会是空值。
• 未等待异步加载完成：切换地区触发change事件后，网站会异步请求对应区域的停电数据，没有加等待逻辑的情况下，执行选择器时数据还没完成渲染，自然匹配不到元素。

修正后代码 #

const puppeteer = require('puppeteer');

(async() => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://alert.eneo.cm/', { waitUntil: 'networkidle0' });

  await page.evaluate(() => {
      const region = "Littoral";
      const j = $('#regions option:contains(' + region + ')');
      $('#regions').val(j.val()).change();
  });

  // 等待停电信息元素渲染完成，最多等待10秒，可按需调整时长
  await page.waitForSelector('#contentdata .outage', { timeout: 10000 });

  const outages = await page.evaluate(() => {
      const elements = document.querySelectorAll("#contentdata .outage");
      // 提取需要的字段，返回可序列化的普通对象数组
      return Array.from(elements).map(el => {
        return {
          title: el.querySelector('.title')?.textContent.trim() || '',
          time: el.querySelector('.time')?.textContent.trim() || '',
          location: el.querySelector('.location')?.textContent.trim() || '',
          // 可根据页面实际结构补充其他需要提取的字段
        }
      });
  });
  console.log(outages);
  await browser.close();
})();

额外优化提示 #

• 如果等待元素经常超时，可以适当延长timeout参数值，也可以替换为等待对应接口请求完成，稳定性会更高。
• 提取字段的选择器可以根据页面实际结构调整，匹配你需要的具体信息。

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