关于前端:Puppeteer无头浏览器开启自动化之门掌握浏览器世界的无限可能

大略还是入门期，我曾用 Puppeteer 做爬虫工具以此来绕过某网站的防爬机制。近期有需要要做任意链接网页截图，像这种场景非常适合用 Puppeteer 实现。无头浏览器我已知的还有 Selenium。

实现截图需要踩的最大的坑不是具体的逻辑代码，而是 Docker 部署 Puppeteer 到服务器总是短少某个包。踩坑过程我想另外写一篇文章分享，所以这篇就单纯给读者介绍 Puppeteer 无头浏览器。

什么是 Puppeteer？

Puppeteer 是由 Google 开发和保护的一款弱小的 Node.js 库，它为开发人员提供了高级 API，以编程形式操控 Chromium 浏览器。与传统的浏览器自动化工具相比，Puppeteer 的独特之处在于它能够运行无头浏览器，即在没有 UI 界面的状况下运行浏览器实例。这意味着你能够在后盾运行浏览器，执行各种工作，而无需手动操作浏览器界面。

Puppeteer 的背地是 Chromium 浏览器，这是一款开源的浏览器我的项目，也是 Google Chrome 浏览器的根底。因而，Puppeteer 具备了与 Chrome 雷同的性能和兼容性。

Puppeteer 的设计指标是为开发者提供一种简略而直观的形式来自动化浏览器操作。它提供了丰盛的 API，能够轻松地进行页面导航、元素查找、表单填写、数据提取等操作。你能够编写脚本来模仿用户在浏览器中的操作，从而实现自动化测试、网页截图、数据爬取等工作。

此外，Puppeteer 还反对无头模式，这意味着浏览器在后盾运行，不会显示界面。这使得 Puppeteer 非常适合在服务器环境中运行，例如自动化测试的 CI/CD 流水线、数据挖掘和网络爬虫等场景。

Puppeteer 的利用场景

1. 模仿用户操作：Puppeteer 能够模仿用户在浏览器中的各种操作，如点击、输出表单、页面导航等。你能够通过编写代码来自动化执行这些操作，轻松模仿用户行为；
2. 屏幕截图和 PDF 生成：Puppeteer 能够帮忙你捕捉网页的屏幕截图或生成 PDF 文件；
3. 网页内容抓取：Puppeteer 能够加载网页并提取其中的文本、图像、链接等内容；
4. 表单主动填充和提交：Puppeteer 能够模仿用户的交互操作，主动填写表单字段并触发提交操作；
5. 性能监测和剖析：Puppeteer 能够帮忙你评估网页的性能指标，如加载工夫、资源应用状况等。你能够应用这些工具来发现性能瓶颈、进行优化并监测改良成果；
6. 网页自动化测试：Puppeteer 能够模仿用户的操作并与网页进行交互，你能够编写测试脚本，让 Puppeteer 主动加载网页、执行操作，并验证网页的行为和后果是否合乎预期。

以上是 Puppeteer 的一些常见的利用场景，因为其弱小的性能和灵活性，你能够应用 Puppeteer 实现各种与网页操作和自动化相干的工作。

Puppeteer 的装置

首先，node -v查看本地 Node.js 版本，官网要求版本在 14 以上。不满足要求的同学参考 Node.js 版本管理工具，我抉择 n 抉择适合的工具切换 Node.js 版本。

而后要有心理准备，当咱们 npm i puppeteer 装置 Puppeteer 时，它会顺带将 Chromium 浏览器装置。Chromium 浏览器几百 MB，下载绝对慢，而且经常性出错下载失败。如果失败，尝试执行些命令再次下载：

node node_modules/puppeteer/install.js

下载前，倡议将切换 npm 仓库源至国内：

npm config set registry https://registry.npm.taobao.org

Puppeteer 的应用

不思考简单的网页，简略实现的截图：

const puppeteer = require('puppeteer');
const path = require('path');
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url, { waitUntil: "domcontentloaded"});
await page.setViewport({width: 1280, height: 720});
await page.screenshot({path: path.resolve(__dirname, `./${Date.now()}.png`),
    type: 'png',
    fullPage: true
})
await browser.close()

几行代码，根本就能实现截图，当然没有思考网页图片等异步加载的资源状况。执行它就能失去一张截图。

如果执行报错：Could not find Chrome (ver. 116.0.5845.96). This can occur if either阐明 Chromium 没有装置。执行上述装置命令node node_modules/puppeteer/install.js

总结

Puppeteer 是一款无头浏览器工具，它为开发者们提供了一种弱小而灵便的形式来管制浏览器。通过模仿用户行为、截取屏幕截图、拦挡网络申请和进行自动化测试，Puppeteer 可能轻松应答各种开发工作。

如果我的文章对你有帮忙，您的👍就是对我的最大反对 ^_^。

欢送围观朋友圈、加我微信拉您退出 人类高质量前端交换群