简介

Puppeteer 是一个控制 headless Chrome 的 Node.js API 。它是一个 Node.js 库，通过 DevTools 协议提供了一个高级的 API 来控制 headless Chrome。它还可以配置为使用完整的（非 headless）Chrome，由Google开源提供。

其实简单理解就是日常我们使用Chrome浏览器手动完成的事情，现在通过Puppeteer提供的JS API接口就可实现无界面浏览器操作完成。

?Star：69K+

项目地址：https://github.com/puppeteer/puppeteer

功能

• 生成屏幕截图和 PDF 页面。
• 检索 SPA 并生成预渲染内容（即“SSR”）。
• 自动提交表单，UI测试，键盘输入等。
• 自动化测试。使用最新的 JavaScript ，在最新版本的 Chrome 中直接运行测试。
• 爬虫工具，从网站上爬取内容。
• 捕获网站的时间线跟踪，以帮助诊断性能问题。

安装

安装Puppeteer 前需要保证所在系统已安装nodejs与npm。然后在要使用的项目中执行命令：

npm i puppeteer
# or "yarn add puppeteer"

注：当在install安装Puppeteer时，它会下载Chromium的最新版本（~170MB Mac、~282MB Linux、~280MB Win），保证可以与API一起使用。

演示

下面简单列举几个实现案例：

案例一，实现打开百度，并保存截图。

将下面代码保存example1.js 文件中。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com/');
  await page.screenshot({ path: 'example.png' });

  await browser.close();
})();

在命令行执行脚本：

node example1.js

执行完成后，就会生成对应页面截图，本案例中运行后生成截图如下：

截图打开内容：

Puppeteer默认初始页面大小为800×600px，这定义了屏幕截图的大小。当然页面大小可以通过Page.setViewport()进行设置。

案例二，实现用iPhone 6打开百度首页，并保存截图。

将下面代码保存example2.js文件中。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.emulate(puppeteer.devices['iPhone 6']);   //指定网面打开运行设备环境
  await page.goto('https://www.baidu.com/');
  await page.screenshot({ path: 'F:/puppeteer/baiduOfIPhone.png', fullPage: true });
  await browser.close();
})();

在命令行执行脚本：

node example2.js

执行完成后，就会生成对应页面截图，如下：

截图内容：

注：与案例一不同的是使用page.emulate指定运行设备环境。具体有哪些设备，可以在下面的地址中找到设备的实际列表。

 https://github.com/puppeteer/puppeteer/blob/main/src/DeviceDescriptors.ts

案例三，实现打开新闻网址，并保存为pdf文件。

将下面代码保存example3.js文件中。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://m.thepaper.cn/baijiahao_11586547', {
    waitUntil: 'networkidle2',
  });
  await page.pdf({ path: 'F:/puppeteer/news.pdf', format: 'a4' });

  await browser.close();
})();

在命令行执行脚本：

node example3.js

执行完成后，就会生成对应页面截图，如下：

pdf文件内容：

总结

以上只是用Puppeteer实现的几个简单的功能案例，其实Puppeteer作为Google 出品的前端利器，想象空间是很大的，尤其是在爬虫、自动化测试等方面都是很好的利器，而且跟其他测试工具不同，它不再是模拟Chrome浏览器执行引擎再去渲染，而是一个真正在运行的浏览器，只是移除了真实的界面渲染。

最后给大家再分享一个Puppeteer中文API：

https://learnku.com/docs/puppeteer/3.1.0

感兴趣的同学，记得点赞[赞]并“关注”[握手]本头条哦。