puppeteer实现自动化运行jekins

使用puppeteer实现一个自动化发布qa代码工具，平时主要发布qa代码主要是通过jekins，然后搜索相应的项目，填写分支名称，构建前端代码，生成tag值，然后又搜索对应项目的node项目，再次填充之前的tag值和分支名称，还有要发布的环境。主要是通过puppeteer来实现各个功能的。下来进行各个步骤的解析，已经puppeteer功能的介绍。

安装puppeteer，npm puppeteer有可能会失败，建议切换淘宝镜像源安装。

1 . 首先我们要实现的是打开浏览器输入对应地址。代码如下：

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false, //有浏览器界面启动
        slowMo: 100, //放慢浏览器执行速度，方便测试观察
        defaultViewport: { width: 1280, height: 800 },
        args: [
        '–no-sandbox',
        '--window-size=1280,960'
        ]
    });
    const page = await browser.newPage();
    // return
    await page.goto(finUrl, {
      timeout: 0
    });
  })();

这块的代码主要是实例化puppeteer，配置参数，headless：是否可视化打开，slowMo：相当于放慢操作，便于观察，defaultViewport：打开窗口的大小，还有一些其他的参数在这里就不多介绍了，接着声明一个page变量，就相当于是创建了一个页面，然后goto是打开具体的页面。

2.跳转到具体的页面之后，填写账号密码登录jekins，登录界面如下，

实现代码如下：

	await page.waitForSelector('#username');
    await page.$eval('#username',(el,user)=>el.value=user,user);
    await page.$eval('#password',(el,password)=>el.value=password,password);
    const login = await page.$('#fm1 > section.row.btn-row > input.btn-submit');
    await login.click();

waitForSelector就是等待该选择器对应的元素出现，这里的username就是用户名输入框，等输入框出现之后输入用户名和密码，这里的user和password是我提前定义好的账号和密码，需要注意的是如果要使用其他变量，需要在$eval的第三个传递进去，才可以使用，然后就是点击login登录按钮，这里获取元素的方式跟JQuery是相似的，如果又JQuery基础就很容易上手。

3.到达我们目标页面，需要点击构建代码按钮，同样是获取按钮元素然后触发click事件即可，然后我们就会处于一个构建的状态，下来就需要监听这个构建状态是否已经结束，需要用到定时器。

let timeFlag = setInterval(async function() {
	// 监听构建成功之后的标志，获取成功之后的tag值
},4000)

通常进到页面未构建代码之前会有一个值，表示已经构建了多少次，比如这里的3236表示已经构建了这么多次，然后我会触发构建之后会一直监听这个值，如果这个值比之前大1就说明当前正在构建，构建完成之后会生成一个tag值，然后一直轮询有没有生成tag值。

4.拿到tag值，跳转到node项目页面，然后填充tag值和要发的环境值，这里需要注意的是跳转新页面代码需要重新实例化一个page，还要清除之前的定时器。

clearInterval(timeFlag)
const page2 = await browser.newPage();
await page2.goto(newurl);

5.到达新页面之后填写相关的数据，这里需要注意的是，环境选择时的下拉框选择，这种原生的select框的赋值操作

await page2.select(‘#元素’, result)

这里的result就是要赋值的内容，比如上面的option又多个，我们要选择第二个result就是第二个option对应的value值。

6.继续点击构建按钮，然后再次监听构建是否结束，逻辑跟第一个是类似的，这样功能基本就完成了，最后我们通过运行脚本，传递相应的参数然后执行代码即可，还有需要注意的是有可能当前要运行的项目地址对应的某个元素选择器跟下一个项目的元素选择器是不同的，所以要进行区分。

总结一下用到的puppeteer具体的方法：

const page = await browser.newPage();	//创建页面
await page.goto(finUrl, {			//前往页面
  timeout: 0
});
await page.waitForSelector('#username');		//等待元素出现
await page.$eval('#username',(el,user)=>el.value=user,user);	//对元素赋值
const numFlag = await page.$eval('#', el => el.innerHTML)；	//获取某个元素的值
await build.click();		//触发元素点击事件
await page2.select(`#select`, result);		//下拉框赋值

基本上就用的到的是上面这些方法了。