Puppeteer 爬取动态生成的网页实战

Puppeteer 爬取动态生成的网页实战攻略

介绍

Puppeteer 是一个由 Google 开源的 Node.js 库，它提供了一个高级的 API 来与 headless Chrome 进行交互。Puppeteer 可以模拟用户的交互行为，并且可以获取网页中动态生成的内容，非常适合用来做爬虫。

步骤

1. 安装 Puppeteer

在安装 Puppeteer 前需要先安装 Node.js ，安装命令可以在 Node.js 官网 查看。

安装 Puppeteer ，只需要执行以下命令即可：

npm install puppeteer

2. 打开浏览器

使用 Puppeteer 前需要先启动一个 headless Chrome 浏览器，执行以下代码：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // ...
})();

这里的const browser = await puppeteer.launch()会启动一个无头浏览器，可以通过传入参数来配置。const page = await browser.newPage()会创建一个新的空白页面。

3. 打开网页并获取内容

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/');
  const content = await page.content();
  console.log(content);
  // ...
})();

这里的await page.goto('https://example.com/')会导航到指定网站，之后使用await page.content()会返回网站的 HTML 内容，打印到控制台上。

4. 模拟用户操作和事件

Puppeteer 可以模拟用户的交互行为，例如点击、输入等操作：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/');
  await page.type('#search-box', 'test'); // 在表单中输入 'test'
  await page.click('#search-button'); // 点击提交按钮
  // ...
})();

这里的await page.type()会在表单元素中输入指定文本，await page.click()会模拟点击事件。这些操作会启动 JavaScript 引擎并执行相应的代码。

5. 获取动态生成的内容

如果网页中的内容通过 Ajax 或 JavaScript 动态生成，那么可以使用page.waitFor()来等待指定的元素出现，之后使用page.evaluate()来获取元素的属性或文本：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/');
  await page.type('#search-box', 'test');
  await page.click('#search-button');
  await page.waitFor('#search-results');
  const results = await page.evaluate(() => {
    const links = Array.from(document.querySelectorAll('#search-results a'));
    return links.map(link => ({ title: link.textContent, href: link.href }));
  });
  console.log(results);
  // ...
})();

这里的await page.waitFor('#search-results')会等待网页中指定的元素出现，await page.evaluate()会执行指定的 JavaScript 代码，并返回执行结果。

示例

示例一: 抓取煎蛋网妹子图

以下代码使用 Puppeteer 爬取煎蛋网 (https://jandan.net/) 的妹子图。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://jandan.net/ooxx/');
  for(let i = 0; i < 3; i++) {
    const images = await page.$$eval('#comments img', imgs => imgs.map(img => img.src));
    console.log(images);
    await page.click('#comments > div:nth-child(14) > div > div.cp-pagenavi > a:nth-child(3)');
    await page.waitFor(1000);
  }
  await browser.close();
})();

代码解析:

此代码首先打开煎蛋网的妹子图页面 (https://jandan.net/ooxx/)，之后模拟点击翻页，循环获取其中的图片链接，最后关闭浏览器。

示例二: 抓取贴吧帖子

以下代码使用 Puppeteer 爬取贴吧帖子，包括标题、图像、作者和时间。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://tieba.baidu.com/p/1234567');
  const title = await page.title();
  const posts = await page.$$eval('.d_post_content', divList => {
    return divList.map(div => {
      const author = div.querySelector('.d_author a').textContent;
      const time = div.querySelector('.d_post_content_main .tail-info').textContent;
      const imgList = Array.from(div.querySelectorAll('.BDE_Image')).map(img => img.src);
      return { author, time, imgList };
    });
  });
  console.log(title, posts);
  await browser.close();
})();

代码解析:

此代码首先打开贴吧帖子 (https://tieba.baidu.com/p/1234567)，之后获取主题的标题，之后使用page.$$eval()来获取帖子中所有发表的内容，并解析出图片、作者和发布时间。最后关闭浏览器。