摘要:如果您在進(jìn)行模擬鼠標(biāo)的測(cè)試,您的鼠標(biāo)指針可能會(huì)干擾您的測(cè)試,因此建議運(yùn)行測(cè)試后將您的指針移動(dòng)至屏幕外部,以避免干擾到瀏覽器測(cè)試。
上一篇:搭建自己的前端自動(dòng)化測(cè)試腳手架(二)
By LancerComet at 23:47, 2016.07.22. 歡迎轉(zhuǎn)載,轉(zhuǎn)載時(shí)還請(qǐng)保留作者署名。
這是最后一章了!(???)
之前我們配置好了我們的腳手架工具,現(xiàn)在可以編寫測(cè)試用例了!
在項(xiàng)目根目錄新建一個(gè)名為 "tests" 的目錄,然后這里就用來存放我們即將編寫的測(cè)試用例文件。
那么這個(gè)文件夾能不能指向到其他地方去呢?當(dāng)然可以,不過要修改一個(gè)小地方。
還記得 " nightwatch.json " 文件么?打開看看,第一項(xiàng)是不是叫 src_folders,然后值為 ["tests"]?
我相信您已經(jīng)懂了,這里就是定義測(cè)試用例存放目錄的地方,然后改成自己想要的目錄吧!
編寫一個(gè)簡單的測(cè)試用例您可以在目錄中存放多個(gè)測(cè)試用例文件,且命名隨意,Nightwatch 將讀取目錄中所有的 JS 文件,如果符合測(cè)試用例格式,將會(huì)自動(dòng)執(zhí)行。
在 "tests" 目錄中建立一個(gè)測(cè)試用例文件 "demo.js",然后我們來寫一個(gè)沒什么用的小 demo!
這個(gè) Demo 將打開 Bing,搜索 "what is microsoft",然后保存成截圖后退出。
OK,打開 "demo.js",添加以下內(nèi)容:
module.exports = { "Find the answer.": function (client) { // TODO... } }
module.exports 導(dǎo)出一個(gè)對(duì)象,對(duì)象的 Key 即為測(cè)試用例名稱,您可以編寫多個(gè)測(cè)試用例,Nightwatch 將依次執(zhí)行。
您可以在測(cè)試用例中導(dǎo)入其他模塊并直接使用在測(cè)試邏輯中,這也是比 Phantom.JS 優(yōu)秀的地方。
先寫到這里,您可能會(huì)對(duì) cilent 感到陌生,所以還是要簡單介紹一下。
client 是代碼運(yùn)行時(shí) Nightwatch 提供的對(duì)象,所有對(duì)瀏覽器進(jìn)行的操作都將使用此對(duì)象調(diào)取,比如 client.click("CSS Selector")、client.getCookie(function () {...}),我們第一章說過的 "可以簡單理解為 Selenium 的控制軟件" 就是通過它體現(xiàn)的喔!
client 的所有 API 詳情見 這里。
大致了解這東西的意思之后,就可以接著完善測(cè)試邏輯了:
module.exports = { "Find the answer.": function (client) { // 定義 Bing 頁面中的節(jié)點(diǎn). const searchInput = "#sb_form_q" const searchBtn = "#sb_form_go" const question = "what is microsoft" // 啟動(dòng)瀏覽器并打開 bing.com. client.url("http://bing.com").maximizeWindow() // 確保 "body" 和輸入框可以使用. client.expect.element("body").to.be.present client.expect.element(searchInput).to.be.visible client.pause(2000) // 稍等兩秒. // 輸入 "what is microsoft" 然后搜索. client.setValue(searchInput, question) client.click(searchBtn) client.pause(2000) // 截一張圖然后保存到 "reports/answer.png". client.expect.element("body").to.be.present client.saveScreenshot("reports/answers.png") client.end() } }
來關(guān)注一下 expect ,是不是看起來很像自然語言?這些語句就是測(cè)試結(jié)果的驗(yàn)證語句,就是我們希望得到的結(jié)果。比如 client.expect.element("body").to.be.present.before(3000),意思就是 "希望 body 元素能在 3000 毫秒內(nèi)初始化完畢"。
Nightwatch 支持 BDD-Style 與 Assert 斷言兩種風(fēng)格,文檔可見 這里。
關(guān)于 Assert、BDD、TDD 的更多內(nèi)容請(qǐng)參照其他文章。
是不是確實(shí)沒什么用?畢竟是個(gè)簡單的 Demo 而已,哈哈。
那么添加一個(gè)稍微復(fù)雜點(diǎn)的測(cè)試用例。
這個(gè) demo 將打開 Bilibili 直播 ,然后執(zhí)行:
打開首頁并等待加載完畢;
檢查登陸按鈕是否存在;
點(diǎn)擊登陸按鈕;
填寫用戶名與密碼;
點(diǎn)擊登陸;
等待頁面加載;
通過 Cookie 檢查是否已登陸;
確保登陸后的用戶導(dǎo)航面板存在;
鼠標(biāo)移至頭像處打開導(dǎo)航面板;
點(diǎn)擊退出登陸;
等待頁面刷新后檢查 Cookie 是否已退出登陸;
結(jié)束測(cè)試。
其實(shí)就是第一章的那個(gè) Demo 圖干的事情了 (???)
這個(gè) demo 不再啰嗦,直接放出代碼:
// Account setting. const accountConfig = { username: "USERNAME", password: "PASSWORD", uid: "10000" } module.exports = { "Bilibili Live Login Test": function (client) { client.url("http://live.bilibili.com").maximizeWindow() // Page Init. client.expect.element("body").to.be.present.before(3000) client.expect.element(".top-nav-login-btn.last").to.be.visible // Login. client.click(".top-nav-login-btn.last") client.waitForElementVisible("#bilibili-quick-login", 2000) client.frame(0) client.pause(2000) client.setValue("#login-username", accountConfig.username) client.setValue("#login-passwd", accountConfig.password) client.click("#login-submit") // Wait and check page has been reloaded. client.frameParent() client.pause(4000) client.expect.element("body").to.be.present.before(3000) // Check cookies to ensure we are signed in. client.getCookies(function (result) { result.value.forEach((value, index, array) => { if (value.name === "DedeUserID") client.assert.equal(parseInt(value.value, 10), accountConfig.uid) }) }) // Move to User Avatar. client.expect.element(".user-avatar-link").to.be.visible client.moveToElement(".user-avatar-link", 5, 5) client.pause(800) client.expect.element("#top-nav-user-panel").to.be.visible // Logout. client.click("#top-nav-logout-link") client.pause(5000) client.expect.element("body").to.be.present.before(3000) // Check cookies again to ensure we are off. client.getCookies(function (result) { var logout = true result.value.forEach((value, index, array) => { if (value.name === "LIVE_LOGIN_DATA") logout = false }) client.assert.equal(logout, true) }) client.pause(1000) client.end() } }
運(yùn)行測(cè)試用例您可以新建一個(gè)文件,或者在之前的文件中繼續(xù)編寫。
回到項(xiàng)目根目錄,執(zhí)行 npm start,然后就可以看到瀏覽器自己測(cè)試了!
運(yùn)行效果如下:
測(cè)試運(yùn)行完畢之后,測(cè)試結(jié)果將打印在終端里,同時(shí)會(huì)生成到 reports 文件夾中。
需要注意的地方您可以在 nightwatch.json 中修改 "output_folder" 來更換報(bào)告生成目錄。
您可能在使用中會(huì)遇到例如 “明明看到節(jié)點(diǎn)缺獲取不到”、“鼠標(biāo)功能好像時(shí)好時(shí)壞” 等問題,在此給您一些建議:
由于現(xiàn)在很多網(wǎng)站使用諸如 Angular、Vue 等框架構(gòu)建,其節(jié)點(diǎn)可能為組件動(dòng)態(tài)渲染,所以 Selenium 在執(zhí)行測(cè)試時(shí)可能獲取的 Dom 樹為舊數(shù)據(jù)從而導(dǎo)致找不到節(jié)點(diǎn),因此您可以執(zhí)行等待語句確保節(jié)點(diǎn)出現(xiàn)后再進(jìn)行測(cè)試。不過可能不是 100% 成功,這也是這套測(cè)試系統(tǒng)的短板之一。
如果您在進(jìn)行模擬鼠標(biāo)的測(cè)試,您的鼠標(biāo)指針可能會(huì)干擾您的測(cè)試,因此建議運(yùn)行測(cè)試后將您的指針移動(dòng)至屏幕外部,以避免干擾到瀏覽器測(cè)試。
測(cè)試很可能因?yàn)轫撁婕虞d時(shí)間問題導(dǎo)致測(cè)試失敗,不過這也是 E2E 測(cè)試的特征所在,您可以修改您的測(cè)試邏輯,或致力縮短加載時(shí)間。
大功告成!現(xiàn)在您已經(jīng)擁有您自己的測(cè)試工具并且成功編寫了兩個(gè)測(cè)試用例!此處您應(yīng)該為自己鼓掌!
您現(xiàn)在已經(jīng)可以將 E2E 測(cè)試納入您的開發(fā)流程之中,在下相信這將對(duì)您的開發(fā)有不小的幫助。如果您有興趣,您也可以考慮 單元測(cè)試 的可能性。
如果您沒能成功構(gòu)建您的項(xiàng)目,您可以從這里獲取代碼。
同時(shí)像之前提到的,如果您在使用 Vue 構(gòu)建您的項(xiàng)目,您可以使用 Vue-cli 來生成已經(jīng)包含 Selenium 與 Nightwatch 的 Vue 種子項(xiàng)目,您可以在 test/e2e 中編寫您的測(cè)試用例。
希望三篇簡單的短文能給您帶來幫助!?(? ???ω??? ?)?
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/8720.html
摘要:建立的配置信息。在此我們安裝的以便使用進(jìn)行測(cè)試。如果您在搭建過程中遇到困難,您可以從獲取在下已經(jīng)搭建好的接下來接下來就是專心寫測(cè)試用例了,距離成功越來越近了不過今天就到這里結(jié)束,我們下一章見下一篇搭建自己的前端自動(dòng)化測(cè)試腳手架三 上一篇:搭建自己的前端自動(dòng)化測(cè)試腳手架(一)By LancerComet at 18:38, 2016.07.17. 歡迎轉(zhuǎn)載,轉(zhuǎn)載時(shí)還請(qǐng)保留作者署名。 嗨,...
摘要:還可以自動(dòng)完成單元測(cè)試的配置,工具選型為準(zhǔn)備出發(fā)有了以上的初步了解,我們就可以準(zhǔn)備著手搭建我們自己的測(cè)試環(huán)境了,讓我們短暫休息一下,下一章見下一篇搭建自己的前端自動(dòng)化測(cè)試腳手架二 搭建自己的前端自動(dòng)化測(cè)試腳手架(一) LancerComet at 17:55, 2016.07.17.歡迎轉(zhuǎn)載,轉(zhuǎn)載時(shí)還請(qǐng)保留作者署名。 隨著前端項(xiàng)目規(guī)模的日益膨脹,自動(dòng)化測(cè)試越來越受到廣大前端與測(cè)試朋友關(guān)...
摘要:更多資源請(qǐng)文章轉(zhuǎn)自月份前端資源分享的作用數(shù)組元素隨機(jī)化排序算法實(shí)現(xiàn)學(xué)習(xí)筆記數(shù)組隨機(jī)排序個(gè)變態(tài)題解析上個(gè)變態(tài)題解析下中的數(shù)字前端開發(fā)筆記本過目不忘正則表達(dá)式聊一聊前端存儲(chǔ)那些事兒一鍵分享到各種寫給剛?cè)腴T的前端工程師的前后端交互指南物聯(lián)網(wǎng)世界的 更多資源請(qǐng)Star:https://github.com/maidishike... 文章轉(zhuǎn)自:https://github.com/jsfr...
摘要:從到再到搭建編寫構(gòu)建一個(gè)前端項(xiàng)目選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架搭建一個(gè)前端項(xiàng)目的方式有兩種選擇現(xiàn)成的項(xiàng)目模板自己搭建項(xiàng)目骨架。使用版本控制系統(tǒng)管理源代碼項(xiàng)目搭建好后,需要一個(gè)版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個(gè)前端項(xiàng)目 1. 選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架 搭建一個(gè)前端項(xiàng)目的方式有兩種:選擇現(xiàn)成的項(xiàng)目模板、自己搭建項(xiàng)目骨架。 ...
摘要:從到再到搭建編寫構(gòu)建一個(gè)前端項(xiàng)目選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架搭建一個(gè)前端項(xiàng)目的方式有兩種選擇現(xiàn)成的項(xiàng)目模板自己搭建項(xiàng)目骨架。使用版本控制系統(tǒng)管理源代碼項(xiàng)目搭建好后,需要一個(gè)版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個(gè)前端項(xiàng)目 1. 選擇現(xiàn)成的項(xiàng)目模板還是自己搭建項(xiàng)目骨架 搭建一個(gè)前端項(xiàng)目的方式有兩種:選擇現(xiàn)成的項(xiàng)目模板、自己搭建項(xiàng)目骨架。 ...
閱讀 686·2019-08-30 15:44
閱讀 1409·2019-08-30 11:02
閱讀 3014·2019-08-29 18:42
閱讀 3536·2019-08-29 16:16
閱讀 1744·2019-08-26 13:55
閱讀 1799·2019-08-26 13:45
閱讀 2404·2019-08-26 11:43
閱讀 3276·2019-08-26 10:32