命令行批量截图Node脚本示例代码

 更新时间:2019年01月25日 11:58:36   作者:fantasticbaby  
这篇文章主要给大家介绍了关于命令行批量截图Node脚本的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

批量截图任务

作为一个软件工程师,不只是做好自己的本职工作(iOS),而是需要解决项目中的技术问题。这次就是解决自动截图的问题

早期公司的数据工程师利用 phantomjs 来截图,后期不断发现截图效率低,加之开发者团队不再维护,因此决定将截图这部分跟你剥离开来,以后方便开发维护。我就承担了这个工作

puppeteer

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.

安装问题

一开始按照往常的套路(npm install --save puppeteer) 好几次都卡住了,后期查找资料发现切换到国内的镜像就可以顺利下载

PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org npm i --save puppeteer
  • To use Puppeteer in your project, run:
PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org npm i --save puppeteer
  • Install some basic packages
npm install

Usage

const puppeteer = require('puppeteer'),
  fs = require('fs'),
  path = require('path'),
  request = require('request')

function mkdirsSync(dirname) {
 if (fs.existsSync(dirname)) {
 return true
 } else {
 if (mkdirsSync(path.dirname(dirname))) {
  fs.mkdirSync(dirname)
  return true
 }
 }
}

var snapShotFolerPath = path.join(__dirname, '../snspshot/')
mkdirsSync(snapShotFolerPath)

 function snapShot (taskInfo) {
 return new Promise(function (resolve, reject) {

 (async function(){
  // 启动Chromium
  const browser = await puppeteer.launch({ignoreHTTPSErrors: true, headless:true, args: ['--no-sandbox']})
  // 打开新页面
  const page = await browser.newPage()
  // 设置页面分辨率
  await page.setViewport({width: 1920, height: 1080})

  // 访问
  await page.goto(taskInfo.websiteUrl, {waitUntil: 'domcontentloaded'}).catch(err => console.log(err))
  await page.waitFor(1000)

  try {
  // 截图
  await page.screenshot({path: snapShotFolerPath + taskInfo.imageName, fullPage:true}).catch(err => {
   console.log('截图失败: ' + err)
  });
  await page.waitFor(6000)
  } catch (e) {
  console.log('failed ' + e)
  } finally {
  await browser.close()

  fs.stat(snapShotFolerPath + taskInfo.imageName, function(err,stats){
   if (err) {
   reject('fail')
   } else {                         
   if (stats.isFile()) {
    resolve('success')
   }
   }
  })
  }

 })()
 })
}

module.exports = snapShot

如何安装 (Linux 、Unix 操作系统)

如果你有翻墙环境

  • 执行 npm install
  • 执行 npm start

如果你没有翻墙环境

  • 打开 package.json 文件,检查 dependencies 项目,如果 key 为 puppeteer 的条目,先删除该条目。
  • 进入工程命令行,输入 PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.co... npm i --save puppeteer
  • 执行 npm install 命令
  • 执行 npm start

流程说明

while 循环去调用接口去获取当前的截图任务

  • 在有截图任务情况下继续截图
  • 没有截任务的情况下,为了避免浪费资源,程序休眠10分钟后继续下一次的获取截图任务
  • 如果遇到调用截图任务接口500错误,则强制停止截图任务,相应的服务端工程师去查询失败原因

如果有截图任务那么就去截图

  • 截图后将截图图片保存到文件夹,命令为当前日期 yyyy-MM-dd-hh-mm-ss-S 格式。然后将结果上传到服务端
  • 截图失败将当前任务结果保存到本地 failedTasks.json 文件夹一份,然后上传到服务端

截图成功不管失败还是成功都去通知服务端。如果失败将当前任务告诉服务端,如果成功将当前任务信息和截图成功的绝对路径告诉服务端

一些说明

Demo 中执行 npm start 真正执行的是 quickStart.js 中的代码。完整的“获取截图任务、截图、截图上传到OSS、失败则将失败任务上传到服务”逻辑在 index.js 文件中

  • 工程是在没有提供真正的接口获取任务,而是采用随机数获取截图任务
  • 截图成功后将结果上传到OSS这一个步骤是没有的,采用 log 出来
  • 失败的上传也是不存在的,log 打印而已

todoList

  • 多线程高效率的去截图
  • 一些写法暂时比较粗糙,不优雅,待改进
  • puppeteer 很强大,大家可以去研究下

代码地址 (本地下载

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • 解决Mac node版本升级失败的问题

    解决Mac node版本升级失败的问题

    今天小编就为大家分享一篇解决Mac node版本升级失败的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-05-05
  • Nodejs进程管理模块forever详解

    Nodejs进程管理模块forever详解

    服务器管理是系统上线后,必须要面对的问题。最好有一个软件可以提供整套的服务器运行解决方案:要求运行稳定,支持高并发,启动/停止命令简单,支持热部署,宕机重启,监控界面和日志,集群环境。
    2014-06-06
  • 解决node-sass下载不成功的问题

    解决node-sass下载不成功的问题

    这篇文章主要介绍了解决node-sass下载不成功的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • node.js开机自启动脚本文件

    node.js开机自启动脚本文件

    这篇文章主要介绍了node.js开机自启动脚本文件的方法和代码,这里分享给大家,有需要的小伙伴参考下吧
    2014-12-12
  • node+multer实现图片上传的示例代码

    node+multer实现图片上传的示例代码

    这篇文章主要介绍了node+multer实现图片上传的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • 在Node.js中使用Swagger自动生成API接口文档

    在Node.js中使用Swagger自动生成API接口文档

    这篇文章主要给大家介绍了如何在Node.js项目中使用 Swagger 来自动生成 API接口文档,使用生成方式有很多种,本文基于swagger-jsdoc+swagger-ui-express快速实现,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • nodemailer邮箱发送验证码的实现

    nodemailer邮箱发送验证码的实现

    邮箱注册是常见的功能,通常需要发送邮箱验证码验证,本文就来介绍一下nodemailer邮箱发送验证码的实现,具有一定的参考价值,感兴趣的可以了解一下
    2023-10-10
  • 浅谈Node.js之异步流控制

    浅谈Node.js之异步流控制

    本篇文章主要介绍了浅谈Node.js之异步流控制,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Express框架实现简单拦截器功能示例

    Express框架实现简单拦截器功能示例

    这篇文章主要介绍了Express框架实现简单拦截器功能,结合实例形式分析了express框架拦截器相关功能与使用方法,需要的朋友可以参考下
    2023-05-05
  • 轻松创建nodejs服务器(9):实现非阻塞操作

    轻松创建nodejs服务器(9):实现非阻塞操作

    这篇文章主要介绍了轻松创建nodejs服务器(9):实现非阻塞操作,本系列文章会教你一步一步创建一个完整的服务器,要的朋友可以参考下
    2014-12-12

最新评论