[緣起] 前端 E2E 測試的困境

awokezhou 發布于2019-05-29 17:14 / 1430人閱讀

摘要：與其它自動化測試不同，前端的測試一直是個老大難問題，難點主要在于如何描述測試。自動化測試的核心是檢查特定輸入能不能得到符合預期的結果。結構不能反應視圖的真實狀態，很可能會出現雖然測試通過，但實際上在用戶眼里仍然是錯誤的表現。

與其它自動化測試不同，前端的 E2E 測試一直是個老大難問題，難點主要在于 如何描述測試。

自動化測試的核心是檢查特定輸入能不能得到符合預期的結果。對于單元測試和 API 測試來說，“特定輸入”就是函數或者接口的參數，結果也是當前語言的數據類型或者通用的比如 JSON，二者一方面好描述，另一方面好驗證。寫起來就沒什么難度。

比如

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

要驗證輸入 1 和 2，返回 3，則可以寫成：

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

這里輸入輸出都很容易描述，所以自動化測試就沒什么難度。

但是 UI 的 E2E 測試并非如此。UI 是做給用戶看的，所以，一個 UI 的 E2E 測試應該寫成這種形式（這里拿一個類似于活動行的應用來舉例子）：

打開應用首頁

顯示活動列表

點擊列表中的任一項

進入活動詳情頁

點擊報名按鈕

登記個人信息

點擊付費按鈕

完成付費

看到報名成功的信息

這個過程當中用戶的操作，很難和程序當中的抽象產物，比如按鈕、列表等產生關聯。操作的結果，“進入下一頁”，也很難進行進一步的校驗。

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

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

選擇器本身，和 UI 視圖可能并沒有強關聯，寫出來的測試可讀性不強，一段時間之后回頭去看，很可能會看不懂。

HTML 的 DOM 結構并不穩固，隨著功能增減版本迭代經常發生變化，這個時候我們就要跟著修改測試用例。

DOM 結構不能反應視圖的真實狀態，很可能會出現雖然測試通過，但實際上在用戶眼里仍然是錯誤的表現。

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

這里請容許我賣一下關子，下次再介紹由我廠 OpenResty Inc. 打造的前端自動化工具 Navlang。

大家好，我是 Meathill，目前在 OpenResty Inc. 負責前端開發工作。今年我會利用業余時間，介紹我廠在前端方面的工作，包括各種垂直領域，比如自動化、基于 DevTool Protocol 開發、WebExtension 開發、Vue、CodeMirror、組件化等等，內容包括進展、經驗、心得、踩坑、產品等。

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

云服務器 GPU云服務器困境緣起 e2e 前端測試

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/8928.html

關于 E2E 測試

摘要：與單元測試不同，后者通常需要測試參數參數類型參數值參數數量返回值拋出錯誤等，目的在于保證特定函數能夠在任何情況下都穩定可靠完成工作。單元測試假定只要所有函數都正常工作，那么整個產品就能正常工作。上一篇文章發布后，竟然收獲到一些同學的注意，實在是意外之喜。不過我也發現，很多同學對 E2E 測試不夠了解，正好我廠的產品也沒做到能作為商用版發布的程度，所以這篇再來聊聊 E2E 測試吧。本...

jayzou 2019-05-29 17:15 評論0 收藏0
前端E2E測試框架 cypress了解一下

摘要：是一款開箱即用可以跑在瀏覽器上的測試工具。同樣，測試了也可以直接調試。這個時候我們的測試文件就可以訪問了，點擊之后發現他需要我們編寫測試用例，那么接下來就手把手教你編寫基本的測試用例。 What is E2E? 所謂的E2E就是end-to-end。假設我們編寫的每個功能程序都是一個黑匣子，最終用戶也只會看到這個黑匣子，那么站在用戶的角度來看并不需要知道這個黑匣子內部是什么東西也不...

mushang 2019-08-26 11:51 評論0 收藏0
Vue Cli安裝以及使用

摘要：單元測試前端的單元測試目前有兩個比較熱的框架，一個是的方式，一個是。小伙伴們不用急，關于單元測試這塊，我會找時間寫博客的。首先前端的測試分為兩種，一個是單元測試，另一個就是測試了。? ? ? ? 因為公司項目要用vue框架，所以會用vue-cli來新建項目。用過vue的都知道，要全局安裝vue以及腳手架vue-cli，然后執行vue init webpack projectname來新建vu...

lemanli 2019-04-23 13:21 評論0 收藏0
cypress進行e2e測試之理論

摘要：進行測試之理論是目前很火的一個測試組件，內部綁定了之類的斷言為了讓代碼代碼更有說服力，減少提交測試錯誤，進行測試顯然是非常有必要的。 cypress 進行 e2e 測試之理論 cypress 是目前 e2e 很火的一個測試組件，內部綁定了 macha、chai、chai-jquery 之類的斷言,為了讓代碼代碼更有說服力，減少提交測試錯誤，進行 e2e 測試顯然是非常有必要的。官網...

chnmagnus 2019-08-22 16:45 評論0 收藏0
使用Nightwatch進行E2E測試中文教程

摘要：本身項目也是使用來測試的。一個簡易的模式的配置如下的分為四個部分在實例上以開頭的行為驅動測試風格的接口，及以上版本可用。例如以開頭的兩套相同的方法庫，區別是如果斷言失敗則退出整個測試用例所有步，則打印后繼續進行。 E2E測試 E2E(end to end)測試是指端到端測試又叫功能測試，站在用戶視角，使用各種功能、各種交互，是用戶的真實使用場景的仿真。在產品高速迭代的現在，有個自動化測...

newsning 2019-08-22 13:56 評論0 收藏0