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 能够轻松应对各种开发任务。

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

欢迎围观朋友圈、加我微信拉您加入人类高质量前端交流群