成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

awokezhou / 1453人閱讀

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

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

自動化測試的核心是檢查特定輸入能不能得到符合預(yù)期的結(jié)果。對于單元測試和 API 測試來說，“特定輸入”就是函數(shù)或者接口的參數(shù)，結(jié)果也是當前語言的數(shù)據(jù)類型或者通用的比如 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 測試應(yīng)該寫成這種形式（這里拿一個類似于活動行的應(yīng)用來舉例子）：

打開應(yīng)用首頁

顯示活動列表

點擊列表中的任一項

進入活動詳情頁

點擊報名按鈕

登記個人信息

點擊付費按鈕

完成付費

看到報名成功的信息

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

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

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

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

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

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/8928.html

相關(guān)文章

  • 關(guān)于 E2E 測試

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

    jayzou 評論0 收藏0

  • 前端E2E測試框架 cypress了解一下

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

    mushang 評論0 收藏0

  • Vue Cli安裝以及使用

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

    lemanli 評論0 收藏0

  • cypress進行e2e測試之理論

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

    chnmagnus 評論0 收藏0

  • 使用Nightwatch進行E2E測試中文教程

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

    newsning 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<