前端项目发布自动化脚本

记录一下如何自己实现 jenkins 的自动化操作

# 背景

博主所在公司是一家小公司，内部项目发布是使用的 jenkins，开发人员手持 jenkins 帐号，需要发布开发环境时自己登录 web 端进行发布。

但是每次发版需要打开公司内的 jenkins 登录账号，手动选择系统、项目、分支、环境信息，就比较繁琐了，来回确认 bug 的时候懒得去打开网站。

所以借助一下脚本进行自动化操作(需安装 puppeteer)。

如果你也有类似的需求，可以参考下这篇文章。

# 使用方法

脚本内容另存为 autopub.js，执行命令 node autopub.js [项目名称] [分支名称] [环境]。 示例： node autopub.js oa-web feature/2022-01 dev

说明

• 执行成功之后会在命令行看到执行时间从而对应到 jenkins 的任务列表
• 将参数 headless 改为 false，可观察执行过程

# 参考代码

const puppeteer = require('puppeteer');

var date = new Date(new Date().getTime());
Y = date.getFullYear() + '-';
M =
  (date.getMonth() + 1 < 10
    ? '0' + (date.getMonth() + 1)
    : date.getMonth() + 1) + '-';
D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
m =
  (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();

const pubTime = Y + M + D + h + m + s;

(async () => {
  let account = '登录帐号',
    password = '登录密码';
  let options = process.argv,
    projectName = options[2] || '默认项目名',
    branchName = options[3] || '默认分支',
    envName = options[4] || 'dev';
  console.log('项目:' + projectName, '分支:' + branchName, '环境:' + envName);
  const browser = await puppeteer.launch({
    headless: true,
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox',
      '--disable-blink-features=AutomationControlled',
    ],
    dumpio: false,
  });
  const page = await browser.newPage();

  await page.goto('http://192.168.121.71:8080/login', {
    waitUntil: 'networkidle0',
  });

  await page.type('input[name="j_username"]', account);
  await page.type('input[name="j_password"]', password);

  console.log('登录 jenkins...');
  await page.click('.submit .submit-button');

  await page.waitForTimeout(200);

  console.log('跳转发布参数页');

  await page.goto(
    'http://192.168.121.71:8080/job/%E5%8F%91%E5%B8%83%E6%B5%8B%E8%AF%95%E7%8E%AF%E5%A2%83/build?delay=0sec',
    {
      waitUntil: 'networkidle0',
    }
  );

  // 选择需要发布的系统
  await page.$('div[description="选择需要发布的系统"]');
  await page.click(
    'div[description="选择需要发布的系统"] select[name="value"]'
  );
  // await page.waitForTimeout(500);
  console.log('选择新平台');
  await page.select(
    'div[description="选择需要发布的系统"] select[name="value"]',
    '新平台'
  );

  //   await page.waitForTimeout(500);
  // 选择发布的服务的类型
  await page.click(
    'div[description="选择发布的服务的类型"] select[name="value"]'
  );
  await page.select(
    'div[description="选择发布的服务的类型"] select[name="value"]',
    'web'
  );

  // 选择发布的服务的类型
  await page.click('div[description="选择发布的服务"] select[name="value"]');
  await page.select(
    'div[description="选择发布的服务"] select[name="value"]',
    projectName
  );

  // 选择发布的版本(分支-分支id)
  await page.click(
    'div[description="选择发布的版本(分支-分支id)"] select[name="value"]'
  );

  const branches = await page.evaluate(() => {
    const elements = Array.from(
      document.querySelectorAll(
        'div[description="选择发布的版本(分支-分支id)"] select[name="value"] option'
      )
    );
    return elements.map((o) => {
      let name = o.innerHTML;
      return name;
    });
  });

  //   确定目标分支
  let targetBranch = branches.find((b) => b.indexOf(branchName) != -1);
  console.log('选择分支:' + targetBranch);

  //   选择分支
  await page.select(
    'div[description="选择发布的版本(分支-分支id)"] select[name="value"]',
    targetBranch
  );
  //  选发布环境
  let envs = {
    dev: '开发环境input控件的value值',
    test: '测试环境input控件的value值',
  };

  await page.click(`input[value="${envs[envName]}"]`);

  console.log('选择环境:' + envs[envName]);

  await page.evaluate(() => {
    const elements = Array.from(
      document.querySelectorAll('input[type="checkbox"]')
    );
    elements[elements.length - 1].checked = false;
  });

  await page.click('#yui-gen1-button');
  console.log('发布时间:' + pubTime);

  await browser.close();
})();

# 效果演示

加了 koa 处理请求之后，关键部分的效果

原文地址：https://cloud.tencent.com/developer/article/1939387