使用 selenium-webdriver 开发 Web 自动 UI 测试程序

优缺点

优点
- 有时候有可能一个改动导致其他的地方的功能失去效果，这样使用 Web 自动 UI 测试程序可以快速的检查并定位问题，节省大量的人工验证时间
缺点
- 增加了维护成本，如果功能更新过快或者技术更新过快，维护成本也会随之提高

技术栈

CSS + JavaScript + NodeJS [+ TypeScript]

安装依赖

npm i selenium-webdriver -D
# 如果是 TypeScript，还需要增加类型
npm i selenium-webdriver @types/selenium-webdriver -D

使用

需要一个测试的服务地址，这里用的是本地测试服务（确保你存在这个服务），比如：http://127.0.0.1:3333
By: 选择器
until: 工具集合
Browser: 浏览器
Builder: 程序服务

// index.js
import { By, until, Browser, Builder } from 'selenium-webdriver'

/**
 * 服务地址
 */
const testPath = `http://127.0.0.1:3333/`

/**
 * 启动服务
 */
const driver = await new Builder().forBrowser(Browser.CHROME).build()

try {
  await driver.get(testPath)
} catch {
  console.log(`请检查 ${testPath} 是否启动`)
  await driver.quit()
}

// 执行操作
try {
  const elementSelector = By.css('.btns li:first-child') // 选择器
  await driver.wait(until.elementLocated(elementSelector), 6000) // 等待时间, 最多 10 秒
  await driver.sleep(2000)
  await driver.findElement(elementSelector).click()
  await driver.sleep(2000)
} catch (error) {
  console.log(error)
}