多环境自动登录，并打包为exe

公司项目太多，每次登录要找半天的url、账号、密码，十分麻烦。考虑到需要自动打开浏览器，自动输入账号密码，所以采用UI自动化测试中常用的库：selenium。

实现效果

主代码

思路:

• 利用selenium操作页面DOM, 伪代码如下:

import { Builder, By } from "selenium-webdriver"
let driver = await new Builder().forBrowser("chrome").build()
await driver.get(config.url)
// 需要等待渲染完成，才能获取dom
// findElement查找元素
// By.css 通过css选择器查找元素
// sendKeys()绑定input框的value
// click() 点击元素
await driver.findElement(By.css('.class')).sendKeys('value')
await driver.findElement(By.css('#btn')).click()

• 打开浏览器需要用到浏览器驱动, 本项目主要用到的是谷歌浏览器驱动, 需要与入口js在同一级目录
• 利用inquirer获取用户选择
• config配置文件需要动态引入, 以便后期更改
• 注意selenium需要使用3.6.0以下版本, 新版本打包时会有问题

src/index.js 入口文件

import { Builder, By } from "selenium-webdriver"
import inquirer from "inquirer"
import fs from "fs"
import path from "path"
// // require("chromedriver") chromedriver库会自动引入浏览器驱动，本项目已经下载有驱动，所以不需要引入chromedriver

// 动态引入config配置
const config = JSON.parse(fs.readFileSync(path.join(process.cwd(), "./config.json")))

async function startLogin(config) {
  let driver = await new Builder().forBrowser("chrome").build()
  await driver.get(config.url)
  // 需要等待渲染完成，才能获取dom
  setTimeout(async () => {
    await driver.findElement(By.css(config.elements.userInput)).sendKeys(config.account.username)
    await driver.findElement(By.css(config.elements.pwInput)).sendKeys(config.account.password)
    await driver.findElement(By.css(config.elements.submit)).click()
  }, 500)
}

// 获取用户输入
function getConfig() {
  inquirer
    .prompt([
      {
        type: "list",
        message: "请选择环境",
        name: "env",
        choices: ["test", "production"],
      },
      {
        type: "list",
        message: "请选择项目",
        name: "project",
        choices: ["project01", "project02", "project03"],
      },
    ])
    .then(res => {
      startLogin(config[res.env][res.project])
    })
}

getConfig()

打包

本项目主要使用rollup进行打包, 也可以不打包, 直接使用pkg打包为exe, 考虑到rollup打包可操作空间更大(比如减小包体积等), 并且pkg只支持commanjs, 因此项目选择先打包, 再编译为exe

rollup配置文件

rollup.config.mjs

import resolve from "@rollup/plugin-node-resolve"
import commonjs from "@rollup/plugin-commonjs"
import json from "@rollup/plugin-json"
import copy from "rollup-plugin-copy"
import { terser } from "rollup-plugin-minification";

export default {
  input: "./src/index.js", //入口文件
  output: {
    file: "./dist/login.js", //打包后的存放文件
    format: "cjs", //输出格式 amd es6 iife umd cjs
  },
  plugins: [
    // 代码压缩
    terser(),
    // 解析并导入第三方模块
    commonjs(),
    resolve(),
    // 编译json文件
    json(),
    // 静态资源
    copy({
      targets: [
        {
          src: "./src/config.json",
          dest: "dist",
        },
        {
          src: "./src/chromedriver.exe",
          dest: "dist",
        },
      ],
    }),
  ],
}

打包为exe

• 主要使用pkg将代码打包为exe文件

npm install -g pkg

打包

cd ./dist
# -t win window模式的可执行文件(也就是exe)
pkg -t win ./login.js  
# 不加-t win默认会同时编译出 linux 、windows 、mac 版的 exe
pkg ./login.js  

配置到package.json中

{
  "scripts": {
    "build": "rollup --config && cd dist && pkg -t win ./login.js"
  }
}

解决: 打包速度太慢, 超时

pkg打包时会先去下载相关文件, 如我本地是:v3.4的node-v16.16.0-win-x64文件

此时再打包, 就会快很多了

github

• github