基於影像差異識別與頁面自動遍歷的開源 web ui 測試庫

泰斯特發表於2020-07-14

WebUI

最近我把之前的 UI 測試新思路與程式碼整理了一番，

於是有了 Pic-Diff-Recognizer 的誕生。

什麼是 Pic-Diff-Recognizer ？

Pic-Diff-Recognizer 是基於影像差異識別與頁面遍歷探索的 Selenium UI 自動化測試外掛庫。

此庫誕生的目的是為了讓 UI 自動化測試不再需要與頁面元素打交道,

而是直接使用真實的視覺差異來判斷測試結果是否符合預期。

原始碼地址：

github: https://github.com/amazingTest/Pic-Diff-Recognizer

gitee: https://gitee.com/amazingTest/Pic-Diff-Recognizer

如何安裝？

首先安裝開源專案目錄下的依賴包：

pip install -r requirements.txt

然後再安裝今天的主角：

pip install pic-diff-recognizer

如何使用？

下面給大家放出最佳實踐：

from pic_diff_recognizer.searchHandler import SearchHandler
from violent_webdriver import Chrome
from selenium.webdriver.chrome.options import Options


# add some useful options :)
chrome_options = Options()
chrome_options.add_argument("--headless")
chrome_options.add_argument("disable-infobars")
chrome_options.add_experimental_option("excludeSwitches", ['enable-automation'])

# init driver , executable_path should be your own path!
dr = Chrome.violent_chromedriver(chrome_options=chrome_options,
                                 executable_path='/usr/local/bin/chromedriver')

# init searchHandler
search_handler = SearchHandler(browser=dr)

# search and saving baseline images in current directory named baseline
search_handler.traverse_href(origin_url='https://gitbook.cn/gitchat/author/5cea0bfbb78cc870612d8bba')

# -------------------- assuming after some iterations of current project -----------------------------

search_handler.url_histories = []

# load baseline images
search_handler.picture_handler.load_base_line()

# search and comparing screen shots and baseline images
search_handler.traverse_href(origin_url='https://gitbook.cn/gitchat/author/5cea0bfbb78cc870612d8bba',
                             compare_baseline_and_screen_shots=True)

# generate_diff_between_base_line_and_screen_shot and output diffResults to current directory
search_handler.picture_handler.generate_diff_between_base_line_and_screen_shot()

# output testReport.txt to current directory
search_handler.picture_handler.export_picture_comparison_result()

可以看到在專案迭代分割線之前，

程式先探索並儲存了待測頁面的影像。

而在專案迭代分割線之後，

程式再次探索待測頁面並對比了影像差異，

最終輸出測試報告。

相信這很好的對應了現實專案迭代中的回測節奏。

當然，目前來說此庫還有許多可以改進的地方。