PuppeteerPuppeteer比较友好HeadlessChromeNodeAPIPuppet也是心动(=?ω?=)什么是Puppeteer？Puppeteer是一个Node库，提供高级API以通过DevTools协议控制无头Chrome或Chromium，它也可以配置为使用完整（非无头）Chrome或Chromium。您可以使用Puppeteer提供的API直接控制Chrome来模拟大部分用户操作进行UITest或者通过爬虫访问页面来收集数据。为什么会产生Puppeteer？很久以前，前端需要一个headlessbrowser。最常见的应用场景是两种UI自动化测试：摆脱手动浏览点击页面确认功能模式Crawler：解决Chromeheadless和Puppeteer中页面内容异步加载等问题在出现之前有几种无头浏览器：PhantomJS，基于WebkitSlimerJS，基于GeckoHtmlUnit，基于RhnioTrifleJS，基于TridentSplash，基于Webkit。HeadlessChrome和对应的NodeJSAPIPuppeteer两大举措，直接导致PhantomJS和SeleniumIDEforFirefox的作者暂停维护他们的产品，PhantomJs的开发者甚至直接宣布丢掉饭碗。Puppeteer可以做什么？您可以在浏览器中手动执行的大部分操作都可以使用Puppteer完成，例如生成页面的屏幕截图和PDF。抓取SPA并生成预呈现的内容（即“SSR”）。自动提交表单、UI测试、键盘输入等。创建最新的自动化测试环境。使用最新的JavaScript和浏览器功能，直接在最新版本的Chrome浏览器中运行测试。捕获网站的时间线跟踪以帮助诊断性能问题。开始安装Puppeteernpminstallpuppeteer或yarnaddpuppeteerPuppeteer至少需要Nodev6.4.0，但如果你想使用async/await，它仅在Nodev7.6.0或更高版本中受支持。示例1保存屏幕截图导航到https://example.com并将屏幕截图保存为example.png：constpuppeteer=require('puppeteer');asyncfunctionscreenShot(url,path,name){awaitconsole.log('截屏...'）;awaitconsole.log('保存路径：'+路径+名称+'.png');constbrowser=awaitpuppeteer.launch();constpage=awaitbrowser.newPage();等待页面.goto(url);awaitpage.screenshot({path:path+name+'.png'});awaitbrowser.close();}puppeteer默认页面大小为800x600分辨率，页面大小可由Page决定。setViewport()更改实例二创建PDFconstpuppeteer=require('puppeteer');asyncfunctiondownloadPdf(url,path,name){awaitconsole.log('下载Pdf...');awaitconsole.log('保存路径：'+路径+名称+'.pdf');constbrowser=awaitpuppeteer.launch();constpage=awaitbrowser.newPage();//networkidle2：当至少500ms不超过2个网络连接时，认为导航完成。等待页面。goto(url,{waitUntil:'networkidle2'});阿波它page.pdf({path:path+name+'.pdf',format:'A4'});awaitbrowser.close();}示例3执行渲染页面中的代码constpage=awaitbrowser.newPage();等待page.goto(url);//获取页面报告的页面的“视口”。constdimensions=awaitpage.evaluate(()=>{return{width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,deviceScaleFactor:window.devicePixelRatio};});console.log('尺寸：'，尺寸);//awaitbrowser.close();}Advancedpage.type获取输入框焦点并输入文本page.keyboard.press模拟键盘按键，目前mac上组合键无效等待已知bugpage.waitForpage，可以是时间，某个元素，某个函数page.frames()获取当前页面的所有iframe，然后根据iframe的名称（'.srchsongst')在iframe中获取一个元素iframe.evaluate()在浏览器中执行函数，相当于在控制台执行函数，返回一个PromiseArray.from将类数组对象转换为对象page.click()点击一个元素iframe.$eval()相当于在iframe中运行document.queryselector获取指定元素，作为第一个参数传给iframe.$$eval相当于在iframe中运行document.querySelectorAll获取指定元素的数组，并将其作为第一个参数传递。让我们阅读这篇文章。作者写了两个demo。看代码就可以理解上面的基本用法了。开发和调试的一些默认设置和建议1.使用Headless模式Puppeteer默认以Headless模式加载Chromium。如果你想加载完整的Chromium（以便于观察网页加载的效果），你可以执行以下命令constbrowser=awaitpuppeteer.launch({headless:false});//默认为true2.执行本地版本的Chrome或Chromiumconstbrowser=awaitpuppeteer.launch({executablePath:'/path/to/Chrome'});3.延迟执行Puppeteerconstbrowser=awaitpuppeteer.launch({headless:false,slowMo:250//减慢250ms});4、获取控制台输出，可以监听控制台事件，或者执行consolepage.on('console',msg=>console.log('PAGELOG:',msg.text()));awaitpage.evaluate(()=>console.log(`urlis${location.href}`));5.设置页面窗口大小awaitpage.setViewport({width:1366,height:768*2});参考Puppeteer的入门教程和实践https://www.jianshu.com/p/2f0...官方文档https://github.com/GoogleChro...
