如何使用Puppeteer在Node JS服务器上实现动态网页抓取

原创

jackcode

发布于 2023-08-24 15:58:47

5540

发布于 2023-08-24 15:58:47

文章被收录于专栏：爬虫资料爬虫资料

导语

动态网页抓取是指通过模拟浏览器行为，获取网页上的动态生成的数据，如JavaScript渲染的内容、Ajax请求的数据等。动态网页抓取的难点在于如何处理网页上的异步事件，如点击、滚动、等待等。Puppeteer是一个基于Node JS的库，它提供了一个高级的API，可以控制Chrome或Chromium浏览器，实现动态网页抓取。本文将介绍如何使用Puppeteer在Node JS服务器上实现动态网页抓取，并给出一个简单的案例。

概述

Puppeteer的核心功能是提供了一个Browser类，它可以启动一个Chrome或Chromium浏览器实例，并返回一个Browser对象。Browser对象可以创建多个Page对象，每个Page对象对应一个浏览器标签页，可以用来加载和操作网页。Page对象提供了一系列的方法，可以模拟用户的各种行为，如输入、点击、滚动、截图、PDF等。Page对象还可以监听网页上的事件，如请求、响应、错误、加载等。通过这些方法和事件，可以实现对动态网页的抓取。

正文

要使用Puppeteer进行动态网页抓取，首先需要安装Puppeteer库。可以通过npm或yarn来安装：

// 使用npm安装
npm i puppeteer

// 使用yarn安装
yarn add puppeteer

安装完成后，就可以在Node JS代码中引入Puppeteer库，并使用它来启动浏览器和创建页面：

// 引入puppeteer库
const puppeteer = require('puppeteer');

// 启动浏览器并创建页面
(async () => {
  // 启动浏览器，可以传入一些选项，如无头模式、代理等
  const browser = await puppeteer.launch({
    headless: false, // 是否无头模式，默认为true
    args: ['--proxy-server=http://username:password@domain:port'] // 设置代理服务器，使用亿牛云爬虫代理的域名、端口、用户名、密码
  });

  // 创建页面
  const page = await browser.newPage();
})();

创建页面后，就可以使用page对象的方法来加载和操作网页。例如，可以使用page.goto(url)方法来访问一个网址，并等待网页加载完成：

// 访问一个网址，并等待网络空闲（即没有超过500ms的请求）
await page.goto('https://www.example.com', {waitUntil: 'networkidle0'});

然后，可以使用page.evaluate(pageFunction, ...args)方法来在浏览器中执行一些JavaScript代码，并返回结果。例如，可以获取网页上的某个元素的文本内容：

// 获取网页上的h1元素的文本内容
const h1Text = await page.evaluate(() => {
  return document.querySelector('h1').textContent;
});

除了evaluate方法外，page对象还提供了一些其他的方法来获取和操作网页上的元素，如page.$(selector)、page.$$(selector)、page.click(selector)、page.type(selector, text)等。例如，可以模拟用户在搜索框中输入关键词，并点击搜索按钮：

// 在搜索框中输入关键词
await page.type('#search-input', 'puppeteer');

// 点击搜索按钮
await page.click('#search-button');

有时候，我们需要等待一些异步事件发生后再进行下一步操作，如等待某个元素出现、等待某个请求完成等。这时候，我们可以使用page.waitFor(selectorOrFunctionOrTimeout, options, ...args)方法来设置等待条件。例如，可以等待搜索结果的列表出现后再获取其内容：

// 等待搜索结果的列表出现
await page.waitFor('#search-results');

// 获取搜索结果的列表的文本内容
const resultsText = await page.evaluate(() => {
  return document.querySelector('#search-results').textContent;
});

最后，当我们完成了对网页的抓取，我们可以使用page.screenshot(options)或page.pdf(options)方法来保存网页的截图或PDF文件。例如，可以将网页保存为png格式的图片：

// 将网页保存为png格式的图片
await page.screenshot({path: 'example.png'});

当我们不再需要浏览器和页面时，我们可以使用browser.close()方法来关闭浏览器：

// 关闭浏览器
await browser.close();

案例

下面给出一个简单的案例，使用Puppeteer在Node JS服务器上实现动态网页抓取。该案例的目标是访问百度首页，输入关键词“puppeteer”，点击搜索按钮，等待搜索结果出现，并将搜索结果的第一条链接的标题和网址保存到一个文件中。

// 引入puppeteer库和fs库（用于文件操作）
const puppeteer = require('puppeteer');
const fs = require('fs');

// 定义一个异步函数，用于执行动态网页抓取
(async () => {
  // 启动浏览器，设置代理服务器为亿牛云爬虫代理的域名、端口、用户名、密码
  const browser = await puppeteer.launch({
    args: ['--proxy-server=http://16YUN:16IP@www.16yun.cn:3100']
  });

  // 创建页面
  const page = await browser.newPage();

  // 访问百度首页，并等待网络空闲
  await page.goto('https://www.baidu.com', {waitUntil: 'networkidle0'});

  // 在搜索框中输入关键词“puppeteer”
  await page.type('#kw', 'puppeteer');

  // 点击搜索按钮
  await page.click('#su');

  // 等待搜索结果的列表出现
  await page.waitFor('#content_left');

  // 获取搜索结果的第一条链接的标题和网址
  const firstResult = await page.evaluate(() => {
    // 获取第一条链接的元素
    const firstLink = document.querySelector('#content_left .result.c-container a');
    // 返回标题和网址
    return {
      title: firstLink.innerText,
      url: firstLink.href
    };
  });

  // 将标题和网址保存到一个文件中
  fs.writeFileSync('result.txt', `${firstResult.title}\n${firstResult.url}`);

  // 关闭浏览器
  await browser.close();
})();