今天來談談測試種類～

上週寫了篇想學測試的動機，今天來嘗試不看筆記、書籍的情況下盲打一篇自己對於各個測試的理解（？）

單元測試

基本上就是針對最小單元的程式碼去做測試，上週的文章有提到像是計時器之類的，以我目前的工作場景有用到像是：

1. 將時間戳轉成網站共用的時間格式
2. 將存入 AWS S3 的 key 轉為固定的「年/月/日/隨機檔案名稱」格式

（補充一下：因為我有寫 Node.js 後端～所以雖然書籍是前端，但還是會運用在後端上！）

等等之類的，就是那一種非常小的 function 或是 method～就會用單元測試，確保這種很小的單一功能程式不會出錯，如此一來有許多地方共同套用時，就不會一步錯通通錯 XD

基本上也會是測試數量最多，但範圍最小的一種測試。

不過單元測試還是會有它測不到的地方，因為針對的東西太小的，其實無法真的去測到使用者真正實際的流程之間是否會有錯誤，例如有一個情境可能是要把格式化好的時間顯示在某個 Input 上，或許時間格式本身對、顯示的 Input 本身也是沒問題，但是在「顯示到 Input」上可能出錯，這個單元測試就測不到了，畢竟這範圍就不小，就會需要使用到整合測試或是端對端測試來補足這件事。

整合測試

整合測試偏向是針對多個元件協作後的驗證，例如上面提到的格式化好的時間顯示在某個 Input 上，或是點擊了什麼按鈕就會出現一段「Hello World!」之類的東西，就很適合運用整合測試～可以去測試到說這個元件的實際流程長什麼樣子。

當然缺點就是無法像是單元測試那樣，去測到這麼鉅細靡遺的東西～但它們是相輔相成的，單元測試無法測到整體的流程，就可以靠整合測試來補足，因此更貼近使用者的實際操作狀況。

端對端測試

完了到這裡開始在偷看小抄筆記了（誒）趕快看完用自己的話講 XDD

基本上這個測試會模擬整套使用者流程，例如以電商網站來說，使用者可能面臨打開瀏覽器、進入網站之後，可能會點擊特定的功能（可能是登入？）或著是說一般會從商品頁面進入的話，那會是點擊加入購物車？等等之類的一系列行為。

例如最簡單的我進入該頁面該怎麼去知道說這是什麼商品？最簡單的就是看到標題～但會不會不小心標題不見 XD？這就是測試可以去做到的～去點擊商品頁面之後能夠順利取標題的話，這個部分的測試就算過～也可以模擬整個登入到購買的流程來去確保說每個步驟都是正確的，收到錢錢沒問題 XD

至於其缺點的話跟整合測試一樣～比較測不到根本的問題，會需要靠單元測試補足，但是整體測試是最符合使用者操作流程的！

視覺測試

這是上週有提到的視覺測試～

可以透過安裝第三方套件之後，先對一開始的網頁畫面來去做快照，後續如果有任何的更動，會以視覺 diff 呈現差異，快速發現不如預期的畫面變動，以及各裝置、大小是否也符合預期，會去抓一個誤差範圍內是否符合，就可以一次測到許多不一樣的情境！

來個重點整理（其實是我之前看完書後摘錄下來的重點摘錄 XDD）

單元測試 - 精準小功能

• 針對 function、method 等最小範圍功能的測試。
• 例如一個簡單的數字計算，這個過程中可能的參數、所計算出的結果，是否符合或悖離事實。
• 數量最多的測試種類，但是範圍是最小的，因為專注於在該功能，並且更能找到根本原因。
• 但是與元件的整合就比較無法測到，因為是專注於本身。這點就需要靠整合測試補足。
• 適合對象：產品核心功能，驗證 function、method、class instance 輸入與輸出合邏輯。

整合測試（功能測試）- 元件之間的互動

• 針對「合併的程式碼」進行測試。
• 針對整合元件、套件與函式庫、從 API 拿到資料的呈現等。
• 更貼近使用者實際操作狀況。
• 較難發現根本原因，但能透過單元測試補足。

端對端測試（E2E 測試）- 模擬流程

• 模擬使用者實際操作的流程，例如開啟瀏覽器、進入網站、點擊特定功能後等一系列行為。
  • Ex. 打開網址的網站後，是否能夠拿到標題。
• 能完整測試產品功能，最貼近使用者操作狀況，但是較難發現根本原因，要從單元測試找起。

視覺測試 - 比對畫面

• 自動檢測使用者介面變更，對使用者的畫面進行快照後比對。
• 可以達到精準的視覺比對，並針對多種裝置與跨瀏覽器進行測試，
• 需要使用到第三方服務，並且動態改變畫面無法有效檢測出來。

總結

上述提到了這麼多種測試，都可以用在應付各個不同的場景上～但不論是用哪一種測試類型，重點還是要從最重要的地方、商業邏輯開始撰寫，譬如電商網站從購物流程下去優先測試，畢竟能夠收到錢才是根本（？）

另外，測試數量也並非是愈多愈好，還是要針對目前的專案情境來去評估撰寫，還是更重要的！

這週我也才剛開始有更實際運用在工作上，還在感受與摸索中，希望之後更加熟悉後再帶來更多自己實際上的體會～

參考資料

• 前端測試指南：策略與實踐 - 唐心皓（Summer） 著
• 有請 Chat GPT 幫我勘誤、增加重點整理的標題描述
• 縮圖是 Chat GPT 產生出來的