如何用Puppeteer加载底部带Loading的完整页面及对应元素CSS Selector写法

1. 加载提示元素CSS Selector #

实测该站点滚动加载时显示的Loading元素对应正确CSS选择器为 div[data-testid="loading-spinner"]。站点有更多车辆内容待加载时，该元素会展示在列表底部；全量内容加载完成后，该元素会被隐藏或从DOM中移除。
如果后续站点前端迭代导致选择器失效，可以打开浏览器开发者工具的元素拾取功能，点选加载状态的提示元素，直接复制其CSS选择器即可替换使用。

2. 自动滚动加载全量内容实现方案 #

实现逻辑为：页面首次加载完成后，循环滚动到页面底部，检测加载元素是否存在，存在则等待新内容渲染完成，直到加载元素消失即代表所有内容加载完毕。
完整示例代码如下：

const puppeteer = require('puppeteer');

(async () => {
  // 启动浏览器，调试时可将headless设为false观察滚动过程
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  const targetUrl = 'https://www.pluginauto.com/pre-owned-cars';

  // 跳转目标页面，等待网络空闲
  await page.goto(targetUrl, { waitUntil: 'networkidle2', timeout: 30000 });

  // 等待车辆列表首次渲染完成
  await page.waitForSelector('.pre-owned-cars__list-wrapper', { timeout: 10000 });

  let lastPageHeight = 0;
  // 循环滚动加载
  while (true) {
    // 记录当前页面高度
    lastPageHeight = await page.evaluate(() => document.body.scrollHeight);
    // 滚动到页面底部触发加载
    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));

    // 检测是否还有加载元素，没有则说明已加载完全部内容
    const loadingElementExists = await page.$('div[data-testid="loading-spinner"]') !== null;
    if (!loadingElementExists) break;

    // 等待新内容加载完成，页面高度更新
    try {
      await page.waitForFunction(
        (prevHeight) => document.body.scrollHeight > prevHeight,
        { timeout: 8000 },
        lastPageHeight
      );
      // 增加短时间等待避免渲染未完成就进入下一次循环
      await page.waitForTimeout(200);
    } catch (err) {
      // 超时无新内容则退出循环
      break;
    }
  }

  // 此处可获取全量页面内容或提取车辆数据
  const fullPageHtml = await page.content();
  console.log('全量页面内容加载完成，可进行后续数据处理');

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

注意事项 #

• 若遇到反爬拦截，可按需添加随机UA、请求间隔、代理IP等配置规避
• 可根据实际网络情况调整等待超时的时长，避免因网络慢导致的提前退出循环

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