Node.js爬虫只会Cheerio？来试试Puppeteer！

简介

上篇文章我们学习了如何通过 Cheerio 来爬取静态页面，但是我们没有办法处理动态渲染页面的数据
关于 Cheerio 的学习请查看都 2023 年了还不会 Node.js 爬虫？快学起来！

今天我们学习如何使用 Puppeteer 来轻松地完成我们解决不了的爬虫任务

什么是Puppeteer

Puppeteer 是一个由 Google 开发的 Node.js 库，它提供了一组用于控制 Headless Chrome 的 API。

Headless Chrome 是 Chrome 浏览器的无界面版本，可以用于模拟用户行为、测试网站、爬取数据等多种用途。

Puppeteer 提供了一系列的 API，可以让我们控制 Chrome 浏览器的各种行为，例如打开网页、模拟用户操作、获取网页内容等。

总之，Puppeteer 是一个非常强大且易于使用的工具，可以帮助我们轻松地完成各种 Web 自动化和爬虫任务。

Puppeteer的优势

完全支持最新的 Web 标准和技术：Puppeteer 支持最新的 Web 标准和技术，例如 ES6、Promise、async/await 等。这样，我们可以使用最新的 JavaScript 特性来编写爬虫代码，使代码更加简洁、易读、易维护。
支持动态网站的爬取：Puppeteer 可以处理 JavaScript 渲染的页面，也就是说它可以爬取动态网站，这是其他爬虫框架所不具备的优势。
可以模拟真实的用户行为：Puppeteer 可以模拟真实的用户行为，例如点击按钮、填写表单、滚动页面等。
可以生成 PDF 和截屏等多种格式的输出：Puppeteer 可以生成 PDF 和截屏等多种格式的输出，这对于需要对网站进行分析或者展示结果的情况非常有用。
可以与其他 Node.js 库和框架无缝集成：Puppeteer 可以与其他 Node.js 库和框架无缝集成，例如 Express、Koa、Mocha、Jest 等。这样，我们可以将 Puppeteer 用于自动化测试、Web 开发等领域。

Puppeteer基本用法

安装配置

使用 npm 安装 Puppeteer：

npm install puppeteer

Puppeteer 默认会从 Google 的服务器下载 Chrome 浏览器二进制文件，如果您的网络环境无法访问 Google 的服务器，可以通过以下方式配置 Puppeteer：

const puppeteer = require('puppeteer');

(async () => {
    
    
  const browser = await puppeteer.launch({
    
    
    headless: true, // 是否启用无头模式
    executablePath: '/path/to/Chrome', // Chrome 浏览器可执行文件路径
    args: ['--no-sandbox'], // Chrome 启动参数
  });
  const page = await browser.newPage();
  await page.goto('https://example.com');
  // ...
  await browser.close();
})();

我们通过 executablePath 和 args 选项来指定 Chrome 浏览器的可执行文件路径和启动参数

这样，我们就可以在没有网络的情况下使用 Puppeteer

打开网页

使用 puppeteer.launch() 方法启动 Chrome 浏览器，并创建一个新的页面对象：

const puppeteer = require('puppeteer');

(async () => {
    
    
  const browser = await puppeteer.launch(); // 启动 Chrome 浏览器
  const page = await browser.newPage(); // 创建一个新的页面对象
  await page.goto('https://example.com'); // 打开一个网页
  // ...
  await browser.close();
})();

在上面的代码中，我们使用 puppeteer.launch() 方法启动 Chrome 浏览器，并使用 browser.newPage() 方法创建一个新的页面对象，然后，我们使用 page.goto() 方法打开一个网页。

launch配置

在使用 puppeteer.launch() 方法启动 Chrome 浏览器时，可以通过传递一些配置选项来控制 Chrome 浏览器的启动行为。下面是常用的配置选项：

headless：是否启用无头模式，默认为 true。
executablePath：Chrome 浏览器可执行文件路径。
args：Chrome 启动参数。
defaultViewport：默认的浏览器窗口大小。
timeout：超时时间，单位为毫秒。

下面是一个使用 puppeteer.launch() 方法的示例：

const puppeteer = require('puppeteer');

(async () => {
    
    
  const browser = await puppeteer.launch({
    
    
    headless: true,
    executablePath: '/path/to/Chrome',
    args: ['--no-sandbox'],
    defaultViewport: {
    
    
      width: 1280,
      height: 800,
    },
    timeout: 30000,
  });
  const page = await browser.newPage();
  await page.goto('https://example.com');
  // ...
  await browser.close();
})();

在上面的代码中，我们使用了常用的配置选项：

headless 选项设置为 true，启用无头模式。
executablePath 选项指定 Chrome 浏览器的可执行文件路径。
args 选项指定 Chrome 启动参数，例如 --no-sandbox 表示禁用沙盒模式。
defaultViewport 选项指定默认的浏览器窗口大小。
timeout 选项指定超时时间为 30 秒。

下面是更详细的配置列表：

puppeteer.launch({
    
    
  headless: true, // 是否以无头模式运行浏览器，默认为true
  executablePath: '', // 可执行文件路径，如果不指定则自动下载
  args: [], // 命令行参数数组
  ignoreDefaultArgs: false, // 是否忽略默认的命令行参数
  defaultViewport: null, // 默认视窗大小，null表示自动设置
  slowMo: 0, // 延迟毫秒数，用于调试
  timeout: 30000, // 超时时间，单位为毫秒
  devtools: false, // 是否打开DevTools面板，默认为false
  pipe: false, // 是否将浏览器启动的I/O连接通过管道传递，默认为false
  handleSIGINT: true, // 是否在收到SIGINT信号时关闭浏览器，默认为true
  handleSIGTERM: true, // 是否在收到SIGTERM信号时关闭浏览器，默认为true
  handleSIGHUP: true, // 是否在收到SIGHUP信号时关闭浏览器，默认为true
  env: {
    
    }, // 环境变量对象
  userDataDir: '', // 用户数据目录路径
  dumpio: false, // 是否将浏览器I/O输出到进程的stdout和stderr中，默认为false
  executablePath: '', // 可执行文件路径，如果不指定则自动下载
  ignoreHTTPSErrors: false, // 是否忽略HTTPS错误，默认为false
  ignoreCertificateErrors: false // 是否忽略SSL证书错误，默认为false
});

获取元素

使用 page.$() 方法获取一个元素：

const element = await page.$('selector');

在上面的代码中，我们使用 page.$() 方法获取一个元素。

其中，selector 参数可以是 CSS 选择器、XPath 表达式或者其他选择器。

点击按钮

使用 element.click() 方法点击一个按钮：

const puppeteer = require('puppeteer');

(async () => {
    
    
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await element.click();
  await browser.close();
})();

在上面的代码中，我们使用 element.click() 方法点击一个按钮。

填写表单

使用 element.type() 方法填写表单：

const puppeteer = require('puppeteer');

(async () => {
    
    
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await element.type('text');
  await browser.close();
})();

在上面的代码中，我们使用 element.type() 方法填写表单。其中，text 参数是要填写的文本内容。

截屏

使用 page.screenshot() 方法截屏：

const puppeteer = require('puppeteer');

(async () => {
    
    
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({
    
     path: 'example.png' });
  await browser.close();
})();

在上面的代码中，我们使用 page.screenshot() 方法截屏，并将截屏保存为 PNG 格式的文件。

还有很多常见的puppeteer基本用法，这里不一一介绍，用到的时候去官方文档查看对应的API即可

Puppeteer进阶用法

模拟用户行为

点击元素

使用 element.click() 方法模拟点击元素：

await element.click();

在上面的代码中，我们使用 element.click() 方法模拟点击元素。

输入文本

使用 element.type() 方法输入文本：

await element.type('text');

在上面的代码中，我们使用 element.type() 方法输入文本。其中，text 参数是要输入的文本。

选择选项

使用 element.select() 方法选择选项：

await element.select('value');

在上面的代码中，我们使用 element.select() 方法选择选项。其中，value 参数是要选择的选项值。

滚动页面

使用 page.evaluate() 方法执行 JavaScript 代码来滚动页面：

const puppeteer = require('puppeteer');

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

  let previousHeight;
  while (true) {
    
    
    const currentHeight = await page.evaluate(() => {
    
    
      return document.documentElement.scrollHeight;
    });
    if (currentHeight === previousHeight) {
    
    
      break;
    }
    previousHeight = currentHeight;
    await page.evaluate(() => {
    
    
      window.scrollBy(0, window.innerHeight);
    });
    await page.waitForTimeout(1000);
  }

  const content = await page.$('#content');
  console.log(await content.textContent());

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

在上面的代码中，我们使用 Puppeteer 打开一个需要滚动的网页，并模拟滚动操作，直到页面滚动到底部，然后获取页面中的内容。

处理动态内容

等待元素出现

使用 page.waitForSelector() 方法等待元素出现：

await page.waitForSelector('selector');

在上面的代码中，我们使用 page.waitForSelector() 方法等待元素出现。

其中，selector 参数可以是 CSS 选择器、XPath 表达式或者其他选择器。

等待页面加载完成

使用 page.waitForNavigation() 方法等待页面加载完成：

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

在上面的代码中，我们使用 page.goto() 方法打开一个网页，并使用 page.waitForNavigation() 方法等待页面加载完成。

处理验证码

Puppeteer 可以通过打码平台来识别验证码。以下是一个使用打码平台的示例：

const antiCaptcha = require('anticaptcha');
const client = new antiCaptcha('API_KEY');

const image = await page.screenshot({
    
     encoding: 'base64' });
const taskId = await client.createTask({
    
    
  type: 'ImageToTextTask',
  body: image,
});

const solution = await client.getTaskSolution(taskId);
await page.type('#captcha', solution.text);

在上面的代码中，我们使用 page.screenshot() 方法获取验证码图片，并使用打码平台识别验证码，最后将识别结果输入到验证码输入框中。

处理登录

以下是一个使用 Puppeteer 处理登录的示例：

const puppeteer = require('puppeteer');

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

  await page.type('#username', 'your-username');
  await page.type('#password', 'your-password');
  await page.click('#login-button');

  await page.waitForNavigation();

  const content = await page.$('#content');
  console.log(await content.textContent());

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

在上面的代码中，我们使用 page.goto() 方法打开登录页面，并使用 page.type() 方法输入用户名和密码，最后使用 page.click() 方法提交登录表单，然后获取页面中的内容。

定时爬取

puppeteer可以实现定时爬取数据，以下是一个使用 Puppeteer 配合 node-schedule 实现定时爬取的示例：

const puppeteer = require('puppeteer');
const schedule = require('node-schedule');

// 每隔一段时间执行一次爬取数据函数
const job = schedule.scheduleJob('自动爬虫任务', '30 20 * * * *', async () => {
    
    
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com');
  
  // 模拟滚动到页面底部
  await page.evaluate(async () => {
    
    
    await new Promise(resolve => {
    
    
      let totalHeight = 0;
      const distance = 100;
      const timer = setInterval(() => {
    
    
        const scrollHeight = document.body.scrollHeight;
        window.scrollBy(0, distance);
        totalHeight += distance;

        if (totalHeight >= scrollHeight) {
    
    
          clearInterval(timer);
          resolve();
        }
      }, 100);
    });
  });
  
  // 等待列表加载完成
  await page.waitForSelector('.list-item');
  
  // 获取列表数据
  const listItems = await page.$$('.list-item');
  const data = await Promise.all(listItems.map(async listItem => {
    
    
    const title = await listItem.$eval('.title', el => el.textContent);
    const description = await listItem.$eval('.description', el => el.textContent);
    return {
    
     title, description };
  }));
  
  console.log(data);
  
  await browser.close();
});

// 取消定时任务
// job.cancel();

在这个示例中，我们使用node-schedule库创建了一个定时任务，每小时的0分执行一次。在任务中包含了获取数据的代码，与前面的示例类似。如果需要取消定时任务，可以使用job.cancel()方法。

自动化测试

Puppeteer 可以用于自动化测试，以下是一个使用 Puppeteer 进行自动化测试的示例：

const puppeteer = require('puppeteer');

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

  const title = await page.title();
  if (title !== 'Example Domain') {
    
    
    console.error('Title is not correct');
  }

  const url = await page.url();
  if (url !== 'https://example.com/') {
    
    
    console.error('URL is not correct');
  }

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

在上面的代码中，我们使用 Puppeteer 打开一个网页，并检查页面标题和 URL 是否正确。

实战案例

CSDN作者榜

我们打开网址https://blog.csdn.net/rank/list/total来看看CSDN作者总榜
在这里插入图片描述

还是和静态页面一样，我们来分析一下页面结构，找到我们想要拿到的数据：

在这里插入图片描述

下面我们来用puppeteer来实现爬取这个作者榜：

// 无头浏览器模块
const puppeteer = require("puppeteer");
const fs = require('fs');

// 目标页面
const crawlPage = "https://blog.csdn.net/rank/list/total";

// 网页爬虫
(async function crawler() {
    
    
    //创建实例
    const browser = await puppeteer.launch({
    
    
        //无浏览器界面启动
        headless: "new",
        //放慢浏览器执行速度，方便测试观察
        slowMo: 100,
        // 设置打开的浏览器窗口尺寸
        defaultViewport: {
    
     width: 960, height: 540 },
    });

    // 新开一个tab页面
    const page = await browser.newPage();
    // 加载目标页，在 500ms 内没有任何网络请求才算加载完
    await page.goto(crawlPage, {
    
     waitUntil: "networkidle0" });

    // 在无头浏览器页面dom环境，获取页面数据
    const authorList = await page.evaluate(() => {
    
    
        const list = [];
        document.querySelectorAll(".floor-rank-total .floor-rank-total-item").forEach((ele) => {
    
    
            const rank = ele.querySelector(".total-content .number").innerText;
            const title = ele.querySelector(".total-box dd a").innerText;
            const fans = ele.querySelector(".total-box dt span:nth-child(1)").innerText;
            list.push({
    
    
                '排名': rank,
                '作者': title,
                '粉丝': fans,
            });
        });
        return list;
    });

    // console.log(authorList);
    // 将数据写入文件中
    fs.writeFile('./csdnAuthor.json', JSON.stringify(authorList), function (err, data) {
    
    
        if (err) {
    
    
            throw err
        }
        console.log('文件保存成功');
    })

    // 关闭tab页
    await page.close();
    // 关闭实例
    await browser.close();
})();

看看json文件里有什么吧：

在这里插入图片描述

没有问题，成功拿到了我们想要的CSDN作者总榜页面的排名、作者和粉丝数量！

掘金小册

掘金小册的内容质量非常高，推荐大家可以去看一看，接下来我们来爬取一下目前发布所有的掘金小册

我们来分析一下掘金小册的页面结构，我们想要拿到的数据有：小册名称、小册简介、小册作者、小册价格

在这里插入图片描述

我们来用puppeteer来实现爬取，要注意的是掘金小册页面不会全部加载所有小册，因此我们需要用puppeteer模拟用户行为，将页面列表滚动到最底部，加载完所有的小册列表数据后再进行爬取：

// 无头浏览器模块
const puppeteer = require("puppeteer");
const fs = require('fs')

// 目标页面
const crawlPage = "https://juejin.cn/course";

// 网页爬虫
(async function crawler() {
    
    
    //创建实例
    const browser = await puppeteer.launch({
    
    
        //无浏览器界面启动
        headless: "new",
        //放慢浏览器执行速度，方便测试观察
        // slowMo: 100,
        // 设置打开的浏览器窗口尺寸
        defaultViewport: {
    
     width: 960, height: 540 },
    });

    // 新开一个tab页面
    const page = await browser.newPage();
    // 加载目标页，在 500ms 内没有任何网络请求才算加载完
    await page.goto(crawlPage, {
    
     waitUntil: "networkidle0" });

    // 模拟滚动到页面底部
    await page.evaluate(async () => {
    
    
        await new Promise((resolve) => {
    
    
          let totalHeight = 0;
          const distance = 200;
          const timer = setInterval(() => {
    
    
            const scrollHeight = document.body.scrollHeight;
            window.scrollBy(0, distance);
            totalHeight += distance;
    
            if (totalHeight >= scrollHeight) {
    
    
              clearInterval(timer);
              resolve();
            }
          }, 200);
        });
    });

    // 等待列表加载完成
    await page.waitForSelector('.books-view');

    // 在无头浏览器页面dom环境，获取页面数据
    const articleList = await page.evaluate(() => {
    
    
        const list = [];
        const itemSelector = ".books-view > div:last-child > div > div > a";
        document.querySelectorAll(itemSelector).forEach(async(ele) => {
    
    
            const title = await ele.querySelector(".book-info .text-highlight").innerText;
            const desc = await ele.querySelector(".book-info .text-highlight.desc").innerText;
            const author = await ele.querySelector(".book-info .author .name").innerText;
            const price = await ele.querySelector(".book-info .other .origin-price").innerText;
            list.push({
    
    
                '小册名称': title,
                '小册简介': desc,
                '小册作者': author,
                '小册价格': price,
            });
        });
        return list;
    });

    // console.log(articleList);
    // 将数据写入文件中
    fs.writeFile('./xiaoce.json', JSON.stringify(articleList), function (err, data) {
    
    
        if (err) {
    
    
            throw err
        }
        console.log('文件保存成功');
    })

    // 关闭tab页
    await page.close();
    // 关闭实例
    await browser.close();
})();

保存的JSON文件数据如下，可以看到成功获取了所有小册数据：

在这里插入图片描述

模拟登录

我们通过 cookie 模拟登录环境，我们去谷歌应用商店下载一个插件 “Export cookie JSON file for Puppeteer”

这个 chrome 插件直接获取 cookie 信息

在这里插入图片描述

然后运行这个插件，下载CSDN cookie的json文件，代码很简单：

const puppeteer = require("puppeteer");
// 通过 插件 获取的 JSON化 cookie
const cookieObjects = require("./csdn.net.cookies.json");

(async () => {
    
    
  const browser = await puppeteer.launch({
    
     headless: false });
  const page = await browser.newPage();
  await page.setViewport({
    
     width: 1400, height: 1080 });

  cookieObjects.forEach((cookie) => {
    
    
    page.setCookie(cookie);
  });
  await page.goto("https://www.csdn.net/");
})()

运行程序，自动打开浏览器，模拟登录成功：

在这里插入图片描述

总结

Puppeteer 是一个功能强大的 Node.js 库，可以用于控制 Chrome 或者 Chromium 浏览器，实现自动化测试、爬虫、网页截图等功能。以下是 Puppeteer 的一些优点和缺点：

优点

功能强大：Puppeteer 支持大部分 Chrome DevTools 协议中的功能，包括页面截图、模拟用户操作、处理动态内容等。
易于使用：Puppeteer 的 API 设计简单易用，上手容易。
可扩展性强：Puppeteer 可以与其他 Node.js 库和工具集成，扩展其功能。
社区活跃：Puppeteer 有一个活跃的社区，可以获取到大量的文档、教程和示例。

缺点

依赖 Chrome 或者 Chromium 浏览器：Puppeteer 需要依赖 Chrome 或者 Chromium 浏览器才能运行，这会导致一定的资源占用。
不支持其他浏览器：Puppeteer 只支持 Chrome 和 Chromium 浏览器，不支持其他浏览器。
可能被网站检测到：由于 Puppeteer 可以模拟用户行为，因此有些网站可能会检测到 Puppeteer 的使用并阻止其访问。

总的来说，Puppeteer 是一个非常有用的工具，可以帮助开发人员和测试人员提高工作效率。

如果需要进行自动化测试、爬虫或者网页截图等操作，Puppeteer 是一个值得尝试的工具。

未来发展

随着互联网技术的发展和应用场景的不断扩大，爬虫技术将会得到更广泛的应用和更深入的研究。

以下是爬虫技术未来的一些发展方向：

智能化：随着人工智能技术的发展，我们可以将人工智能技术应用到爬虫技术中，使得爬虫可以自主学习和适应不同的网站结构。
安全性：随着网站安全性的提升，一些网站可能会采取更加复杂和严格的反爬虫机制。因此，未来的爬虫技术需要更加注重安全性和隐私保护。
大数据：随着大数据技术的发展，我们可以将爬虫技术与大数据技术相结合，用于数据分析和挖掘。
分布式：随着云计算技术的发展，分布式爬虫将会成为未来的趋势，可以更加高效地抓取大量数据。

总之，爬虫技术在未来将会得到更广泛和深入的应用，并且将会不断地发展和完善。