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的应用场景

模拟用户操作： Puppeteer可以模拟用户在浏览器中的各种操作，如点击、输入表单、页面导航等。你可以通过编写代码来自动化执行这些操作，轻松模拟用户行为；
屏幕截图和PDF生成： Puppeteer可以帮助你捕获网页的屏幕截图或生成PDF文件；
网页内容抓取： Puppeteer可以加载网页并提取其中的文本、图像、链接等内容；
表单自动填充和提交： Puppeteer可以模拟用户的交互操作，自动填写表单字段并触发提交操作；
性能监测和分析： Puppeteer可以帮助你评估网页的性能指标，如加载时间、资源使用情况等。你可以使用这些工具来发现性能瓶颈、进行优化并监测改进效果；
网页自动化测试： Puppeteer可以模拟用户的操作并与网页进行交互，你可以编写测试脚本，让Puppeteer自动加载网页、执行操作，并验证网页的行为和结果是否符合预期。

以上是Puppeteer的一些常见的应用场景，由于其强大的功能和灵活性，你可以使用Puppeteer完成各种与网页操作和自动化相关的任务。

Puppeteer的安装

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

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

Bash 复制代码

node node_modules/puppeteer/install.js

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

Bash 复制代码

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

Puppeteer的使用

不考虑复杂的网页，简单实现的截图：

JavaScript 复制代码

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

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

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