前端頁面測試如何定位漏測程式碼

--本文由某股份制銀行測試部孫某特約分享

前端 UI 測試歷來是個 “細緻活”，在多個版本持續迭代釋出時，精力通常聚焦在新功能或者剛修復完缺陷的功能。難免會遺漏一些 “深層次” 功能未測試到，上線才被使用者發現。這是廣大測試同學的心結，“這之前都測試過，怎麼會有問題，要是上線前點到那個功能就能看到這個 bug 了”。

現在有一個 “防漏測神器” 可以讓大家不再擔心漏測了。這個工具是一個免費瀏覽器外掛，安裝後即可使用（下載地址請看文章最後一段），能在手工測試開展的同時，顯示一個程式碼覆蓋率水位球，顯示測試已經覆蓋了多少程式碼，哪些程式碼還沒有覆蓋。這在以前，是自動化測試才能做到的。

一圖勝前言，看下面的動圖，是模擬測試一個 “待辦事項” 應用的展示

從上圖可以看到，“待辦事項” 這個應用剛載入的時候，覆蓋率是 32%，隨著功能的使用，程式碼覆蓋率很快達到了 90%，還顯示了三行未覆蓋程式碼的行號。

有的測試同學會說，我也不知道這個未覆蓋的程式碼行是哪行具體程式碼，知道了也不知道是幹什麼的。其實，我們可以複製這個行號給開發同學，他們能告訴我們是哪個功能還沒有測試到。這正是開發測試協作的正確方式，我們不止是反饋 bug 給他們，還反饋了當前尚未測試到的程式碼行，讓他們協助我們完善測試，正如我們協助他們完善功能一樣。

眼神厲害的同學能發現，還有 “今日覆蓋率累計” 和 “歷史覆蓋率累計” 這兩個開關。Hi-CC 魔法球可以自動累計當天的測試覆蓋率資料。我們上午測了，覆蓋率到了 69%，中午休息回來，再次開啟測試，可以從 69% 開始再繼續測試。

而歷史覆蓋率累計更是讓我們在一個測試階段中，可以持續測試，比如一週 5 天內，資料能持續累積，每天一條資料。即使中間開發同學修復了幾個小缺陷，版本變化了，資料依然能夠累計。當然，我們也能看到這些累計資料，可以主動清理，以排除太老版本的資料。

Btw：我們不需要點選什麼儲存按鈕，這些資料會 “悄悄”，自動的儲存下來。

有了每日資料，每日測試資料的走勢圖就必須有了：

最後是幫助頁，裡面有線上演示入口，安裝好瀏覽器擴充套件後，點選瀏覽器底部的小球，再點選 “線上演示”，就能進入剛才的 “待辦事項” 演示應用了。

Hi-CC 魔法球瀏覽器外掛下載地址

1、Edge 載入項商店（推薦）

2、從chrome 應用商店安裝（對網路有要求）

3、 直接下載安裝包

4、Hi-CC 魔法球安裝使用說明 - 詳細版

【提醒】自己下載的話，需要解壓，然後在 chrome/edge 瀏覽器內的擴充套件管理內，開啟開發者模式進行安裝，如下圖

相關網站

1、Hi-CodeCaptain 軟體研發質量管控平臺（簡稱 Hi-CC 平臺）

2、Hi-CC 魔法球網頁

3、Hi-CC 魔法球線上演示地址（注意先安裝 Hi-CC 魔法球擴充套件）