本文主要介绍谷歌发布的神器puppeteer，一直在持续维护。通过学习本文，您将了解它的基本使用和常用功能。1.Puppeteer简介Puppeteer是一个Node库，它提供了一个高级API，通过DevTools协议来控制Chromium或Chrome。使用Puppeteer，可以获取页面DOM节点、网络请求和响应，以编程方式操作页面行为，进行页面性能监控和优化，获取页面截图和PDF等，使用本神器，可以操作Chrome浏览器玩出各种花样.2.Puppeteer的核心结构Puppeteer的结构也反映了浏览器的结构。其核心结构如下：PictureBrowser：这是一个浏览器实例，可以有浏览器上下文，可以通过puppeteer.launch或puppeteer.connect创建一个Browser对象。BrowserContext：这个实例定义了一个浏览器上下文，它可以有多个页面。创建浏览器实例时，默认会创建一个浏览器上下文（无法关闭）。此外，您可以使用browser.createIncognitoBrowserContext()创建匿名浏览器上下文（不会与其他浏览器上下文共享cookie/缓存）。页面：至少包含一个主框架，除主框架外可能还有其他框架，如iframe。框架：页面中的框架。在每个时间点，页面通过page.mainFrame()和frame.childFrames()方法公开当前框架的详细信息。对于框架ExecutionCOntext中的至少一个执行上下文：表示一个JavaScript执行上下文。Worker：有一个单一的执行上下文，便于与WebWorkers交互。三、基本使用和常用功能神器整体上还是比较简单的，下面开始我们的使用吧。3.1启动Browser核心功能是异步调用puppeteer.launch()函数，根据相应的配置参数创建Browser实例。constpath=require('path');constpuppeteer=require('puppeteer');constchromiumPath=path.join(__dirname,'../','chromium/chromium/chrome.exe');asyncfunctionmain(){//开始chromebrowserconstbrowser=awaitpuppeteer.launch({//指定浏览器executablePath:chromiumPath的路径,//是否为无头浏览器模式，默认为无头浏览器模式headless:false});}main();3.2访问页面要访问页面，首先需要创建浏览器上下文，然后根据上下文创建新的页面，最后指定要访问的URL。asyncfunctionmain(){//启动chrome浏览器//...//在默认浏览器上下文中创建一个新页面constpage1=awaitbrowser.newPage();//一个空白页面访问指定的URLawaitpage1.goto('https://51yangsheng.com');//创建匿名浏览器上下文constbrowserContext=awaitbrowser.createIncognitoBrowserContext();//在此上下文中创建新页面constpage2=awaitbrowserContext.newPage();page2.goto('https://www.baidu.com');}main();3.3设备模拟往往需要浏览不同类型模型的结果。这时候可以利用器件仿真来实现。下面模拟一个iPhoneX设备的浏览器Resultasyncfunctionmain(){//启动浏览器//设备模拟：模拟一个iPhoneX604.1')//Viewport（视口）模拟awaitpage1.setViewport({width:375,height:812});//访问一个页面}main();3.4获取DOM节点获取DOM节点有两种方式，一种方式是直接调用页面自带的native函数，另一种方式是通过执行js代码获取。asyncfunctionmain(){//启动chrome浏览器constbrowser=awaitpuppeteer.launch({//指定浏览器executablePath:chromiumPath的路径,//是否为无头浏览器模式，默认为无头浏览器模式headless:false});//在默认的浏览器上下文中创建一个新页面constpage1=awaitbrowser.newPage();//一个空白页面访问指定的URLawaitpage1.goto('https://www.baidu.com');//等待title节点出现awaitpage1.waitForSelector('title');//使用页面自带的方法获取节点consttitleDomText1=awaitpage1.$eval('title',el=>el.innerText);console.log(titleDomText1);//百度一下//用js获取节点.log(titleDomText2);}main();3.5监听请求和响应下面我们来监听一个百度中js脚本的请求和响应。请求事件是监听请求，响应事件是监听响应。asyncfunctionmain(){//启动chrome浏览器constbrowser=awaitpuppeteer.launch({//指定浏览器executablePath:chromiumPath的路径,//是否为无头浏览器模式，默认为无头浏览器模式headless:false});//在默认浏览器上下文中创建一个新页面constpage1=awaitbrowser.newPage();page1.on('request',request=>{if(request.url()==='https://s.bdstatic.com/common/openjs/amd/eslx.js'){console.log(request.resourceType());console.log(request.method());console.log(request.headers());}});page1.on('response',response=>{if(response.url()==='https://s.bdstatic.com/common/openjs/amd/eslx.js'){控制台。log(response.status());console.log(response.headers());}})//空白页面刚问了指定的URLawaitpage1.goto('https://www.baidu.com');}main();3.6拦截请求默认情况下，请求事件只有只读属性，不能拦截请求。如果要拦截请求，需要通过page.setRequestInterception(value)启动请求拦截器，然后使用request.abort、request.continue和request.respond方法决定请求的下一步。asyncfunctionmain(){//启动chrome浏览器constbrowser=awaitpuppeteer.launch({//指定浏览器executablePath:chromiumPath的路径,//是否为无头浏览器模式，默认为无头浏览器模式headless:false});//在默认浏览器上下文中创建一个新页面constpage1=awaitbrowser.newPage();//拦截请求打开awaitpage1.setRequestInterception(true);//True打开，false关闭page1.on('request',request=>{if(request.url()==='https://s.bdstatic.com/common/openjs/amd/eslx.js'){//终止请求request.abort();console.log('请求终止！！！');}else{//继续请求request.continue();}});//空白页面访问指定URLawaitpage1.goto('https://www.baidu.com');}main();3.7Screenshot截图是一个非常有用的功能，可以通过截取的方式保存一个快照，方便后期排查问题。（注：headless模式下截图，否则截图可能有问题）asyncfunctionmain(){//启动浏览器，访问页面操作//截图操作，使用Page.screenshot函数//截取整个页面:Page.screenshot函数默认截取整个页面，添加fullPage参数即为全屏截取awaitpage1.screenshot({path:'../imgs/fullScreen.png',fullPage:true});//截取屏幕中某个区域的内容awaitpage1。截图（{path:'../imgs/partScreen.jpg',type:'jpeg',quality:80,clip:{x:0,y:0,width:375,height:300}}）;浏览器。close();}main();3.8生成pdf除了用截图留快照，还可以用pdf留快照。asyncfunctionmain(){//启动浏览器，访问页面操作//根据网页内容生成pdf文件，使用Page.pdf——注意：在headless模式下必须调用awaitpage1.pdf({path:'../pdf/baidu.pdf'});browser.close();}main();
