木偶师图书馆简介

时间：2021-08-27 来源：互联网编辑：宝哥软件园浏览：次

木偶师是chrome生产的无头Chrome节点库。它提供了一系列的API，无需UI即可调用Chrome函数，适用于爬虫、自动处理等各种场景

根据官网描述，木偶师有以下功能：

通过生成页面截图和PDF自动表单提交、UI测试和键盘输入，创建新的自动测试环境。有了最新的JavaScript和浏览器功能，你可以直接在最新版本的Chrome中运行测试。捕获站点的时间线跟踪，以帮助诊断性能问题。抓取SPA页面和预渲染(即“SSR”)以下是木偶师的一些功能

1.初始化项目

注意：我们将在这里使用es6/7的新特性，所以用typescript编译代码

NPM install puppet typescript @ types/puppet ertsconfig . JSON的配置如下：

{ 'compileOnSave': true，' CompileRoptions ' : { ' target ' : ' es5 '，' lib': [ 'es6 '，' dom' ]，' type ' :[' node ']，' outDir':/dist/'、' sourceMap': true、' module': 'commonjs '、' watch': true、' moduleResolution': 'node '、' isolatedModules': false、' experiatealdecorators ' : true、' suppresimplicationnyindexerrors ' : true }、Include ' 3:[。/examples/* */*，]} puppet模块提供了一个启动Chromium实例的方法。

从“木偶”(async ()={awaitpuppet)中导入*作为木偶。launch ()})()上面的代码通过puppet的launch方法生成一个浏览器实例，可以接收一些配置项。更常用的是：

无头[boolean]:是否以无头模式启动浏览器slowMo [number]:减慢了木偶师的操作速度。这样，你就可以很容易地看到正在发生的事情。args[Array[string]]:是要传递给浏览器实例的额外参数。2.生成页面截图。

这里我们以https://example.com/为例

(async()={ const browser=wait puppeter . launch()；//生成浏览器实例const page=wait browser . new page()；//解析新页面。页面是awaitpagegoto(' https://example；com/')在默认浏览器上下文中创建；//跳转到https://example.com/await page .截图({//生成图片路径：' example.png'}))()这里需要注意的是，截图默认抓取网页可见区域的内容。如果想要获得可滚动页面的完整截图，需要添加fullPage: true。

执行node dist/截图. js在根目录下生成example.png

木偶师默认将页面大小设置为800*600，可以通过page.setViewport()进行更改。

不仅如此，木偶师还可以模拟手机

从“木偶师”导入*作为木偶师；从“木偶师/设备描述符”中导入*作为设备；const iPhone=设备[' iPhone 6 ']；(async()={ const browser=wait puppeter . launch({ headless : false })；const page=wait browser . NewPage()；等待页面模拟；wait page . goto(' https://Baidu.com/')；wait browser . close()；})();3.生成pdf

(async()={ const browser=wait puppeter . launch()；const page=wait browser . NewPage()；wait page . goto(' https://example.com/')；wait page . pdf({ displayheaderfooter : true，path: 'example.pdf '，format: 'A4 '，header template : ' b style=' font-size : 30px ' hello world b/'，footertemplate : ' b style=' font-size : 30px ' some text '，margin: { top: ' 100px '，bottom:wait browser . close()；})()执行节点dist/pdf.js.

4.自动提交表单，输入

这里我们模拟JD.COM的登录。为了更好地看到整个过程，我们使用headless: false关闭无头模式，查看整个登录过程

(async()={ const browser=wait puppet。launch({无头： false })；const page=等待浏览器。new page()；等待页面。goto(' https://github。com/log in’)；等待页面.等待时间(1000) //延迟一秒输入wait page.type('#login_field '，'[电子邮件保护]')；//立即输入wait page.type('#password '，' bian1992518 '，{ delay: 100 }) //模拟用户输入等待页面。点击(' input[type=submit]')；//点击登录按钮})()5.站点时间线追踪

可以很方便的使用跟踪。开始和停止追踪创建一个可以在调试工具打开的跟踪文件

(async()={ const bro swer=wait puppet。launch()；const page=等待兄弟回答。new page()；等待页面。追踪。start({ path : ' trace。JSON ' })；等待页面。goto(' https://示例。com/')；等待页面。追踪。stop()；兄弟斯韦。close()；})();执行节点dist/trace.js会生成一个trace.json文件，然后我们打开铬开发工具-性能，然后把该文件直接拖进去即可。该功能便于我们对网站进行性能分析，进而优化性能

6.爬虫和苏维埃社会主义共和国

现在大多数开发用反应、vue、棱角分明来构建矿泉网站矿泉固有很多的优点，比方开发速度快、模块化、组件化、性能优等。但其缺点还是很明显的，首先就是首屏渲染问题，其次不利于SEO，对爬虫不友好。

以https://preview.pro.ant.design/#/dashboard/analysis为例，我们点击右键，查看源代码，发现其身体里面只有div id='root'/div，假如想把门店销售额排名情况给爬下来，存到数据库进行数据分析（如下图)

此时我们以传统爬虫的方式去爬的话是拿不到网页内容的。

如大蟒

# -*-编码： UTF-8-从bs4导入美化组导入URL lib 2 def spider(): html=URL lib 2。URL打开(' https://预览。专业人士。蚂蚁。design/# ')html=html。read()shot=美化组(html，' lxml ')打印(镜头。pretify())if _ _ name _ _=' _ _ main _ _ ' : spider()执行python py/index.py，得到的结果如下图：

身体里面并没有页面相关的多姆，因此我们想通过大蟒去爬取矿泉页面的内容是不可行的。

开发

从“axios”导入axios(async()={ const RES=wait axios。get(' https://预览。专业人士。蚂蚁。design/# ')；控制台。日志(资源数据)；})();执行节点dist/node-spider.js，得到和上面例子一样的结果。

操纵木偶的人

(async()={ const browser=wait puppet。launch()；const page=等待浏览器。new page()；等待页面。goto(' https://预览。专业人士。蚂蚁。design/# ')；控制台。日志(等待页面。content())；})();执行node dist/spider.js，得到如下：

此时我们可以惊奇的发现可以抓到页面所有的数字正射影像图节点了。此时我们可以把它保存下来做SSR，也可以爬取我们想要的内容了。

(async()={ const browser=wait puppet。launch()；const page=等待浏览器。new page()；等待页面。goto(' https://预览。专业人士。蚂蚁。design/# ')；const RANK=' .排名列表_ _ _ 11 LG李'；等待页面。等待效果(等级)；const RES=等待页面。求值(()={ const getText=(v，selector)={ return v . queryselector(选择器)v . queryselector(选择器)。inner text }；常量销售等级=数组。来自(文档。queryselectorall(').排名榜_ _ ^ 11 LG Li’)；const data=[]；销售排名。map(v={ const obj={ rank : getText(v，' span : th-child(1 ')，address: getText(v，' span : th-child(2 ')，sales: getText(v，' span : th-child(3 '))))))}；数据。推送(obj)；});返回{数据}；});控制台。日志(RES)；等待浏览器。close()；})();执行node dist/spider.js，得到如下：