JavaScript 渲染内容爬取实践：Puppeteer 进阶技巧

进一步探讨如何使用 Puppeteer 进行动态网页爬取，特别是如何等待页面元素加载完成、处理无限滚动加载、单页应用的路由变化以及监听接口等常见场景。

一、等待页面元素加载完成

在爬取动态网页时，确保页面元素完全加载是获取完整数据的关键。Puppeteer 提供了多种等待页面元素加载完成的方法。

1.1 使用 waitForSelector 方法

async function waitForElement() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  await page.goto('https://example.com');
  await page.waitForSelector('selector-of-element'); // 替换为实际的 CSS 选择器
  console.log('元素加载完成');

  // 提取元素内容
  const content = await page.$eval('selector-of-element', el => el.textContent);
  console.log('元素内容：', content);

  await browser.close();
}

waitForElement();

1.2 使用 waitForXPath 方法

async function waitForXPathElement() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  await page.goto('https://example.com');
  await page.waitForXPath('//*[@id="element-id"]'); // 替换为实际的 XPath 表达式
  console.log('元素加载完成');

  // 提取元素内容
  const content = await page.evaluate(() => {
    return document.evaluate('//*[@id="element-id"]', document).iterateNext().textContent;
  });
  console.log('元素内容：', content);

  await browser.close();
}

waitForXPathElement();

二、处理无限滚动加载

无限滚动加载是一种常见的动态网页加载方式，通过监听滚动事件动态加载更多内容。可以使用 Puppeteer 模拟滚动操作，获取所有内容。

async function handleInfiniteScroll() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  await page.goto('https://example.com/infinite-scroll-page');

  // 设置页面高度，模拟无限滚动
  const prevPageHeight = await page.evaluate('document.body.scrollHeight');
  let newPageHeight;
  while (true) {
    await page.evaluate(() => {
      window.scrollTo(0, document.body.scrollHeight);
    });
    await page.waitForTimeout(2000); // 等待内容加载

    newPageHeight = await page.evaluate('document.body.scrollHeight');
    if (newPageHeight === prevPageHeight) {
      break; // 如果页面高度不再变化，退出循环
    }
    prevPageHeight = newPageHeight;
  }

  // 提取内容
  const contentList = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('selector-of-content-item')).map(item => item.textContent);
  });
  console.log('内容列表：', contentList);

  await browser.close();
}

handleInfiniteScroll();

三、单页应用的路由变化处理

单页应用（SPA）通常通过 JavaScript 动态更新页面内容而不重新加载整个页面。可以使用 Puppeteer 监听路由变化，获取不同路由下的内容。

async function handleSpaRouteChanges() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  await page.goto('https://example.com/spa-page');

  // 监听路由变化
  page.on('response', async (response) => {
    if (response.url().includes('api/new-route')) {
      console.log('路由变化检测到，获取新内容');
      // 提取新路由下的内容
      const content = await page.evaluate(() => {
        return document.querySelector('selector-of-new-route-content').textContent;
      });
      console.log('新路由内容：', content);
    }
  });

  // 触发路由变化的操作
  await page.click('selector-of-route-link');

  await browser.close();
}

handleSpaRouteChanges();

四、监听接口请求

在某些情况下，我们可能需要监听特定的接口请求，获取接口返回的数据。Puppeteer 提供了监听网络请求的功能。

async function listenApiRequest() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  // 监听网络请求
  page.on('response', async (response) => {
    const url = response.url();
    if (url.includes('api/data')) { // 监听特定接口
      try {
        const data = await response.json(); // 获取接口返回的 JSON 数据
        console.log('接口数据：', data);
      } catch (error) {
        console.error('解析接口数据出错：', error);
      }
    }
  });

  await page.goto('https://example.com/page-with-api-calls');

  // 执行触发接口请求的操作
  await page.click('selector-of-api-call-trigger');

  await browser.close();
}

listenApiRequest();

五、完整示例：爬取动态电商网站

以下是一个完整的示例，演示如何使用 Puppeteer 爬取一个动态电商网站的商品列表，该网站使用无限滚动加载商品内容。

async function scrapeEcommerceProducts() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  await page.goto('https://example.com/products', { waitUntil: 'networkidle2' });

  // 设置页面高度，模拟无限滚动
  const prevPageHeight = await page.evaluate('document.body.scrollHeight');
  let newPageHeight;
  const productSet = new Set(); // 使用集合避免重复

  while (true) {
    // 提取当前页面的商品内容
    const products = await page.evaluate(() => {
      return Array.from(document.querySelectorAll('.product-item')).map(item => {
        return {
          title: item.querySelector('.product-title').textContent,
          price: item.querySelector('.product-price').textContent
        };
      });
    });

    // 将商品信息添加到集合
    products.forEach(product => productSet.add(JSON.stringify(product)));

    // 滚动页面
    await page.evaluate(() => {
      window.scrollTo(0, document.body.scrollHeight);
    });
    await page.waitForTimeout(2000); // 等待内容加载

    newPageHeight = await page.evaluate('document.body.scrollHeight');
    if (newPageHeight === prevPageHeight) {
      break; // 如果页面高度不再变化，退出循环
    }
    prevPageHeight = newPageHeight;
  }

  // 将集合转换为数组并输出
  const productList = Array.from(productSet).map(item => JSON.parse(item));
  console.log('商品列表：', productList);

  await browser.close();
}

scrapeEcommerceProducts();

六、总结

通过本文的案例和实践，深入探讨了如何使用 Puppeteer 进行动态网页爬取，包括等待页面元素加载、处理无限滚动加载、单页应用的路由变化以及监听接口请求等常见场景