关注公众号“放风筝的人”，回复“信息”即可获得500G信息（全“军”），更有专业交流群等你一起来。（哈哈）本文主要讲的是谷歌发布的神器puppeteer，一直在持续维护。通过学习本文，您将了解它的基本使用和常用功能。1.Puppeteer简介Puppeteer是一个Node库，它提供了一个高级API，通过DevTools协议来控制Chromium或Chrome。使用Puppeteer，可以获取页面DOM节点、网络请求和响应，以编程方式操作页面行为，进行页面性能监控和优化，获取页面截图和PDF等，使用本神器，可以操作Chrome浏览器玩出各种花样.2.Puppeteer的核心结构Puppeteer的结构也反映了浏览器的结构。其核心结构如下：浏览器：这是一个浏览器实例，可以有浏览器上下文，可以通过puppeteer.launch或puppeteer.connectBrowser对象来创建。BrowserContext：这个实例定义了一个浏览器上下文，它可以有多个页面。创建浏览器实例时，默认会创建一个浏览器上下文（无法关闭）。此外，您可以使用browser.createIncognitoBrowserContext()创建匿名浏览器上下文（不会与其他浏览器上下文共享cookie/缓存）。页面：至少包含一个主框架，除主框架外可能还有其他框架，如iframe。框架：页面中的框架。在每个时间点，页面通过page.mainFrame()和frame.childFrames()方法公开当前框架的详细信息。对于框架ExecutionCOntext中的至少一个执行上下文：表示一个JavaScript执行上下文。Worker：有一个单一的执行上下文，便于与WebWorkers交互。三、基本使用和常用功能神器整体上还是比较简单的，下面开始我们的使用吧。3.1启动Browser核心功能是异步调用puppeteer.launch()函数，根据相应的配置参数创建Browser实例。constpath=require('路径');constpuppeteer=require('puppeteer');constchromiumPath=path.join(__dirname,'../','chromium/chromium/chrome.exe');asyncfunctionmain(){//启动chrome浏览器constbrowser=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设备的浏览器结果asyncfunctionmain(){//启动浏览器//设备模拟：模拟一个iPhoneX//useragentawaitpage1.setUserAgent('Mozilla/5.0(iPhone;CPUiPhoneOS11_0likeMacOSX)AppleWebKit/604.1.38(KHTML,likeGecko)Version/11.0Mobile/15A372Safari/604.1')//Viewportsimulationawaitpage1.setViewport({width:375,height:812});//访问一个页面}main();3.4获取DOM节点获取DOM节点有两种方式，一种是直接调用页面的native函数，另一种是通过执行js代码获取。asyncfunctionmain(){//启动chrome浏览器constbrowser=awaitpuppeteer.launch({//指定浏览器的路径executablePath:chromiumPath,//是否为无头浏览器模式，默认为无头浏览器模式无头：假}）；//在默认浏览器上下文中创建一个新页面constpage1=awaitbrowser.newPage();//刚刚请求指定网址的空白页面awaitpage1.goto('https://www.baidu.com');//等待title节点出现awaitpage1.waitForSelector('title');//使用页面自己的方法获取节点consttitleDomText1=awaitpage1.$eval('title',el=>el.innerText);console.log(titleDomText1);//百度一下//使用js获取节点consttitleDomText2=awaitpage1.evaluate(()=>{consttitleDom=document.querySelector('title');returntitleDom.内部文本；}）；console.log(titleDomText2);}main();3.5监听请求和响应下面我们来监听百度一个js脚本的请求和响应。请求事件是监听请求，响应事件是监听响应。asyncfunctionmain(){//启动chrome浏览器constbrowser=awaitpuppeteer.launch({//指定浏览器的路径executablePath:chromiumPath,//是否为无头浏览器模式，默认为无头浏览器模式无头：假}）；//在默认浏览器上下文中创建一个新页面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'){console.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);//真开启，假关闭page1.on('request',request=>{if(request.url()==='https://s.bdstatic.com/common/openjs/amd/eslx.js'){//终止请求request.abort();console.log('Therequestwasterminated!!!');}else{//继续请求request。继续（）;}}）;//刚刚请求指定网址的空白页面awaitpage1.goto('https://www.baidu.com');}main();3.7截屏截屏是一个非常有用的功能。您可以保存快照以方便以后进行故障排除。（注意：在headless模式下截图，否则截图可能有问题）asyncfunctionmain(){//启动浏览器，访问页面操作//截图操作，使用Page.screenshot函数//截取整个页面:Page.screenshot函数默认截取整个页面，加上fullPage参数就是全屏截取awaitpage1.screenshot({path:'../imgs/fullScreen.png',fullPage:true});//截取一块区域的屏幕内容awaitpage1.screenshot({path:'../imgs/partScreen.jpg',type:'jpeg',quality:80,clip:{x:0,y:0,宽度:375,高度:300}});browser.close();}main();3.8生成pdf除了用screenshots留快照，还可以用pdf留snapshot。asyncfunctionmain(){//启动浏览器，访问页面//根据网页内容生成pdf文件，使用Page.pdf——注：awaitpage1.pdf({path:'../pdf/baidu.pdf'});浏览器.close();}main();1.如果觉得这篇文章还不错，请分享点赞，让更多的人看到2.关注公众号放风筝的，领取学习资料（前端“多臂”资料），以及定期为您推送原创深度文章
