Visual Testing 原理簡介
前言
在開始介紹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
