Puppeteer headless设为true时无法定位页面元素问题求助

核心原因 #

• 目标站点配置了反爬识别规则，默认旧版headless模式的浏览器特征、User-Agent会被判定为爬虫，返回的页面内容不含目标.sale-item节点
• page.evaluate仅支持传递可序列化的JSON数据，直接返回DOM节点集合会被自动过滤，无法正常传递到Node.js环境
• waitForNetworkIdle仅根据网络请求状态判断页面稳定，无法覆盖前端懒加载、客户端渲染的场景，可能在元素未渲染完成时就执行了查询逻辑

修复后代码 #

const puppeteer = require('puppeteer');
const chalk = require("chalk");

const baseUrl = "https://www.interencheres.com/recherche/lots?search=";
const searchTerm = "Apple";
const searchUrl = baseUrl + searchTerm;

(async () => {
  const browser = await puppeteer.launch({
    // 使用新版无头模式，行为和有头浏览器完全一致
    headless: "new",
    ignoreHTTPSErrors: true,
    args: [
      `--window-size=1920,1080`,
      "--no-sandbox",
      "--disable-setuid-sandbox"
    ],
    defaultViewport: {
      width: 1920,
      height: 1080,
    },
  });

  const page = await browser.newPage();
  // 伪装成普通桌面Chrome的UA，可替换为你本地浏览器的真实UA
  await page.setUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36");

  console.log(chalk.yellow("Beginning navigation."));
  await page.goto(searchUrl, {timeout: 30000});

  console.log(chalk.yellow("Wait for target elements render..."));
  // 主动等待目标元素出现，比waitForNetworkIdle更可靠
  await page.waitForSelector(".sale-item", {timeout: 15000});

  const findElements = await page.evaluate(() => {
    const elements = document.querySelectorAll(".sale-item");
    // 手动提取需要的属性，返回可序列化的普通对象
    return Array.from(elements).map(el => ({
      _prevClass: el.className
    }));
  });

  console.log(findElements);

  console.log(chalk.blue("Waiting..."));
  await page.waitForTimeout(10000);

  await browser.close();
  console.log(chalk.red("Closed."));
})();

补充排查手段 #

• 可在执行元素查询前添加await page.screenshot({path: 'debug.png'})，运行后查看截图确认页面是否正常加载，是否出现验证码、反爬拦截提示
• 若仍被拦截，可尝试添加cookie、调整请求头、禁用WebRTC等操作降低爬虫识别概率

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