谷歌 Puppeteer 爬虫工具初体验（可用于H5截图预览）

2024-03-01 22:10
文章标签 工具 用于 谷歌 爬虫 预览 h5 截图 puppeteer 初体验

本文主要是介绍谷歌 Puppeteer 爬虫工具初体验（可用于H5截图预览），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

https://segmentfault.com/a/1190000014403160

随着网络的迅速发展，因特网已经成为大量信息的载体，如何有效地提取并利用这些信息成为一个巨大的挑战。搜索引擎(Search Engine) —— 例如传统的通用搜索引擎 Baidu 和 Google等，作为一个辅助人们检索信息的工具成为用户访问因特网的入口和指南。但是，通用性搜索引擎也存在着一定的局限性，如：通用搜索引擎所返回的结果包含大量用户不关心的网页、大多提供基于关键字的检索，难以支持根据语义信息提出的查询等。

为了解决上述问题，定向抓取相关网页资源的聚焦爬虫应运而生。聚焦爬虫是一个自动下载网页的程序，它根据既定的抓取目标，有选择的访问万维网上的网页与相关的链接，获取所需要的信息。与通用爬虫(general purpose web crawler)不同，聚焦爬虫并不追求大的覆盖，而将目标定为抓取与某一特定主题内容相关的网页，为面向主题的用户查询准备数据资源。

Puppeteer 是什么

Puppeteer 是由谷歌官方团队所开发维护的一个 node 库，它提供了一组用来操纵 Chrome 或 Chromium(即无 UI 的 Chrome) 浏览器的 API。

Puppeteer 的直译意思为傀儡师，意在我们可以通过 Puppeteer 来像操纵傀儡一样操纵浏览器去获取我们特定想要的信息。

Puppeteer 的功能

我们在浏览器中手动完成的大部分事情都可以用 Puppeteer 来完成。本文将采用下面几个例子来让你快速上手：

  • 捕捉网页快照，生成PDF、图片等
  • 爬取SPA应用，并生成预渲染内容（即“SSR” - 服务端渲染）
  • 创建测试用例，实现自动化测试，如表单提交、UI测试、键盘输入等
  • 捕获站点的时间线，以便追踪你的网站，帮助分析网站性能

Puppeteer 安装与使用

1. 安装

理论上 Puppeteer 的安装非常简单，就像我们去安装任意的一个 npm 包。
你只需要在你的项目目录的控制台里运行如下代码：

npm i --save puppeteer//或yarn add --save puppeteer

由于国内大环境（你懂的 |-_-| ），我们使用以上代码安装的时候，经常会出错：

ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOA
D" env variable to skip download.

这通常是由于 Chromium 浏览器未正常下载到而引起的。这个时候，我们可以先设定环境变量，跳过安装 Chromium 的步骤，然后手动翻墙去下载：

set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1

下载完毕后，运行 Chromium 安装包（切记：Mac 系统需要将该应用拷贝到应用程序中！），然后在代码里做如下配置即可：

(async () => {const browser = await puppeteer.launch({executablePath: '/Applications/Chromium.app/Contents/MacOS/Chromium', //   以 Mac 版本为例，注意：路径并不是截止到 .app ！// ... (其他一些配置)});
})();

也许会有人疑问，为啥不用 cnpm 来安装呢？一看就是聪明的宝宝，配置好淘宝源路径之后，使用

cnpm i --save puppeteer

安装，更适合无法出柜的宝宝，期间要下载 74M 左右的 Chromium ，请您耐心等待。

2. 常用语法

本文只对一些特别特别常用的方法进行介绍，有其他需求请戳 Puppeteer 官方KPI。

您也可以直接跳过此模块，直接阅读下方示例，有个更直观的了解。

Puppeteer 的每一步操作都是一个异步请求，因此要用到 generator 的语法糖 async 和 await。

1）puppeteer.launch()

【作用】：启动浏览器。

【返回值】：promise。

【常用参数】：

  • headless

    是否开启浏览器的无头模式。默认值为 true。设为 false 后，抓包的时候，浏览器将打开可见，否则不可见。

  • executablePath

    设置执行抓包的浏览器的路径。默认会查找 node_modules/puppeteer/.local-chromium 路径。可手动自行配置。数据类型为字符串。

  • timeout

    等待浏览器实例启动的最大毫秒数，超过这个时间则报超时错误。默认为 30000。设为 0 则禁用此项参数。数据类型为 Number。

2）browser.newPage()

【作用】：开启浏览器新窗口。

【返回值】：promise。

3）page.setViewport()

【作用】：配置窗口信息。

【返回值】：promise。

  • width

    窗口的宽度。单位为 px 。

  • height

    窗口的高度。单位为 px 。

  • deviceScaleFactor

    设备实际缩放比。默认值为 1 。

  • isMobile

    是否开启手机模式。默认为 false 。

  • hasTouch

    是否支持 touch 事件。默认为 false 。

  • isLandscape

    是否开启横屏模式。默认为 false 。

4）page.goto(url, options)

【作用】：当前窗口加载固定 url 地址页。url 需要以 https 开头。

【返回值】：promise。

5）page.waitFor()

【作用】：当前代码等待某某条件成功后继续执行后面代码。

【返回值】：promise。

该方法的参数有很多种，通常我们只需要传入毫秒数即可，程序会暂停我们指定的时间，然后再继续执行后面的代码。

6）page.waitForSelector()

【作用】：当前代码等待页面渲染出某个 DOM 元素后继续执行后面代码。

【返回值】：promise。

7）page.$()

【作用】：获取当前页面的某个元素，类似于 document.querySelector() ，如果找不到，则返回 null 。

【返回值】：promise <ELement>。

8）page.$$()

【作用】：获取当前页面的某类元素，类似于 document.querySelectorAll() ，如果找不到，则返回一个空数组。

【返回值】：promise <Array>。

9）page.$eval(selector, pageFunction[, ...args])

【作用】：获取当前页面的某个元素，然后在 pageFunction 里面对获取的元素进行处理。

【返回值】：promise。

10）page.$$eval(selector, pageFunction[, ...args])

【作用】：获取当前页面的某类元素，然后在 pageFunction 里面对获取的元素数组进行处理。

【返回值】：promise。

11）browser.close()

【作用】：关闭所有浏览器窗口并退出 Chromium 浏览器。Browser 对象也将会被销毁。

【返回值】：promise。

以上就是我们经常用到的一些方法，接下来，我们将通过示例获取更直观的体验。

不上代码强撸问题都是耍流氓

药～药～切开脑～煎饼果子来一套！

1. 捕捉网页快照，生成PDF、图片等

我们以阮一峰老师的 ECMAScript 6 入门 网页为目标 URL ,并生成一组 pdf 文件。

const URL = 'http://es6.ruanyifeng.com';const puppeteer = require('puppeteer');
const fs = require('fs');fs.mkdirSync('es6-pdf');(async () => {let browser = await puppeteer.launch();let page = await browser.newPage();await page.goto(URL);await page.waitFor(5000); // 等待五秒，确保页面加载完毕// 获取左侧导航的所有链接地址及名字let aTags = await page.evaluate(() => {let eleArr = [...document.querySelectorAll('#sidebar ol li a')];return eleArr.map((a) =>{return {href: a.href.trim(),name: a.text}});});// 先将本页保存成pdf，并关闭本页console.log('正在保存：0.' + aTags[0].name);await page.pdf({path: `./es6-pdf/0.${aTags[0].name}.pdf`});// 遍历节点数组，逐个打开并保存 (此处不再打印第一页)for (let i = 1, len = aTags.length; i < len; i++) {let a = aTags[i];console.log('正在保存：' + i + '.' + a.name);page = await browser.newPage();await page.goto(a.href);await page.waitFor(5000);await page.pdf({path: `./es6-pdf/${i + '.' + a.name}.pdf`});}browser.close();
})();

运行结果：

2. 实现自动化测试

我们以简单的测试汽车之家 iphone X 手机下随意选取一款车，然后询价为例：

const URL = 'https://m.autohome.com.cn/';const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone X'];
const fs = require('fs');fs.mkdirSync('screenshot');(async () => {let browser = await puppeteer.launch({headless: false // 无头模式});let page = await browser.newPage();await page.emulate(iPhone);await page.goto(URL);await page.waitFor(3000);await page.screenshot({path: 'screenshot/1.png'});await page.tap('body > section.wrapper > section.recommend-auto.fn-mt > div:nth-child(2) > div.brand.activate > a:nth-child(1)');await page.waitFor(3000);await page.screenshot({path: 'screenshot/2.png'});await page.tap('body > section > div.abc > section.findercar-brandcore > ul:nth-child(2) > li:nth-child(1) > a');await page.waitFor(3000);await page.screenshot({path: 'screenshot/3.png'});await page.tap('body > section.summary-console > a');await page.waitFor(3000);await page.screenshot({path: 'screenshot/4.png'});await page.type('body > section > section:nth-child(1) > section > dl.form-dl > dd:nth-child(2) > p.textcard.finish > input', '测试人员', {delay: 200});await page.type('#userPhone', '13333333333', {delay: 200});await page.screenshot({path: 'screenshot/5.png'});await page.tap('body > section > section:nth-child(1) > section > div.linkcont.js-linkbtn > a');await page.waitFor(3000);await page.screenshot({path: 'screenshot/6.png'});browser.close();
})();

运行截图：

由于最终提交询价资料的时候，网站做了智能验证，所以无法自动提交成功，但整体流程我们都通过截图一步步保存了下来，让我们的测试更加方便、有理有据，便于撕逼。

3. 分析网站性能

我们以测试汽车之家 iphone X 手机下主页的性能为例：

const URL = 'https://m.autohome.com.cn/';const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone X'];
const fs = require('fs');fs.mkdirSync('performance');(async () => {let browser = await puppeteer.launch();let page = await browser.newPage();await page.emulate(iPhone);await page.tracing.start({path: 'performance/trace.json'});await page.goto(URL);await page.tracing.stop();browser.close();
})();

将 performance/trace.json 拖到 Chrome 浏览器的 performance 窗口下查看性能火山图：

 

总结

Puppeteer 的功能远不止于此，笔者在本文中只是列举了几个最简单最常用的例子。大家有兴趣，欢迎深入研究并分享，独乐乐不如众乐乐。

参考文献

  • 百度百科 - 网络爬虫
  • Puppeteer 官方 github 库

这篇关于谷歌 Puppeteer 爬虫工具初体验（可用于H5截图预览）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/763988。

相关文章

高效录音转文字：2024年四大工具精选！

高效录音转文字：2024年四大工具精选！

在快节奏的工作生活中，能够快速将录音转换成文字是一项非常实用的能力。特别是在需要记录会议纪要、讲座内容或者是采访素材的时候，一款优秀的在线录音转文字工具能派上大用场。以下推荐几个好用的录音转文字工具！ 365在线转文字 直达链接：https://www.pdf365.cn/ 365在线转文字是一款提供在线录音转文字服务的工具，它以其高效、便捷的特点受到用户的青睐。用户无需下载安装任何软件，只
阅读更多...
【Linux 从基础到进阶】Ansible自动化运维工具使用

【Linux 从基础到进阶】Ansible自动化运维工具使用

Ansible自动化运维工具使用 Ansible 是一款开源的自动化运维工具，采用无代理架构（agentless），基于 SSH 连接进行管理，具有简单易用、灵活强大、可扩展性高等特点。它广泛用于服务器管理、应用部署、配置管理等任务。本文将介绍 Ansible 的安装、基本使用方法及一些实际运维场景中的应用，旨在帮助运维人员快速上手并熟练运用 Ansible。 1. Ansible的核心概念
阅读更多...
EasyPlayer.js网页H5 Web js播放器能力合集

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求，要求做一款播放器，发现能力上跟EasyPlayer.js基本一致，满足要求： 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏（单屏/全屏） 多分屏（2*2） 多分屏（3*3） 多分屏（4*4） 播放控制 播放（单个或全部） 暂停（暂停时展示最后一帧画面） 停止（单个或全部） 声音控制（开关/音量调节） 主辅码流切换 辅助功能 屏
阅读更多...
超强的截图工具：PixPin

超强的截图工具：PixPin

你是否还在为寻找一款功能强大、操作简便的截图工具而烦恼？市面上那么多工具，常常让人无从选择。今天，想给大家安利一款神器——PixPin，一款真正解放双手的截图工具。 想象一下，你只需要按下快捷键就能轻松完成多种截图任务，还能快速编辑、标注甚至保存多种格式的图片。这款工具能满足这些需求吗？ PixPin不仅支持全屏、窗口、区域截图等基础功能，它还可以进行延时截图，让你捕捉到每个关键画面。不仅如此
阅读更多...
Python3 BeautifulSoup爬虫 POJ自动提交

Python3 BeautifulSoup爬虫 POJ自动提交

POJ 提交代码采用Base64加密方式 import http.cookiejarimport loggingimport urllib.parseimport urllib.requestimport base64from bs4 import BeautifulSoupfrom submitcode import SubmitCodeclass SubmitPoj():de
阅读更多...
Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中，在进行一些平板等默认横屏的设备开发的过程中，需要在进入camera2的 时候，默认预览图像也是需要横屏显示的，在上一篇已经实现了横屏预览功能，然后发现横屏预览后，拍照保存的图片 依然是竖屏的，所以说同样需要将图片也保存为横屏图标了，所以就需要看下mtk的camera2的相关横屏保存图片功能， 如何实现实现横屏保存图片功能 如图所示: 2.mtk
阅读更多...
PR曲线——一个更敏感的性能评估工具

PR曲线——一个更敏感的性能评估工具

在不均衡数据集的情况下，精确率-召回率（Precision-Recall, PR）曲线是一种非常有用的工具，因为它提供了比传统的ROC曲线更准确的性能评估。以下是PR曲线在不均衡数据情况下的一些作用： 关注少数类：在不均衡数据集中，少数类的样本数量远少于多数类。PR曲线通过关注少数类（通常是正类）的性能来弥补这一点，因为它直接评估模型在识别正类方面的能力。 精确率与召回率的平衡：精确率（Pr
阅读更多...
husky 工具配置代码检查工作流：提交代码至仓库前做代码检查

husky 工具配置代码检查工作流：提交代码至仓库前做代码检查

提示：这篇博客以我前两篇博客作为先修知识，请大家先去看看我前两篇博客 博客指路：前端 ESlint 代码规范及修复代码规范错误-CSDN博客前端 Vue3 项目开发—— ESLint & prettier 配置代码风格-CSDN博客 husky 工具配置代码检查工作流的作用 在工作中，我们经常需要将写好的代码提交至代码仓库 但是由于程序员疏忽而将不规范的代码提交至仓库，显然是不合理的 所
阅读更多...
Python：豆瓣电影商业数据分析-爬取全数据【附带爬虫豆瓣，数据处理过程，数据分析，可视化，以及完整PPT报告】

Python：豆瓣电影商业数据分析-爬取全数据【附带爬虫豆瓣，数据处理过程，数据分析，可视化，以及完整PPT报告】

**爬取豆瓣电影信息，分析近年电影行业的发展情况** 本文是完整的数据分析展现，代码有完整版，包含豆瓣电影爬取的具体方式【附带爬虫豆瓣，数据处理过程，数据分析，可视化，以及完整PPT报告】   最近MBA在学习《商业数据分析》，大实训作业给了数据要进行数据分析，所以先拿豆瓣电影练练手，网络上爬取豆瓣电影TOP250较多，但对于豆瓣电影全数据的爬取教程很少，所以我自己做一版。 目
阅读更多...
10个好用的AI写作工具【亲测免费】

10个好用的AI写作工具【亲测免费】

1. 光速写作 传送入口：http://u3v.cn/6hXWYa AI打工神器，一键生成文章&ppt 2. 讯飞写作 传送入口：http://m6z.cn/5ODiSw 3. 讯飞绘文 传送入口：https://turbodesk.xfyun.cn/?channelid=gj3 4. AI排版助手 传送入口：http://m6z.cn/6ppnPn 5. Kim
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2