本文章轉(zhuǎn)載于搜狗測試
目前，業(yè)界主流開源js覆蓋率工具有ScriptCover，Istanbul和JSCover。都是通過代碼插樁來收集覆蓋率信息進而生成報告。而且支持用戶深度定制。
作者所在團隊就基于JSCover開發(fā)了JSCover++。不僅增加了版本diff代碼的覆蓋率信息，同時也優(yōu)化了工具的可靠性和易用性。
一、現(xiàn)有主流工具
1．ScriptCover
ScriptCover下載地址：https://code.google.com/archive/p/script-cover/downloads。作為chrome瀏覽器的擴展插件，可以直接在chrome上執(zhí)行測試，工具自動收集用例的覆蓋情況，并生成報告。如圖1，可查看頁面下的所有js文件及測試用例的覆蓋率信息。在詳情頁，有每個文件的代碼行覆蓋情況。
圖1ScriptCover報告概要
ScriptCover使用簡單，但對處理復(fù)雜js文件性能欠佳。而且，該工具必須從外部自行添加至chrome，一旦關(guān)閉瀏覽器，該插件就會被chrome阻止。
2.Istanbul
不同于ScriptCover，Istanbul更關(guān)注Node.js環(huán)境下的javascript覆蓋率。它關(guān)注的是待測腳本自身的邏輯。
安裝命令：$?npm install –g istanbul
執(zhí)行命令：若待測試的腳本是simple.js，執(zhí)行istanbul cover命令，就能得到多種覆蓋率信息，如圖2。
圖2Istanbul測試報告示例1
Istanbul更適合自測腳本。但太過拘泥于代碼細節(jié)，甚至會延誤整個項目上線。
3.JSCover
JSCover需要在瀏覽器中執(zhí)行測試用例。源碼地址為：https://sourceforge.net/projects/jscover/files/。JSCover-1.0.24\target\dist目錄下的jar包提供了JSCover的所有功能。
測試前需要先建立JSCover服務(wù)，命令如下：
java -jar target/dist/JSCover-all.jar -ws --document-root=doc/example --report-dir=target
其中，-ws參數(shù)表示啟用web server模式，--document-root參數(shù)設(shè)置待測頁面的本地資源目錄，--report-dir參數(shù)設(shè)置插樁文件、報告資源等文件的存儲目錄。
啟動瀏覽器訪問http://localhost:8080/jscoverage.html，在Browser輸入已存于本地的待測頁面地址即可。
報告如圖3。詳情頁可以看到每一個文件的每行被執(zhí)行的次數(shù)。
圖3覆蓋率匯總頁
JSCover要求測試頁面的所有資源文件都存在本地。這會提高前期準備成本。
二、私人深度定制
以上工具都是對js文件進行全量的監(jiān)控統(tǒng)計，如果要做版本diff代碼的測試，怎么辦？私人訂制即可。
我們以JSCover為基礎(chǔ)進行開發(fā)，沿用代碼插樁、覆蓋率信息存儲、生成報告功能。同時使用python重構(gòu)了覆蓋率信息上報的代碼如圖4，增加了svn diff代碼分析的功能，如圖5所示
圖4覆蓋率信息上報接口重構(gòu)
圖5diff代碼分析實現(xiàn)
在使用過程中，首先對本地js文件進行插樁，再利用fiddler將線上的網(wǎng)絡(luò)請求重定向到本地文件。報告如圖6，黃色底部分是diff代碼的相關(guān)覆蓋信息。
圖6JSCover++報告匯總頁
詳情頁如圖7。以顏色區(qū)分行覆蓋，綠色表示覆蓋，紅色表示未覆蓋，白色表示diff代碼。
圖7JSCover++報告詳情頁
