摘要:還可以自動完成單元測試的配置,工具選型為準(zhǔn)備出發(fā)有了以上的初步了解,我們就可以準(zhǔn)備著手搭建我們自己的測試環(huán)境了,讓我們短暫休息一下,下一章見下一篇搭建自己的前端自動化測試腳手架二
搭建自己的前端自動化測試腳手架(一)
LancerComet at 17:55, 2016.07.17.
歡迎轉(zhuǎn)載,轉(zhuǎn)載時還請保留作者署名。
隨著前端項目規(guī)模的日益膨脹,自動化測試越來越受到廣大前端與測試朋友關(guān)注,不過可惜的是目前中文社區(qū)關(guān)于自動化測試的內(nèi)容還不是很多,這對自動化測試的推廣而言帶來了一定阻力。在下希望通過簡短的文章,給更多的朋友一個簡單的入門,能夠接觸到自動化測試的世界。
前端的測試可以簡單地看成 單元測試 與 端到端測試 ,在此我們討論的是后者。
目的釋放雙手,緩解壓力,讓瀏覽器在那兒自嗨,我們盯著屏幕喝點水看測試是不是全通過就好,哈。
圖片略大,請耐心等待……
可能有朋友以前聽過或使用過 Phantom.js 進(jìn)行測試,用起來是不是很(酸)爽的感覺???
在下覺得 Phantom.js 目前作為測試工具的不足之處:
就是測界面的,沒界面,心虛啊;
API 有時還不能滿足測試需求;
不能使用 ES2015 編寫測試代碼;
不能良好和現(xiàn)有項目代碼結(jié)合,不能隨心所欲引入外部組件;
evaluate 函數(shù)內(nèi)不能引用外部變量;
調(diào)試不方便;
有測試朋友表示這貨需要專職前端維護(hù);
……
有沒有什么方案能夠做到:
我能一遍喝著茶一邊看著它跑;
API 功能足夠,且擴(kuò)展性強(qiáng);
能夠使用 ES2015;
能夠和現(xiàn)有項目結(jié)合,引入項目配置與外部模塊;
調(diào)試方便,比如能使用 Webstorm 或 VS Code 的控制臺;
能夠調(diào)取 IE、Firefox、Chrome 這種外部瀏覽器;
使用 BDD 與 TDD 編寫測試案例;
……
回答是,有!
為了滿足以上需求,我們將使用 Selenium 與 Nightwatch 搭建我們的測試腳手架。前者是一款 Web 的自動化測試環(huán)境,它將幫我們搭建好測試環(huán)境,調(diào)取系統(tǒng)安裝的瀏覽器,在瀏覽器里執(zhí)行一切自動化行為;后者是一款 Test Runner,可以簡單理解為前者的控制軟件,它將提供一系列接口供我們編寫測試案例,同時也是與現(xiàn)有前端項目結(jié)合的橋梁。
我們將使用 selenium-standalone 安裝和管理 Selenium 而不是手工設(shè)置原版程序。selenium-standalone 是一款基于 Node.JS 的 Selenium 管理工具包,對于前端而言更加友好。
另外,Selenium 與 Nightwatch 也是 Vue-cli 生成的 Vue Webpack 項目的標(biāo)配組件,所以如果您在使用 Vue + Webpack 構(gòu)建項目,本文對您也會有所幫助,同時您可以使用 Vue-cli 幫您自動配置好測試環(huán)境,非常方便。
準(zhǔn)備出發(fā)Vue-cli 還可以自動完成 單元測試 的配置,工具選型為 Karma + Mocha + Chai.
有了以上的初步了解,我們就可以準(zhǔn)備著手搭建我們自己的測試環(huán)境了,讓我們短暫休息一下,下一章見!
下一篇:搭建自己的前端自動化測試腳手架(二)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/8723.html
摘要:建立的配置信息。在此我們安裝的以便使用進(jìn)行測試。如果您在搭建過程中遇到困難,您可以從獲取在下已經(jīng)搭建好的接下來接下來就是專心寫測試用例了,距離成功越來越近了不過今天就到這里結(jié)束,我們下一章見下一篇搭建自己的前端自動化測試腳手架三 上一篇:搭建自己的前端自動化測試腳手架(一)By LancerComet at 18:38, 2016.07.17. 歡迎轉(zhuǎn)載,轉(zhuǎn)載時還請保留作者署名。 嗨,...
摘要:如果您在進(jìn)行模擬鼠標(biāo)的測試,您的鼠標(biāo)指針可能會干擾您的測試,因此建議運(yùn)行測試后將您的指針移動至屏幕外部,以避免干擾到瀏覽器測試。 上一篇:搭建自己的前端自動化測試腳手架(二)By LancerComet at 23:47, 2016.07.22. 歡迎轉(zhuǎn)載,轉(zhuǎn)載時還請保留作者署名。 這是最后一章了!(???)之前我們配置好了我們的腳手架工具,現(xiàn)在可以編寫測試用例了! 開始編寫測試用例 ...
摘要:從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后,需要一個版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種:選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...
摘要:從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后,需要一個版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種:選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...
摘要:從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后,需要一個版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種:選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...
閱讀 3215·2021-11-24 09:39
閱讀 2944·2021-11-23 09:51
閱讀 900·2021-11-18 10:07
閱讀 3550·2021-10-11 10:57
閱讀 2757·2021-10-08 10:04
閱讀 3010·2021-09-26 10:11
閱讀 1056·2021-09-23 11:21
閱讀 2798·2019-08-29 17:28