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的优势

  1. 完全支持最新的 Web 标准和技术:Puppeteer 支持最新的 Web 标准和技术,例如 ES6、Promise、async/await 等。这样,我们可以使用最新的 JavaScript 特性来编写爬虫代码,使代码更加简洁、易读、易维护。
  2. 支持动态网站的爬取:Puppeteer 可以处理 JavaScript 渲染的页面,也就是说它可以爬取动态网站,这是其他爬虫框架所不具备的优势。
  3. 可以模拟真实的用户行为:Puppeteer 可以模拟真实的用户行为,例如点击按钮、填写表单、滚动页面等。
  4. 可以生成 PDF 和截屏等多种格式的输出:Puppeteer 可以生成 PDF 和截屏等多种格式的输出,这对于需要对网站进行分析或者展示结果的情况非常有用。
  5. 可以与其他 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, // 是否以无头模式运行浏览器,默认为trueexecutablePath: '', // 可执行文件路径,如果不指定则自动下载args: [], // 命令行参数数组ignoreDefaultArgs: false, // 是否忽略默认的命令行参数defaultViewport: null, // 默认视窗大小,null表示自动设置slowMo: 0, // 延迟毫秒数,用于调试timeout: 30000, // 超时时间,单位为毫秒devtools: false, // 是否打开DevTools面板,默认为falsepipe: false, // 是否将浏览器启动的I/O连接通过管道传递,默认为falsehandleSIGINT: true, // 是否在收到SIGINT信号时关闭浏览器,默认为truehandleSIGTERM: true, // 是否在收到SIGTERM信号时关闭浏览器,默认为truehandleSIGHUP: true, // 是否在收到SIGHUP信号时关闭浏览器,默认为trueenv: {}, // 环境变量对象userDataDir: '', // 用户数据目录路径dumpio: false, // 是否将浏览器I/O输出到进程的stdout和stderr中,默认为falseexecutablePath: '', // 可执行文件路径,如果不指定则自动下载ignoreHTTPSErrors: false, // 是否忽略HTTPS错误,默认为falseignoreCertificateErrors: 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 是一个值得尝试的工具。

未来发展

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/53181.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python算法指南程序员经典,python算法教程pdf百度云

大家好,小编来为大家解答以下问题,你也能看懂的python算法书 pdf,python算法教程这本书怎么样,现在让我们一起来看看吧! 给大家带来的一篇关于算法相关的电子书资源,介绍了关于算法、详解、算法基础方面的内…

苹果电脑第三方应用程序卸载工具CleanMyMacX4.14

CleanMyMacX,这是一款可以帮助你快速识别并卸载电脑上的多个应用程序的第三方工具,省去了逐个卸载的繁琐步骤。 我们首先要到下载CleanMyMacX, CleanMyMac X全新版下载如下: https://wm.makeding.com/iclk/?zoneid49983 然后&#xff0c…

java如何将tif文件拆分为多个jpg文件,附jar包下载地址

1.在build.gradle中添加依赖: implementation group: javax.media, name: jai_codec, version: 1.1.3implementation group: com.sun, name: jai_core, version: 1.1.3implementation group: javax.media, name: jai_imageio, version: 1.1implementation xx.com.su…

TypeScript 类型断言

TypeScript 类型断言 简单来说类型断言就是 使用as关键词 强行指定获取到的结果类型 应用场景 // 类型断言: 强行指定获取到的结果类型// 应用场景// 页面上有一个 id 为 link 的 a 标签// 我们知道它是 a 标签// 但是 TS 不知道 // document.getElementById 的返回值是 HTMLE…

IDEA中maven项目失效,pom.xml文件橙色/橘色

IDEA中maven项目失效,pom.xml文件橙色/橘色 IDEA中Maven项目失效 IDEA中创建的maven项目中的文件夹都变成普通格式,pom.xml变成橙色 右键点击橙色的pom.xml文件,选择add as maven project maven项目开始重新导入相应依赖,恢复…

0基础学习VR全景平台篇 第78篇:全景相机-拍摄VR全景

新手入门圆周率科技,成立于2012年,是中国最早投身嵌入式全景算法研发的团队之一,亦是全球市场占有率最大的全景算法供应商。相继推出一体化智能屏、支持一键高清全景直播的智慧全景相机--Pilot Era和Pilot One,为用户带来实时畅享…

sheetJs / xlsx-js-style 纯前端实现导出 excel 表格及自定义单元格样式

文章目录 一、安装二、创建基础工作表三、设置单元格宽度/高度/隐藏单元格四、分配数字格式五、超链接六、单元格注释七、公式八、合并单元格九、自定义单元格样式十、项目地址 一、安装 xlsx 地址:https://www.npmjs.com/package/xlsxSheetJs 地址:htt…

配置GIt账号、配置公钥

1.设置账号和邮箱 打开终端输入以下命令: git config --global --unset-all user.name git config --global --unset-all user.email然后输入以下命令来设置新的账号和邮箱: git config --global user.name "your_username" git config --glo…

如何在终端设置代理(设置jupyter notebook同理)

设置代理 在终端(我用的gitbash)下执行 set HTTP_PROXYhttp://<user>:<password><proxy server>:<proxy port> set HTTPS_PROXYhttp://<user>:<password><proxy server>:<proxy port>其中&#xff1a; user、password&#…

ResNet50卷积神经网络输出数据形参分析-笔记

ResNet50卷积神经网络输出数据形参分析-笔记 ResNet50包含多个模块&#xff0c;其中第2到第5个模块分别包含3、4、6、3个残差块 5049个卷积&#xff08;3463)*31和一个全连接层 分析结果为&#xff1a; 输入数据形状:[10, 3, 224, 224] 最后输出结果&#xff1a;linear_0 [10,…

【Winform学习笔记(五)】引用自定义控件库(dll文件)

引用自定义控件库dll文件 前言正文1、生成dll文件2、选择工具箱项3、选择需要导入的dll文件4、确定需要导入的控件5、导入及使用 前言 在本文中主要介绍 如何引用自定义控件库(dll文件)。 正文 1、生成dll文件 通过生成解决方案 或 重新生成解决方案 生成 dll 文件 生成的…