Visual testing OpenCV Appitools QA

Visual Testing 原理簡介

張庭瑋 Gary Chang 2024/03/01 09:00:00
147

 

前言

在開始介紹Visual testing tool之前,筆者想要透過幾個常見的影像處理函式庫

讓讀者可以對怎麼使用Visual testing 有更多的想法

  本文不會牽涉到太多技術原理 (因為我也不懂),單就應用層面進行比較,讓我們開始吧!

 

視覺處理函式庫

常見有以下四種,以及主要應用範圍

OpenCV https://opencv.org/

-       臉部辨識、AR

Pillow (PIL Fork) https://pillow.readthedocs.io/en/stable/

-       生成網頁縮圖(thumbnails)

ImageMagick  https://imagemagick.org/index.php

-       圖像編輯,浮水印之類的批量作業

SikuliX  http://sikulix.com/

-       針對無法取得網頁元素的環境、直接在GUI介面上用圖像辨識進行自動化操作。

EX: 手機模擬器外掛

 

 

基本原理

雖然他們各自都有不同的方式來完成影像辨識/比較

例如:OpenCV是透過影像結構、Pillow透過顏色等等

不過最終還是依靠“比較像素(Pixel)” 來完成工作

 

可以用這個網站來實際體驗一下

https://rsmbl.github.io/Resemble.js/

 

簡單來說就是非常死板

來看看下面的圖片,函式庫可能會因為滑鼠懸服的變色效果,認為"同一個按鈕不是同一個按鈕"

 

這時候若是使用函式庫,我們就還要再進一步分析,然後設定條件:

1.    原始前端畫面 vs 滑鼠浮動變色

2.    原始前端畫面 vs 修改後前端畫面

 

若不幸地,系統認為這三張截圖都是不同圖片,那就頭大了,還要再去針對畫面位置設定例外條件

 

現成工具--以Appitools 為例 

直接使用現成的測試工具的話,下拉選單選一下就好

 

來看看他是怎麼進行分類的

Exact : 像素級別的比較

Strict : 字體、排版、顏色、位置….肉眼可見的元素

Content : Strict 相同,但是忽略顏色差異

Layout : 比較畫面的排版,如:按鈕、選單、文字區域等,會忽略內容、顏色等樣式差異

 

不同工具有他們的判定標準,例如上面提到的applitools就是以自己的ai工具為賣點

可以幫使用者省掉分析的步驟,其他工具(如Percy)的特色就不一一展開說明。

 

 

結語

本文到這邊,理論的部分已經說明完畢。根據筆者自己的使用經驗,這些函式庫使用上並沒有特別困難,加上能直接和Selenium連著用,在一些簡單場景中反而比爬取網頁元素 xpath/css還要省時間。可以參考現成工具的判定標準來想想判斷條件怎麼寫,但是隨著需求/測試情境變得複雜,還是考慮現成工具比較省心。

 

Ps 使用函式庫時,可能會因為不同裝置/瀏覽器設定、甚至測試的螢幕大小,讓圖像定位有偏差,所以多數工具才會強調跨平台測試是他們的賣點。

 

資料來源:

https://medium.com/@karlambsilva/visual-regression-testing-with-percy-io-c29d96a4485d

 

https://applitools.com/blog/why-screenshot-image-comparison-tools-fail/

https://allaboutdataanalysis.medium.com/終於把所有的python-都整理出來啦-4b52a1e51028

 

張庭瑋 Gary Chang