優缺點

• 優點
  • 有時候有可能一個改動導致其他的地方的功能失去效果，這樣使用 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)
}

執行程序

node index.js

總結

• 看上去是不是很簡單，可以模擬用戶操作
• 示例源碼