Puppeteer介绍与实战

1
const chalk = require('chalk')
2
const fs = require('fs')
3
const path = require('path')
4
const inquirer = require('inquirer')
5
const { exec } = require('child_process')
6
const oneLineLog = require('single-line-log').stdout
7
const jenkinsPageUrl = 'https://jenkins.qmpoa.com/job/BetaFE_qmp_pc_ddm_new_bjqtable/build?delay=0sec'
8
const configFilePath =  path.join(__dirname, './jenkins_user_config')
9
const configJoinChar = ' '
10
const envFilePath = path.join(__dirname, './jenkins_env')
11
const branchChangedErrorMessage = 'remote branch changed'
12
let browser
13
const autoBuild = async () => {
14
  try {
15
    console.log(chalk.yellow('启动中···'))
16
    browser = await require('puppeteer').launch({
17
      // headless: false,
18
      // executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'
19
    })
20
    const page = await browser.newPage()
21
    console.log(chalk.yellow('页面初始化中···'))
22
    await page.goto(jenkinsPageUrl)
23
    let userConfig
24
    if (fs.existsSync(configFilePath)) {
25
      userConfig = fs.readFileSync(configFilePath, 'utf-8').replace('\r', '').replace('\n', '')
26
    }
27
    if (!userConfig) { // 没有存配置文件，或配置文件没有内容，视为第一次使用
28
      console.log(chalk.yellow('未检测到用户信息，请先登录'))
29
      userConfig = await getUserConfig()
30
    }
31
    await login(page, ...userConfig.split(configJoinChar))
32
    // await page.waitForNavigation()
33
    console.log(chalk.yellow('数据获取中···'))
34
    await page.waitForResponse(res => {
35
      return res.url().includes('mbranch')
36
    })
37
    await page.waitForTimeout(100)
38
    const localBranch = await getCurrentGitBranch()
39
    const remoteBranch = `origin/${localBranch}`
40
    const jenkinsPageBranches = await page.$$eval('#gitParameterSelect option', (nodes) => {
41
      return nodes.map(e => e.innerText)
42
    })
43
    // console.log(remoteBranch, jenkinsPageBranches)
44
    if (!jenkinsPageBranches.includes(remoteBranch)) {
45
      if (jenkinsPageBranches.length) {
46
        await new Promise((resolve, reject) => {
47
          exec(`git push origin ${localBranch} -u`, () => {
48
            reject({ message: branchChangedErrorMessage })
49
          })
50
        })
51
      }
52
      // console.log(chalk.yellowBright(`远程分支「${remoteBranch}」找不到，请检查！`))
53
      // process.exit(1)
54
    }
55
    await page.select('#gitParameterSelect', remoteBranch) // 在页面设置分支
56
    const buildInfo = { branch: remoteBranch }
57
    // 找对应的环境
58
    const jenkinsEnv = await getJenkinsEnv()
59
    const envSelector = '[value="DEPLOYPATH"] + select'
60
    const jenkinsPageEnvOptions = await page.$$eval(envSelector + ' option', (nodes) => {
61
      return nodes.map(e => e.innerText)
62
    })
63
    // console.log(jenkinsEnv, jenkinsPageEnvOptions)
64
    if (!jenkinsPageEnvOptions.includes(jenkinsEnv)) {
65
      console.log(chalk.yellowBright(`jenkins没有部署${jenkinsEnv}环境，请先部署！`))
66
      console.log(chalk.blue(jenkinsPageUrl))
67
      process.exit(1)
68
    }
69
    await page.select(envSelector, jenkinsEnv) // 在页面设置环境
70
    buildInfo.env = jenkinsEnv
71
    if (process.argv.includes('--install')) { // 重新安装依赖
72
      await page.click('.jenkins-checkbox')
73
      buildInfo.reinstall = true
74
    }
75
    const buildId = await getBuildSerialNumber(page)
76
    await page.click('button[name="Submit"]')
77
    console.log(chalk.yellow('已加入构建任务'))
78
    console.log(chalk.cyanBright(
79
      `构建参数:  ${Object.entries(buildInfo).map(([k, v]) => `${k}:${chalk.greenBright(v)}`).join('  ')}`
80
    ))
81
    await page.waitForNavigation()
82
    let prevStatus
83
    const timer = setInterval(async () => {
84
      const status = await handleBuildStatus(page, buildId, prevStatus)
85
      if (status !== 'Pending' && status !== 'In progress') {
86
        clearInterval(timer)
87
        process.exit(0)
88
      }
89
      prevStatus = status
90
    }, 400)
91
  } catch (e) {
92
    console.log(chalk.red(e.message))
93
    if (e.message.includes('Cannot find module \'puppeteer\'')) {
94
      console.log(chalk.red('请更新依赖'))
95
      process.exit(1)
96
    } else {
97
      if (e.message.includes(branchChangedErrorMessage)) {
98
        console.log(chalk.yellow('分支已更新，正在重新加载'))
99
      } else {
100
        console.log(chalk.yellow('未知错误，正在尝试重新启动'))
101
      }
102
      if (browser) {
103
        await browser.close()
104
      }
105
      autoBuild()
106
    }
107
  }
108
}
109
autoBuild()
110
async function getCurrentGitBranch() {
111
  return new Promise((resolve, reject) => {
112
    // 高版本git使用命令 git branch --show-current
113
    exec('git rev-parse --abbrev-ref HEAD', (err, res) => {
114
      if (err) {
115
        reject(err)
116
      } else {
117
        resolve(res.replace('\r', '').replace('\n', ''))
118
      }
119
    })
120
  })
121
}
122
async function chooseEnv() {
123
  const { isClientEnv, branches } = require('../../branch.config')
124
  const devBranches = branches
125
    .filter(item => !isClientEnv(item.name))
126
    .map(item => {
127
      return { ...item, value: item.name }
128
    })
129
  const branch = await inquirer.prompt([
130
    {
131
      type: 'list',
132
      name: 'branch',
133
      message: '选择部署环境',
134
      choices: devBranches
135
    }
136
  ])
137
  return branch.branch
138
}
139
async function getJenkinsEnv() {
140
  let env
141
  if (process.argv.includes('--set-env')) {
142
    env = await chooseEnv()
143
  } else {
144
    if (fs.existsSync(envFilePath)) {
145
      env = fs.readFileSync(envFilePath, 'utf-8')
146
    }
147
    if (!env) {
148
      env = await chooseEnv()
149
    }
150
  }
151
  env = env.toLowerCase().replace('ddm', '').replace('\r', '').replace('\n', '')
152
  return `qmp_pc_ddm${env ? '_' + env : ''}`
153
}
154
async function getUserConfig() {
155
  const uname = (await inquirer.prompt({
156
    type: 'input',
157
    name: 'uname',
158
    message: '用户名：'
159
  })).uname
160
  const pwd = (await inquirer.prompt({
161
    type: 'password',
162
    name: 'pwd',
163
    message: '密码：'
164
  })).pwd
165
  return `${uname}${configJoinChar}${pwd}`
166
}
167
async function fillLoginForm(page, uname = '', pwd = '') {
168
  await page.type('[name="j_username"]', uname)
169
  await page.type('[name="j_password"]', pwd)
170
  await page.click('[name="Submit"]')
171
  try {
172
    await page.waitForResponse(res => {
173
      // console.log(res.url())
174
      return res.url().includes('loginError')
175
    }, { timeout: 1000 })
176
  } catch (e) {
177
    // 没捕获到该请求，说明登录通过了
178
    // 将用户名和密码存到配置文件里
179
    fs.writeFile(configFilePath, `${uname}${configJoinChar}${pwd}`, () => {})
180
    return true
181
  }
182
  console.log(chalk.red('登录用户名或密码错误，请重新输入!'))
183
  return false
184
}
185
async function login(page, uname = '', pwd = '') {
186
  let isPassed
187
  do {
188
    isPassed = await fillLoginForm(page, uname, pwd)
189
    if (!isPassed) {
190
      ([uname, pwd] = (await getUserConfig()).split(configJoinChar))
191
    }
192
  } while (!isPassed)
193
}
194
async function getBuildSerialNumber(page) {
195
  const text = await page.$eval('.build-row', e => e.innerText)
196
  const idNum = parseInt(text.match(/#(\d+)/)[1])
197
  return idNum + 1
198
}
199
let pendingTipDotCount = 0
200
const maxPendingTipDotCount = 6
201
async function handleBuildStatus(page, buildId, prevStatus) {
202
  // 几种情况 排队中 构建中 已取消 已失败 已成功
203
  let status
204
  try {
205
    const attr = await page.$eval(`a.build-status-link[href*='${buildId}']`, e => e.getAttribute('tooltip'))
206
    if (attr) {
207
      status = ['Success', 'In progress', 'Failed', 'Aborted'].find(status => attr.startsWith(status))
208
      if (status === 'Aborted') {
209
        oneLineLog.clear()
210
        oneLineLog('')
211
        console.log(chalk.gray('构建被取消！'))
212
      } else if (status === 'Failed') {
213
        oneLineLog.clear()
214
        oneLineLog('')
215
        console.log(chalk.red('构建失败！'))
216
      } else if (status === 'Success') {
217
        oneLineLog.clear()
218
        oneLineLog('')
219
        console.log(chalk.green('构建成功！'))
220
      } else if (status === 'In progress') {
221
        if (prevStatus !== status) {
222
          oneLineLog.clear()
223
          oneLineLog('')
224
          console.log(chalk.cyanBright('开始构建:'))
225
        }
226
        const width = await page.$eval(`.progress-bar[href*='${buildId}'] .progress-bar-done`, e => e.style.width)
227
        oneLineLog(chalk.blue(`任务${buildId}: 构建进度${width}`))
228
      }
229
    }
230
  } catch (e) {
231
    // 没找到是pending
232
    status =  'Pending'
233
    const pendingList = await page.$$('.svg-icon.icon-nobuilt, .svg-icon[class*="-anime"]')
234
    const pendingLength = pendingList.length > 1 ? pendingList.length - 1 : 0
235
    if (pendingLength) {
236
      if (pendingTipDotCount < maxPendingTipDotCount) {
237
        pendingTipDotCount += 1
238
      } else {
239
        pendingTipDotCount = 0
240
      }
241
      oneLineLog(chalk.blue(`排队中，前面还有${pendingLength}个任务${Array(pendingTipDotCount).fill('·').join('')}`))
242
    }
243
  }
244
  return status
245
}