深入了解木偶师的入门教程和实践

出现背景

Chrome在Chrome59(linux、macos)和Chrome60(windows)之后自带无头模式，方便自动化测试或抓取。但是如何与无头Chrome交互是个问题。启动Chrome时只能通过命令行参数实现启动时的简单初始化。硒、网络驱动程序等。是一种解决方案，但它们往往依赖于许多，而且不够平坦。

木偶师是谷歌生产的Node库，通过DevTools协议控制无头Chrome。可以直接控制Chrome模拟UI Test的大部分用户操作，也可以作为爬虫访问页面，通过Puppeteer提供的api收集数据。

环境和安装

木偶师本身依赖于6.4以上的节点，但是对于异步/等待，建议使用7.6以上的节点。另外，无头Chrome本身对服务器所依赖的库的版本要求较高，centos服务器稳定，所以在v6中很难使用无头Chrome。升级依赖版本时可能会出现各种服务器问题(包括但不限于无法使用ssh)，因此最好使用更高版本的服务器。木偶师是一个npm包，所以安装非常简单：

Npm i木偶师

纱线添加木偶器在安装过程中附带最新版本的Chromium，可以通过在npm config中设置环境变量或木偶器_ skip _ chromium _ download来跳过。如果不下载，可以在启动时通过puppeter . launch([options])配置项中的executablePath指定Chromium的位置。

使用和示例

木偶师和其他框架一样，操作浏览器实例做出相应的反应。

const木偶师=require('木偶师')；(async()={ const browser=wait puppeter . launch()；const page=wait browser . NewPage()；wait page . goto(' http://rennaiqian.com ')；wait page .截图({ path : ' example . png ' })；wait page . pdf({ path : ' example . pdf '，format : ' A4 ' })；wait browser . close()；})();上面的代码通过木偶师的启动方法生成了一个浏览器实例。对应于浏览器，启动方法可以传入配置项。在本地调试期间传入{headless:false}以关闭无头模式更有用。

方法const browser=await puppet . launch({ headled : false })browser . new page可以打开一个新的选项卡并返回该选项卡的实例页面，页面上的各种方法可以对页面执行常见的操作。以上代码用于屏幕截图和打印pdf。一个非常强大的方法是page。评估(页面功能，args)，它可以将我们的函数注入页面，这样就有了无限的可能性

const木偶师=require('木偶师')；(async()={ const browser=wait puppeter . launch()；const page=wait browser . NewPage()；wait page . goto(' http://rennaiqian.com ')；//根据页面的报告，获取页面的“视口”。const dimensions=wait page . evaluate(()={ return { width : document . document element . client width，height : document . document element . client height，devicescaleffactor : window . devicepixel ratio }；});console.log('Dimensions: '，尺寸)；wait browser . close()；})();需要注意的是，在evaluate方法中不能直接使用外部变量，需要作为参数传入，如果想要得到执行结果，还需要返回。因为已经是一个多月的开源项目，现在项目非常活跃，所以使用的时候可以自己找api，保证参数和使用方法没有错。

调试技巧

1.关闭无界面模式，有时查看浏览器显示的内容很有用。使用以下命令启动整个浏览器：

Const browser=awaitpuppet。启动({无头： false}) 2。慢点。slowMo选项在指定的毫秒内减慢木偶的运行速度。这是另一种方式来看发生了什么：

const browser=wait puppeter . launch({ headless : false，slow mo :250 })；3.捕获控制台的输出，并监听控制台事件。在page中调试代码也很方便。

page.on('console '，msg=console.log('PAGE LOG: '，味精。args))；等待页面。评估(()=控制台。日志(` URL为$ { location。href } `))；4.启动详细日志记录，所有公共应用程序接口调用和内部协议流量都将通过操纵木偶的人命名空间下的调试模块进行记录

#基本详细日志记录env DEBUG=' puppeter : * '节点脚本。js #调试输出可以通过命名空间env DEBUG=' puppeter : *，-puppet :协议'节点脚本来启用/禁用。除了一切协议消息env DEBUG=' puppeteer:session '节点脚本。js #协议会话消息（到目标的协议消息)env DEBUG='木偶师： house，木偶师：keyboard '节点脚本。js #仅限鼠标和键盘本示例过滤掉所有网络域消息env DEBUG=' puppet : * ' env DEBUG _ COLORS=true节点脚本。js 21 | grep-v“网络”爬虫实践

很多网页通过用户代理来判断设备，可以通过page.emulate(选项)来进行模拟选项。有两个配置项，一个为用户代理，另一个为视口可以设置宽度（宽度)、高度（高度)、屏幕缩放（设备比例因子)、是否是移动端(isMobile)、有无触控事件(hasTouch)。

常数木偶师=require('木偶师');const devices=require(' puppeter/device descriptor ')；const iPhone=设备[' iPhone 6 ']；木偶师。发射().然后(异步浏览器={ const page=wait browser。new page()；等待页面模拟；等待页面。goto(' https://www .例子。com’)；//其他操作.等待浏览器。close()；});上述代码则模拟了iPhone6访问某网站，其中设备是操纵木偶的人内置的一些常见设备的模拟参数。

很多网页需要登录，有两种解决方案：

1、让操纵木偶的人去输入账号密码

常用方法：点击可以使用page.click(选择器[,选项])方法，也可以选择聚焦page.focus(选择器).输入可以使用page.type(选择器，文本[,选项])输入指定的字符串，还可以在选择中设置耽搁缓慢输入更像真人一些。也可以使用键盘。向下（键[,选项])来一个字符一个字符的输入。

2、如果是通过甜饼干判断登录状态的可以通过page.setCookie(.饼干),想要维持甜饼干可以定时访问。

提示：有些网站需要扫码，但是相同域名的其他网页却有登录，就可以尝试去可以登录的网页登录完利用甜饼干访问跳过扫码。

简单例子

常数木偶师=require('木偶师');(async()={ const browser=wait puppet。launch({无头： false })；const page=等待浏览器。new page()；等待页面。后藤(' https://百度。com’)；等待页面。键入(' #kw '，'木偶师，{ delay : 100 })；page.click('#su ')等待佩奇。等待(1000)；const TargetLink=等待页面。评估(()={ return[.document.querySelectorAll(' .结果a')].筛选器(项目={返回项目。innertext项。innertext。包括(' puppeter的入门和实践') }).toString()})；等待页面。goto(TargetLink)；等待页面。等待(1000)；浏览器。close()；})()以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。