命令列批量截圖Node指令碼

杭城小劉發表於2019-01-25
命令列指令碼

批量截圖任務

作為一個軟體工程師，不只是做好自己的本職工作（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 作業系統)

  • 如果你有翻牆環境

    1. 執行 npm install
    2. 執行 npm start

  • 如果你沒有翻牆環境

    1. 開啟 package.json 檔案，檢查 dependencies 專案，如果 key 為 puppeteer 的條目，先刪除該條目。
    2. 進入工程命令列，輸入 PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org npm i --save puppeteer
    3. 執行 npm install 命令
    4. 執行 npm start

流程說明

  1. while 迴圈去呼叫介面去獲取當前的截圖任務
    • 在有截圖任務情況下繼續截圖
    • 沒有截任務的情況下，為了避免浪費資源，程式休眠10分鐘後繼續下一次的獲取截圖任務
    • 如果遇到呼叫截圖任務介面500錯誤，則強制停止截圖任務，相應的服務端工程師去查詢失敗原因
  2. 如果有截圖任務那麼就去截圖
  • 截圖後將截圖圖片儲存到資料夾，命令為當前日期 yyyy-MM-dd-hh-mm-ss-S 格式。然後將結果上傳到服務端
  • 截圖失敗將當前任務結果儲存到本地 failedTasks.json 資料夾一份，然後上傳到服務端
  1. 截圖成功不管失敗還是成功都去通知服務端。如果失敗將當前任務告訴服務端，如果成功將當前任務資訊和截圖成功的絕對路徑告訴服務端

一些說明

Demo 中執行 npm start 真正執行的是 quickStart.js 中的程式碼。完整的“獲取截圖任務、截圖、截圖上傳到OSS、失敗則將失敗任務上傳到服務”邏輯在 index.js 檔案中

  • 工程是在沒有提供真正的介面獲取任務，而是採用隨機數獲取截圖任務
  • 截圖成功後將結果上傳到OSS這一個步驟是沒有的，採用 log 出來
  • 失敗的上傳也是不存在的，log 列印而已

todoList

  • 多執行緒高效率的去截圖
  • 一些寫法暫時比較粗糙，不優雅，待改進
  • puppeteer 很強大，大家可以去研究下

程式碼地址

相關文章