1简介
Puppeteer是一个Node库，它提供了一个高级API来通过DevTools协议控制Chromium或Chrome。
Puppeteer默认以无头模式（headless）运行，也就是运行一个无界面的Chrome浏览器。
2应用场景
2.1页面生成PDF
Puppeteer提供了页面生成PDF的方法，我们可以利用这个方法来将页面导出为PDF，导出的PDF效果和Chrome浏览器打印功能导出的PDF一致。
具体的应用场景有：
报表导出PDF
在线文档导出PDF
2.2页面截图
Puppeteer提供了截图的方法，我们可以利用这个方法来将页面的指定区域导出为jpeg或png图片。
具体的应用场景有：
报表导出图片
在线文档导出图片
营销页面生成预览图、封面图
生成骨架屏图片
2.3服务端渲染
单页应用（SPA）的主要内容是在JavaScript向服务端请求数据后渲染的，存在爬虫难以抓取主要内容、首屏加载慢等问题，而使用、等服务端渲染框架改造的成本较高。
2.4自动化UI测试
使用Puppeteer可以模拟Chrome浏览器环境，结合JavaScript测试框架（如Jest）可以实现自动化UI测试。
2.5页面检测分析
使用Puppeteer提供的系列方法捕获网站的timelinetrace来对页面进行性能分析。
使用Puppeteer提供的系列方法来获取JavaScript和CSS覆盖率。
使用Puppeteer提供的()方法来获取某个时间点页面的指标数据，包括页面的documents数量、iframe数量、js事件数量、dom节点数量、布局数量、样式重新计算数量、布局时间、样式重新计算总时间、js代码执行总时间、任务执行总时间、占用堆内存大小、总的堆内存大小。
使用Puppeteer提供的Request类和Response类来监控页面发送的请求和接受的响应。
3基础概念
PuppeteerAPI是分层次的，反映了浏览器结构。
Puppeteer使用DevTools协议与浏览器进行通信。
Browser是浏览器实例，可以有多个浏览器上下文。
BrowserContext是浏览器上下文实例，定义了一个浏览会话并可拥有多个页面。
Page是页面实例，至少拥有一个框架（主框架mainFrame），可能还有由iframe创建的其他框架。
Frame是框架实例，至少有一个默认的JavaScript执行上下文。可能还有与扩展插件关联的执行上下文。
Worker表示一个WebWorker，具有单一执行上下文。
4快速上手
4.1安装puppeteer-core
npmipuppeteer-core
puppeteer-core是一个轻量级的Puppeteer版本，自1.7.0版本以来，官方都会发布一个puppeteer-core包，安装这个包时，默认不会下载Chromium。
4.2下载Chromium
Puppeteer官网：
chromium下载链接：
找到对应环境对应版本的chromium并下载。比如，我的环境是Win_x64，安装的Puppeteer是13.6.0版本，查看Puppeteer的版本记录，发现对应的chromium是982053。
4.3启动无头浏览器
在项目根目录下新建一个chrome目录，在chrome目录下新建win64-938248目录，将下载的chromium解压放入其中。
在项目根目录下新建一个src目录，在src目录下新建util目录，在util目录下新建文件。
"usestrict";constpuppeteer=require("puppeteer-core");constpath=require("path");constos=require("os");functiongetExecutableFilePath(){constextraPath={Linux:"linux-982053/chrome-linux/chrome",//linux//Darwin:'',//MacOsWindows_NT:"win64-982053/chrome-win/",//windows}[()];((__dirname,"../../chrome"),extraPath);}asyncfunctioncreateBrowser(parmas={}){constbrowser=({//headless:false,executablePath:getExecutableFilePath(),args:["--disable-dev-shm-usage",//大量渲染时候写入/tmp而非/dev/shm，防止页面内存溢出崩溃"--no-sandbox",//禁用沙盒],timeout:0,//禁止超时parmas,});returnbrowser;}={createBrowser,getExecutableFilePath,};上述代码简单封装了一个启动无头浏览器的方法，通过设置chromium路径的方式来启动方便在不同操作系统下启动不同的chromium，并在启动时传入一些参数进行优化。
4.4导出HTML文件
这里以导出HTML文件的小功能为例，介绍如何使用Puppeteer。
在src目录下新建example目录，在example目录下新建文件。
"usestrict";const{createBrowser}=require("../util/");constfs=require("fs");constpath=require("path");(asyncfunction(){constbrowser=awaitcreateBrowser();constpage=();("");consthtml=();((__dirname,""),html);();})();使用node运行这个js文件。
node./src/example/
5更多示例
5.1网页导出PDF文件
网页导出PDF文件这个功能往往需要配合网页的打印样式（@mediaprint{}）使用。
在@mediaprint{}里编写的样式代码只在打印的时候生效，通过编写打印样式，我们可以对页面元素的样式进行调整，控制打印的效果。
这里我们以将vue2官方文档导出为PDF为例，介绍Puppeteer导出PDF的功能。
首先，我们打开vue2的官方文档（）。使用Chrome浏览器的打印功能，在打印预览中我们可以看到打印效果和实际网页的内容并不一致。这是因为vue2的官方文档网页添加了一些打印样式。访问打印样式所在的文件（）并搜索@mediaprint就能明白为什么在打印预览中一些元素（如顶栏、侧边栏等）被隐藏或者样式不同了。
接下来进入正题，让我们使用Puppeteer来实现同样的打印（导出PDF）功能。
在example目录下新建文件。
"usestrict";const{createBrowser}=require("../util/");constpath=require("path");(asyncfunction(){constbrowser=awaitcreateBrowser();constpage=();("");({path:(__dirname,"./"),});();})();pdf方法会返回PDF文件的Buffer数据，以便后续处理。这里我们只是演示一下这个功能，传入path参数就能让pdf方法将PDF文件写到指定路径了。
使用node运行这个js文件。
node./src/example/
运行完毕后，example目录下出现了文件。打开这个文件便能看到vue2官方文档了。
5.2网页截图
在这一部分，我们演示一下整个网页截图的功能。
在example目录下新建文件。
"usestrict";const{createBrowser}=require("../util/");constpath=require("path");(asyncfunction(){constbrowser=awaitcreateBrowser();constpage=();("");({path:(__dirname,"./"),fullPage:true,});();})();使用node运行这个js文件。
node./src/example/
运行完毕后，example目录下出现了文件。打开这个文件便能看到vue2官方文档了。
