工作自动化-puppeteer

背景

最近工作中被同事要求帮合并代码（GitLab Merge Requset），平均一天约10次。由于工作被打断的次数比较多，另外MR时代码评审也不如提测后分支对比代码评审，所以想着能否由脚本来自动MR。

工作中沟通我更倾向于邮件或者即时聊天工具留言，但是我司企业文化是：大家多沟通，沟通中多"喊话"，显得其乐融融。

Electron方案

自动MR需求：开启定时任务，浏览器打开gitlab网站，模拟输入、点击、跳转、等待、输入、点击、跳转、等待...

得有一个界面加载gitlab网站吧，我首先想到是electron

首先加载gitlab页面。初始化node项目，安装electron包，入口index.js主要代码如下：

scss 复制代码

const {app, BrowserWindow } = require('electron');

function openGitLabWebsite() {
  // 创建一个新的浏览器窗口
  let win = new BrowserWindow({
    width: 800,
    height: 600
  });

  // 加载GitLab网站
  win.loadURL('https://www.gitlab.com');

  // 显示窗口
  win.show();
}

// 当Electron完成初始化并准备创建浏览器窗口时调用openGitLabWebsite函数
app.whenReady().then(() => {
  openGitLabWebsite();
});

然后需要模拟点击。Electron自动化测试

需要启动webDriver服务来加载我们的electron，来模拟点击。看官方的代码可能更容易理解

javascript 复制代码

const webdriver = require('selenium-webdriver')
const driver = new webdriver.Builder()
  // 端口号 "9515" 是被 ChromeDriver 开启的.
  .usingServer('http://localhost:9515')
  .withCapabilities({
    'goog:chromeOptions': {
      // 这里填您的Electron二进制文件路径。
      binary: '/Path-to-Your-App.app/Contents/MacOS/Electron'
    }
  })
  .forBrowser('chrome') // note: use .forBrowser('electron') for selenium-webdriver <= 3.6.0
  .build()
driver.get('https://www.google.com')
driver.findElement(webdriver.By.name('q')).sendKeys('webdriver')
driver.findElement(webdriver.By.name('btnG')).click()
driver.wait(() => {
  return driver.getTitle().then((title) => {
    return title === 'webdriver - Google Search'
  })
}, 1000)
driver.quit()

总结

放弃这个方案，如果需要单独启动一个webDriver，那我为什么不直接用webdriver呢？

那么electron是否有直接模拟点击的方法呢，有@electron/remote。但新版本移除，原因大家可以查一查。

Puppeteer.js方案

pptr.nodejs.cn/

由直接使用webdriver这个思路，用通信千问找到puppeteer, 它的官网比较差，通信千问给出的demo代码，直接能用。

大概代码如下：

javascript 复制代码

// 首先确保已经通过npm安装了puppeteer
// 安装命令：npm install puppeteer

const puppeteer = require('puppeteer');

async function runPuppeteerDemo() {
  // 启动一个Headless Chrome实例，也可以设置为false以显示浏览器窗口
  const browser = await puppeteer.launch({ headless: true });

  // 创建一个新的浏览器页面
  const page = await browser.newPage();

  // 访问目标网站
  await page.goto('https://example.com/login', { waitUntil: 'networkidle2' });

  // 模拟用户输入账号和密码
  await page.type('#username-input', 'your_username');
  await page.type('#password-input', 'your_password');

  // 模拟点击登录按钮
  await page.click('#login-button');

  // 等待页面加载完成（根据实际情况调整等待条件）
  await page.waitForNavigation({ waitUntil: 'networkidle2' });

  // 抓取页面上的特定元素内容
  const pageTitle = await page.title();
  const content = await page.evaluate(() => document.querySelector('#content').innerText);

  console.log('页面标题:', pageTitle);
  console.log('页面主要内容:', content);
  
  // 定位到子元素
  const inputElement = await page.$('#child-element-id .demo');

  // 确保定位到了一个可输入文本的元素，比如 <input> 或 <textarea>
  if (inputElement) {
    // 在输入框中输入文本
    await inputElement.type('Hello, Puppeteer!');
  } else {
    console.error('未找到具有id "child-element-id" 的输入元素');
  }

  // 截取页面全屏快照并保存为图片
  await page.screenshot({ path: 'screenshot.png' });

  // 关闭浏览器
  await browser.close();
}
// 定时任务
setInterval(() => {
    runPuppeteerDemo();
}, 5*60*1000)

总结

puppeteer可以启动一个Headless Chrome实例, 不显示界面。不会获取电脑的焦点。
API也挺简洁的，对比以前用写java的selenium，js真是高效啊。

Java语言写很多代码干很少的事情，能否适应未来呢？

Puppeteer这类自动化工具，能完成很多工作中的自动任务，再发挥下想象力。