Puppeteer什么是Puppeteer是一个Node库，它提供了一套完整的API，用于通过DevTools协议操作Chrome或Chromium。Puppeteer默认无头运行，也可以使用GUI运行Chrome和Chromium。熟悉爬虫或者UI自动化的同学可能会想到PhantomJS、CasperJS或者Selenium，而ChromeDevTools团队出品维护的puppeteer在功能完整性、稳定性、兼容性、安全性和性能等方面都会成为磨床。其他工具的存在。Puppeteer的作用理论上，我们在Chrome中能做的一切都可以通过puppeteer来完成。例如：页面和元素的截图，将页面保存为PDF，爬取SPA（单页应用）网站的内容并为SSR（服务器端渲染）网站生成预渲染内容，自动化UI测试，自动填充/提交表单，模拟UI输入测试最新的Javascript和Chrome功能性能测试，生成时间线轨迹定位网站性能问题和测试Chrome插件当然puppeteer也不是万能的，比如跨浏览器就欠缺compatibility，目前只对FirefoxExperimental做了支持，所以在网站上进行浏览器兼容性测试，不得不选择Selenium/WebDriver等工具。Puppeteer更侧重于与Chromium的互操作性，以提供更丰富和更可靠的功能。安装Puppeteernpmipuppeteer或yarnaddpuppeteer在安装puppeteer的过程中，会下载最新版本的Chromiun（~170MBMac，~282MBLinux，~280MBWin）以确保最新版本的puppeteer与Chromium完全兼容。我们也可以跳过ChromiumDownload，或者下载其他版本的Chromium到特定路径，这些可以通过环境变量配置，具体参考环境变量。puppeteer-corepuppeteer-core是puppeteer的轻量级版本，不会下载默认使用Chromium，但需要选择UselocalorremoteChrome。npmipuppeteer-core或yarnaddpuppeteer-core要使用puppeteer-core，您需要确保其版本与连接的Chrome版本兼容。puppeteer-core将忽略所有PUPPETEER\_*环境变量。puppeteer和puppeteer-core的详细对比可以参考：puppeteervspuppeteer-core。使用示例示例1-访问https://example.com并创建screenshot.jsconstpuppeteer=require("puppeteer");(async()=>{constbrowser=awaitpuppeteer.launch();constpage=awaitbrowser.newPage();awaitpage.goto("https://example.com");awaitpage.screenshot({path:"example.png"});awaitbrowser.close();})();执行screenshot.jsnodescreenshot.js生成图片预览：Puppeteer初始窗口大小为800x600px，这也决定了页面截图的大小为800x600px。我们可以使用Page.setViewport()来设置窗口大小，比如设置为1080P：page.setViewport({width:1920,height:1080,});如果想对真实网页进行滚动截图，可以使用：awaitpage.screenshot({fullPage:true});示例2-访问https://github.com/puppeteer/...并将网页保存为PDF文件。创建savePDF.jsconstpuppeteer=require("puppeteer");(async()=>{constbrowser=awaitpuppeteer.launch();constpage=awaitbrowser.newPage();page.setViewport({width:1920,height:1080,});awaitpage.goto("https://github.com/puppeteer/puppeteer",{waitUntil:"networkidle2",});awaitpage.pdf({path:"puppeteer.pdf",格式:"a2",});awaitbrowser.close();})();执行savePDF.jsnodesavePDF.js生成PDF预览：更多生成PDF选项请参考：Page.pdf()。示例3-在浏览器上下文中执行JS代码以创建get-dimensions.jsconstpuppeteer=require("puppeteer");(async()=>{constbrowser=awaitpuppeteer.launch();constpage=awaitbrowser.newPage();awaitpage.goto("https://example.com");//获取页面的“viewport”，由页面报告。constdimensions=awaitpage.evaluate(()=>{return{width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,deviceScaleFactor:window.devicePixelRatio,};});console.log("Dimensions:",dimensions);等待浏览器.close();})();执行get-dimensions.jsnodeget-dimensions.js执行结果：evaluate的更多用法请参考Page.evaluate()。示例4-自动填写表单并提交（在https://developers.google.com页面的搜索框中输入关键字HeadlessChrome并搜索）createsearch.jsconstpuppeteer=require("puppeteer");(async()=>{constbrowser=awaitpuppeteer.launch({headless:false,//GUI模式});constpage=awaitbrowser.newPage();awaitpage.goto("https://developers.google.com/web/");//在搜索框中输入关键字awaitpage.type(".devsite-search-field","HeadlessChrome");//按回车awaitpage.keyboard.press("Enter");//等待结果返回constresultsSelector=".gsc-result.gs-title";awaitpage.waitForSelector(resultsSelector);//从页面抓取结果constlinks=awaitpage.evaluate((resultsSelector)=>{constanchors=Array.from(document.querySelectorAll(resultsSelector));returnanchors.map((anchor)=>{consttitle=anchor.textContent.split("|")[0].trim();return`${title}-${anchor.href}`;});},resultsSelector);//打印结果console.log(links.join("\n"));等待browser.close();})();执行搜索.jsnodesearch.js结果展示：调试技巧Puppeteer在调试层面非常强大，下面列出一些常用的技巧1.关闭“headless”模式——查看浏览器显示的内容有助于调试constbrowser=awaitpuppeteer.launch({headless:false});2.开启“慢动作”模式——看浏览器更清晰Therunningconstbrowser=awaitpuppeteer.launch({headless:false,slowMo:250,//将puppeteer的运行速度减慢250ms});3.监听浏览器控制台的输出page.on("console",(msg)=>console.log("PAGELOG:",msg.text()));awaitpage.evaluate(()=>console.log(`urlis${location.href}`));4.在浏览器执行代码中使用调试器目前有两种执行上下文：运行测试代码的node.js上下文和运行测试代码的浏览器上下文。我们可以使用page.evaluate()在浏览器上下文中插入调试器进行调试：首先，在启动puppeteer时设置{devtools:true}：constbrowser=awaitpuppeteer.launch({devtools:true});然后在evaluate()的执行代码中插入debugger，这样Chromium就会执行这一步Stop:awaitpage.evaluate(()=>{debugger;});5.启用详细日志记录——内部DevTools协议流量将通过puppeteer命名空间下的调试模块进行记录基本用法：DEBUG=puppeteer:*nodescreenshot.jsWindows可以使用cross-envnpxcross-envDEBUG=puppeteer:*nodescreenshot。js协议流量可能相当复杂，我们可以过滤掉所有网络域消息envDEBUG=puppeteer:\*envDEBUG_COLORS=truenode./examplees/screenshot.js2>&1|grep-v'"Network'6.使用ndb工具进行调试，具体使用方法参考ndb资源链接Puppeteer官网API文档使用示例Github-AwesomePuppeteerTroubleshooting文章Demo链接：https://github.com/MudOnTire/…
