[緣起] 前端 E2E 測(cè)試的困境

awokezhou 發(fā)布于2019-05-29 17:14 / 1421人閱讀

摘要：與其它自動(dòng)化測(cè)試不同，前端的測(cè)試一直是個(gè)老大難問(wèn)題，難點(diǎn)主要在于如何描述測(cè)試。自動(dòng)化測(cè)試的核心是檢查特定輸入能不能得到符合預(yù)期的結(jié)果。結(jié)構(gòu)不能反應(yīng)視圖的真實(shí)狀態(tài)，很可能會(huì)出現(xiàn)雖然測(cè)試通過(guò)，但實(shí)際上在用戶眼里仍然是錯(cuò)誤的表現(xiàn)。

與其它自動(dòng)化測(cè)試不同，前端的 E2E 測(cè)試一直是個(gè)老大難問(wèn)題，難點(diǎn)主要在于 如何描述測(cè)試。

自動(dòng)化測(cè)試的核心是檢查特定輸入能不能得到符合預(yù)期的結(jié)果。對(duì)于單元測(cè)試和 API 測(cè)試來(lái)說(shuō)，“特定輸入”就是函數(shù)或者接口的參數(shù)，結(jié)果也是當(dāng)前語(yǔ)言的數(shù)據(jù)類型或者通用的比如 JSON，二者一方面好描述，另一方面好驗(yàn)證。寫起來(lái)就沒什么難度。

比如

sum(a, b) {
 return a + b;
}

要驗(yàn)證輸入 1 和 2，返回 3，則可以寫成：

const assert = require("assert");
describe("sum", function() {
  it("should equal", function() {
    assert.equal(sum(1, 2), 3);
  });
});

這里輸入輸出都很容易描述，所以自動(dòng)化測(cè)試就沒什么難度。

但是 UI 的 E2E 測(cè)試并非如此。UI 是做給用戶看的，所以，一個(gè) UI 的 E2E 測(cè)試應(yīng)該寫成這種形式（這里拿一個(gè)類似于活動(dòng)行的應(yīng)用來(lái)舉例子）：

打開應(yīng)用首頁(yè)

顯示活動(dòng)列表

點(diǎn)擊列表中的任一項(xiàng)

進(jìn)入活動(dòng)詳情頁(yè)

點(diǎn)擊報(bào)名按鈕

登記個(gè)人信息

點(diǎn)擊付費(fèi)按鈕

完成付費(fèi)

看到報(bào)名成功的信息

這個(gè)過(guò)程當(dāng)中用戶的操作，很難和程序當(dāng)中的抽象產(chǎn)物，比如按鈕、列表等產(chǎn)生關(guān)聯(lián)。操作的結(jié)果，“進(jìn)入下一頁(yè)”，也很難進(jìn)行進(jìn)一步的校驗(yàn)。

所以在之前的生產(chǎn)實(shí)踐中，大家喜歡用選擇器來(lái)進(jìn)行 E2E 測(cè)試，代表產(chǎn)品有 Cypress 和 Nightwatch。我覺得，這里一方面有 jQuery 帶來(lái)的使用習(xí)慣延續(xù)和思維定勢(shì)；另一方面，借助 XPath，找到特定元件，進(jìn)行交互操作和校驗(yàn)元素幾乎是大家唯一的選擇。

使用 CSS 選擇器的方案并不完美，比如：

選擇器本身，和 UI 視圖可能并沒有強(qiáng)關(guān)聯(lián)，寫出來(lái)的測(cè)試可讀性不強(qiáng)，一段時(shí)間之后回頭去看，很可能會(huì)看不懂。

HTML 的 DOM 結(jié)構(gòu)并不穩(wěn)固，隨著功能增減版本迭代經(jīng)常發(fā)生變化，這個(gè)時(shí)候我們就要跟著修改測(cè)試用例。

DOM 結(jié)構(gòu)不能反應(yīng)視圖的真實(shí)狀態(tài)，很可能會(huì)出現(xiàn)雖然測(cè)試通過(guò)，但實(shí)際上在用戶眼里仍然是錯(cuò)誤的表現(xiàn)。

那么，說(shuō)了這么多不容易、其它方案的不完美，我的解決方案又是怎么樣的呢？

這里請(qǐng)容許我賣一下關(guān)子，下次再介紹由我廠 OpenResty Inc. 打造的前端自動(dòng)化工具 Navlang。

大家好，我是 Meathill，目前在 OpenResty Inc. 負(fù)責(zé)前端開發(fā)工作。今年我會(huì)利用業(yè)余時(shí)間，介紹我廠在前端方面的工作，包括各種垂直領(lǐng)域，比如自動(dòng)化、基于 DevTool Protocol 開發(fā)、WebExtension 開發(fā)、Vue、CodeMirror、組件化等等，內(nèi)容包括進(jìn)展、經(jīng)驗(yàn)、心得、踩坑、產(chǎn)品等。

歡迎大家關(guān)注本專欄，也歡迎大家光臨我的博客：山維空間。如果你有任何疑問(wèn)問(wèn)題都可以在 SF 和我的博客上向我發(fā)問(wèn)，我一定盡量答復(fù)。