命令行批量截图Node脚本示例代码
批量截图任务
作为一个软件工程师，不只是做好自己的本职工作（iOS），而是需要解决项目中的技术问题。这次就是解决自动截图的问题
早期公司的数据工程师利用phantomjs来截图，后期不断发现截图效率低，加之开发者团队不再维护，因此决定将截图这部分跟你剥离开来，以后方便开发维护。我就承担了这个工作
puppeteer
PuppeteerisaNodelibrarywhichprovidesahigh-levelAPItocontrolChromeorChromiumovertheDevToolsProtocol.Puppeteerrunsheadlessbydefault,butcanbeconfiguredtorunfull(non-headless)ChromeorChromium.
安装问题
一开始按照往常的套路（npminstall--savepuppeteer）好几次都卡住了，后期查找资料发现切换到国内的镜像就可以顺利下载
PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.orgnpmi--savepuppeteer
- TousePuppeteerinyourproject,run:
PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.orgnpmi--savepuppeteer
- Installsomebasicpackages
npminstall
Usage
constpuppeteer=require('puppeteer'),
fs=require('fs'),
path=require('path'),
request=require('request')
functionmkdirsSync(dirname){
if(fs.existsSync(dirname)){
returntrue
}else{
if(mkdirsSync(path.dirname(dirname))){
fs.mkdirSync(dirname)
returntrue
}
}
}
varsnapShotFolerPath=path.join(__dirname,'../snspshot/')
mkdirsSync(snapShotFolerPath)
functionsnapShot(taskInfo){
returnnewPromise(function(resolve,reject){
(asyncfunction(){
//启动Chromium
constbrowser=awaitpuppeteer.launch({ignoreHTTPSErrors:true,headless:true,args:['--no-sandbox']})
//打开新页面
constpage=awaitbrowser.newPage()
//设置页面分辨率
awaitpage.setViewport({width:1920,height:1080})
//访问
awaitpage.goto(taskInfo.websiteUrl,{waitUntil:'domcontentloaded'}).catch(err=>console.log(err))
awaitpage.waitFor(1000)
try{
//截图
awaitpage.screenshot({path:snapShotFolerPath+taskInfo.imageName,fullPage:true}).catch(err=>{
console.log('截图失败:'+err)
});
awaitpage.waitFor(6000)
}catch(e){
console.log('failed'+e)
}finally{
awaitbrowser.close()
fs.stat(snapShotFolerPath+taskInfo.imageName,function(err,stats){
if(err){
reject('fail')
}else{
if(stats.isFile()){
resolve('success')
}
}
})
}
})()
})
}
module.exports=snapShot
如何安装(Linux、Unix操作系统)
如果你有翻墙环境
- 执行npminstall
- 执行npmstart
如果你没有翻墙环境
- 打开package.json文件，检查dependencies项目，如果key为puppeteer的条目，先删除该条目。
- 进入工程命令行，输入PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.co...npmi--savepuppeteer
- 执行npminstall命令
- 执行npmstart
流程说明
while循环去调用接口去获取当前的截图任务
- 在有截图任务情况下继续截图
- 没有截任务的情况下，为了避免浪费资源，程序休眠10分钟后继续下一次的获取截图任务
- 如果遇到调用截图任务接口500错误，则强制停止截图任务，相应的服务端工程师去查询失败原因
如果有截图任务那么就去截图
- 截图后将截图图片保存到文件夹，命令为当前日期yyyy-MM-dd-hh-mm-ss-S格式。然后将结果上传到服务端
- 截图失败将当前任务结果保存到本地failedTasks.json文件夹一份，然后上传到服务端
截图成功不管失败还是成功都去通知服务端。如果失败将当前任务告诉服务端，如果成功将当前任务信息和截图成功的绝对路径告诉服务端
一些说明
Demo中执行npmstart真正执行的是quickStart.js中的代码。完整的“获取截图任务、截图、截图上传到OSS、失败则将失败任务上传到服务”逻辑在index.js文件中
- 工程是在没有提供真正的接口获取任务，而是采用随机数获取截图任务
- 截图成功后将结果上传到OSS这一个步骤是没有的，采用log出来
- 失败的上传也是不存在的，log打印而已
todoList
- 多线程高效率的去截图
- 一些写法暂时比较粗糙，不优雅，待改进
- puppeteer很强大，大家可以去研究下
代码地址 （本地下载）
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。