交代背景

通過不到半年努力，我司前端開發已經完全轉向 CI/CD了，在轉型的道路上， 對于前端代碼的異常監控(聽云/senTry部分頁面有用)，沒有一個自己 主動觸發的定時巡檢系統，為了進一步提升質量，我們進行了 前端巡檢系統的開發

系統現狀

1. 系統是從8月初開發,中旬上線的。運行了1個月，通過不同組前端小伙伴之間的努力，線上已經沒有標紅報錯，且在 請求數/大文件請求/白屏時間都有明顯提升。
2. 對接測試/部署系統后，每次代碼發布都會執行巡檢，為前端代碼部署提供了保障

項目主要npm依賴

1. puppeteer，googleChrome出品的無頭瀏覽器，你可以像 控制木偶一樣，控制瀏覽器幫你打開頁面/填寫表單/在控制臺執行腳本等等，所以他的名字叫puppeteer
2. node-schedule，nodeJs執行定時任務/腳本的工具，詳細介紹
3. pm2,大名鼎鼎的PM2,不管在win/mac/linux都能幫你守護nodeJs程序
4. koa，出接口對接 測試系統/對接系統用的，當然還有什么koa-XXX/axios一堆
5. log4js，解決生產環境無法調試多記錄日志的工具
6. mongodb,持久化數據使用，無論是巡檢記錄/log信息
7. mongoose，優雅的使用nodeJs鏈接mongodb
8. shelljs，不用考慮兼容性，直接寫shell的nodeJs工具
9. standard，沒有規矩不成方圓，代碼規范還是需要的
10. 釘釘群機器人，把定期結果/通知/報錯 不同類型的消息即使發送給不同的群

主要實現

puppeteer在centos7上安裝有點費勁

報錯:
...node_modules/puppeteer/.local-chromium/linux-496140/chrome-linux/chrome: error while loading shared libraries: libpangocairo-1.0.so.0: cannot open shared object file: No such file or directory
解決:

#依賴庫
yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 -y

#字體
yum install ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc -y

報錯:
(node:30559) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Failed to connect to chrome!
(node:30559) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
解決:

const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});

模擬移動端設備 或者 設置UA - emulate - iphone為例

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto('https://www.google.com');
  // other actions...
  await browser.close();
});

設置瀏覽器分辨率 - setViewport

const puppeteer = require('puppeteer');


puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.setViewport({
              width: 1920,
              height: 1080
   })
  await page.goto('https://www.google.com');
  // other actions...
  await browser.close();
});

URL列表 需要一次一次打開怎么處理

1. 循環就好了，雖然耗時時間長，不過能減少 因為CPU/內存/網絡帶來的不穩定因素

puppeteer核心代碼

const puppeteer = require('puppeteer')
const devices = require('puppeteer/DeviceDescriptors')
const iPhone = devices['iPhone 8']
const _platform = process.platform
const _conf = _platform === 'darwin1' ? {
  headless: false
} : {
  args: ['--no-sandbox', '--disable-setuid-sandbox']
}

module.exports = async function run (url, isMobile) {
  return new Promise(async (resolve, reject) => {
    const _arr = []
    for (let i = 0; i < url.length; i++) {
      await puppeteer.launch(_conf).then(async browser => {
        const promises = []

        const _url = url[i]
        promises.push(browser.newPage().then(async page => {
          if (isMobile) {
            await page.emulate(iPhone)
          } else {
            await page.setViewport({
              width: 1920,
              height: 1080
            })
            await page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36')
          }

          await page.goto(_url).catch(async error => {
            // await page.close()
            console.log(error)
          })
          await page.close()
        }))

        await Promise.all(promises).catch(e => {
          console.log('---catch start---')
          console.log(e)
          console.log('---catch start---')
        })
        await browser.close()
      })
    }
    resolve(_arr)
  })
}

定時任務

const schedule = require('node-schedule')
const URL = require('../../config/j')
const run = require('./../service/p')
const Rule = new schedule.RecurrenceRule()
Rule.second = [10, 20, 30, 40, 50, 55]

schedule.scheduleJob(Rule, async function () {
  site({
    pageArr: URL(),
    isMobile: 1
  })
})

async function site (...params) {
  await run(params[0].pageArr, params[0].isMobile).catch(e => {
    console.log(e)
  })
  console.log('end')
}

URL列表

const router = [
  'https://www.baidu.com/'，
 'https://www.baidu.com/'
]

module.exports = function arr () {
  return router
}

gitHub 簡易源碼

https://github.com/kyle920326/pupp
可以直接clone下來，參考查看

npm install
npm run dev

備注

koa,log4js,mongodb的部分留到以后再寫哈，先把主要實現記錄下