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

装置

直接运行安装命令：

如遇NPM安装木偶，可使用淘宝形象。

木偶师实现滑动截图

我发现在Puppet使用裁剪全屏的过程中，有些图片是无法截取的，但实际上有些图片是懒得加载的。如果不滑到图片的位置，图片就不会被加载。

现在我的方法是通过模拟浏览器的滚动条滑动底部来加载图片。

代码如下：

const木偶师=require('木偶师')；(async()={ const browser=wait puppeter . launch({ headless : false })；const page=wait browser . NewPage()；wait page . goto(' https://www . cn blogs.com/more think/p/6525216 . html ')；wait page . setviewport({ width : 1200，height : 800 })；等待自动滚动(页面)；wait page .截图({ path: '1.png '，full page : true })；wait browser . close()；})();函数autoScroll(page){ return page . evaluate(()={ return new Promise((解析，拒绝)={ var total height=0；变化距离=100；var timer=set interval(()={ var scroll height=document . body . scroll height；window.scrollBy(0，距离)；totalHeight=距离；if(total height=scroll height){ clearInterval(计时器)；resolve()；} }, 100);}) });}运动画面如下：

木偶师实现html元素的截图

在某些情况下，我们只想对html的某个位置进行截图，而不是对页面进行全屏拍摄。

木偶师提供了ElementHandle .截图方法，参数和page .截图一样，ElementHandle对象是页面内的一个Dom对象。它可以帮我截图html元素。这样，如果你愿意，你可以截取页面的任何部分。

代码如下：

const木偶师=require('木偶师')；(async()={ const browser=wait puppeter . launch({ headless : false })；const page=wait browser . NewPage()；wait page . goto(' https://www . cn blogs.com/more think/p/6525216 . html ')；wait page . setviewport({ width : 1200，height : 800 })；//获取页面Dom对象let body=awaitpage。$(' # cn blogs _ post _ body ')；//调用页面中Dom对象的截图方法进行截图awaitbody .截图({ path : ' 2 . png ' })；wait browser . close()；})();参考文件：

https://github.com/Google chrome/puppeter/blob/v 1 . 11 . 0/docs/API . MD # elementhandlescreenshoptoptions

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。