解决思路

主要运用gm方法对截图的拼接：

先运动webdriver.takeScreenshot()和scroll的操作分别截取出我们需要的截图。
gm().把所有的截图拼接在一起（需要安装gm：GraphicsMagick链接）
删除没用的临时的截图

具体代码

const gm = require('gm');
exports.screenLongShot = async function (driver, path) {// 图片存入的路径let targetPath = path.split("/");let dirPath = path.substring(0, path.indexOf(targetPath[targetPath.length - 1]));// 全文的高度let totalHeight = await driver.executeScript("return document.body.scrollHeight");// 获取浏览器页面的高度，判断需要向下scroll几次let hh = await driver.manage().window().getRect();let height = hh['height']let count = height;let i = 1while (height<totalHeight){if (mkdirsSync(dirPath) === true) {// 截图await driver.takeScreenshot().then(function (image) {console.log(image)// 先暂时存起来fs.writeFile(dirPath + 'tmp' + i + '.jpeg', image, 'base64', function (err) {if (err !== null) {console.log(err);}});})}i++;// 向下scroll 一个窗口的高度await driver.executeScript("window.scrollBy(0,"+height+")");height += count;}// 读文件 获取刚才截的几张图let tmpImg = await fs.readdirSync(dirPath)let finImg = []for(let key of tmpImg){console.log(key)if (key.search('tmp') !== -1){finImg.push(key)}}// 先把第一个图片当作最上面的图，之后在这个图片上拼接，之后删除掉临时的图片await gm(dirPath+finImg[0]).write(path, function(err){fs.unlinkSync(dirPath+finImg[0]);if(err != null){console.log(err);}});await wait(driver, 2000);// 拼接之后删除for(let i = 1; i<  finImg.length;i++){await wait(driver, 2000);await gm(path).append(dirPath+finImg[i]).write(path, function(err){fs.unlinkSync(dirPath+finImg[i]);if(err != null){console.log(err);}});}
};

效果

总结

方法有点垃圾，就是把多个图拼接在一起，但是由于没找到好的方法，所以能勉强实现截图的目的。如果有更好的方法，欢迎分享！

selenium自动化学习--截取长图的方法相关推荐

Selenium Chrome/Firefox webdriver实现截取网页长图的方法
Selenium Chrome/Firefox webdriver实现截取网页长图的方法最近在测试使用Selenium+Firefox webdriver来对网页整体截图,由PhantomJS不再更 ...
【基础知识】截长图的方法以及防止截图时下拉框自动收回的方法
截长图的方法: 博主之前使用的tim,不具备截长图的功能,之后百度了很多的方法,最后发现QQ的截长图功能最好用,很不解,tim不应该是偏向于办公吗,这种功能竟然还能阉割? 使用工具:QQ最新版使用方 ...
电脑如何截长图？如何用电脑截取长图——规划全景
一个规划的,想知道如何用电脑截取长图--规划全景 1.F12 2.Ctrl+Shift+P 3.full
Snagit for Mac 如何截取长图，滚动截图？
困扰我很久了,为了在mac上截取长图,今天终于成功了. 如下图: 第一步:选择image. 第二步:Selection选择Panoramic,就是选择滚动截图的意思. 第三步:到达你想要滚动截图,也就 ...
赛效：多张图片拼接长图的方法?如何使用改图吧拼长图?
了解更多办公工具的相关应用,可到赛效官方网站查看应用栏目~ 当需要发送的图片数量较多时,一张张单独发送无法完整的表达图片的信息,这时候可以将图片拼接成一个长图:除此之外,多张图片需要展示在一张长图中时 ...
Microsoft Edge 浏览器截取网页长图的方法
打开Edge 浏览器在需要截长图的页面点击右上角如图下所示位置出现如下弹窗选择网页捕获出现捕获区域 .捕获整页根据需求就行选择即可 ,如选择部分截图选择捕获区域进行框选即可, ...
jquery实现截取pc图片_如何优雅的对网页截取长图
苏生不惑第115 篇原创文章,将本公众号设为星标,第一时间看最新文章. 最近写文章想截个长图,才发现一直使用的QQ早有这个功能了,这里就整理几个pc上网页长截图的方案. qq滚动截图 qq截图应该很多 ...
一个操作轻松截取长图,Win10上网截长图小技巧！
截屏的方法有很多,但是有时候我们会遇到比电脑屏幕还大的图,比如网站上的长图.N条引用的评论...你要怎么截取呢?是不是最多只能截全屏?还是要做到第三方的截图软件呢? 下面介绍一种win10电脑自带的滚 ...
python测试自动化封装_python接口自动化学习笔记(封装获取测试数据方法)
本篇文章是接于python接口自动化学习笔记(封装方法用于读取excel) 后的拓展,讲解在封装完成excel的数据读取代码后,如何在data层进行使用首先,我准备了这样一个excel表格用以存储测 ...
STM32学习路线-长图
最近好好整理了一下学习STM32的路程,做成了一个长图:STM32学习路线,供初学者们参考一下.

selenium自动化学习--截取长图的方法

用gm实现基于node.js的selenium自动化截取长图的问题

解决思路

具体代码

效果

总结

selenium自动化学习--截取长图的方法相关推荐

最新文章

热门文章