如何進行前端自動化測試

如何進?前端?動化測試？轉?專欄：前端之殤要是你碰到前端?程師朋友，那聊聊瀏覽器的兼容性準是沒錯，這和碰到英國朋友就談天?是?個道理。?部分程序員朋友們?定會捶胸頓?，連連訴苦，不過如果對??時語塞，或者欲???，請拍拍他/她肩膀說：“沒事，過兩年出了新瀏覽器?是?條好漢?！痹谇岸私纾瑸g覽器兼容性是讓?程師們頭疼的問題，對于經驗豐富的?來說，很清楚瀏覽器有哪些坑，但是對于?部分程序員，最可怕的是代碼明明在這個瀏覽器運?得很好，但是到了另?個瀏覽器中就不能正常運?了。對于這部分的程序員，保障代碼能正常運?的?法便是能盡早發(fā)現問題，然后將其解決。通常情況下，發(fā)現兼容性問題的?法莫過于將程序在各個瀏覽器中執(zhí)??遍，但這是極其浪費??和時間的，最省?的?法也需要在每次版本的更迭時重復?遍測試?作。對于不同的兼容性要求，測試需要的時間各不相同，若是只?持最新版本的瀏覽器，那么便測試3、4個瀏覽器即可，但是對于兼容性要求?的程序，有可能要測試10個瀏覽器以上。對于中?型公司來說，如果沒有專職的測試?員，這樣的測試耗時是致命的。若進?嚴格測試，則會拖慢項?進度，倘若敷衍了事，那程序的質量便沒法保證。本?將作為多瀏覽器?動化測試的第?篇?章，將以項?A作為例?，給讀者從頭介紹如何進?本地多瀏覽的?動化測試?作，包括測試的原理、測試框架的選取、測試?程的搭建和實現等。在下?篇?章中將介紹如何使?云服務實現更多瀏覽器的測試?作。另外“從?門到不放棄”系列將給讀者們帶來更多從零開始的前端實踐案例，諸如前端組件庫設計與實施、項??動化構建等案例，歡迎?家關注本系列的其他?章。?窺測試測試是?個龐?的主題，包括各種分類的測試，諸如?盒測試/?盒測試、/集成測試/端到端測試等。通常程序員在測試??的代碼的時候?得最多的便是單元測試，但是因為測試也是需要代價，很多?是不喜歡寫測試的，甚?是?點都不寫。當然今天我們不是要討伐諸位，?是希望讀者能從?中受益，從?個測試??可以??動?搭建??的測試?程。在多瀏覽器的?動化測試，我們多半是進?端到端的測試?作，??部分是?粒度的單元測試。端到端測試測試模擬?戶的?為。在Web應?程序中，他們會啟動服務器，打開瀏覽器，模擬?戶的?為進?點擊、輸?、提交等動作，斷?瀏覽器中發(fā)?了特定的事情或者是得到了期待的結果，從?讓我們相信功能可以正常的運?。?單元測試根據代碼單元的公共API運?它們。這些測試需要創(chuàng)建?個類的實例，使?特定的輸?調?它的?法，斷?被調?的?法達到了預期的效果。在下?中我們會看到這兩種測試的實踐，當然有時候區(qū)分度并不?，可能?法明顯地區(qū)分哪些是端對端測試哪些是單元測試，有時候他們是混合起來的，不過只要記住我們的?標是保證功能可以正常運?救?夠了。在瀏覽器的測試中，Selenium可謂是最重要的?具之?。簡單來說Selenium的作?是"AutomateBrowsers"——讓瀏覽器可以?動化起來的?具。它提供了統(tǒng)?的接?，讓?戶可以使?不同的編程語?，調?其接?來模擬?戶的操作，例如點擊，移動等操作?；旧?切??操作的?為都可以通過Selenium的API進?觸發(fā)操作。我們將Selenium看作是??的代理，幫程序員完成?切???的活。測試的技術?案選擇在進?項?實踐前，很重要的?項?作是選擇合適的技術棧。好?在前端開發(fā)時應該選擇React，Vue還是Angular作為框架?樣，前端的測試?作也需要選擇?套技術棧。很多時候?家在制定技術棧時容易?偏，在選擇時不是選擇最合適的框架，?是選擇最熱門的框架。當然?定程度上熱門的框架能反應其受歡迎程度，可能是因為其出眾的優(yōu)點，如較?的開發(fā)效率、?效的渲染特性或者是活躍的社區(qū)。在前端開發(fā)中，很容易有這樣的感受，就是只要半個?沒有關注業(yè)界的最新動態(tài)，就感覺恍若隔世，新的解決?案層出不窮，讓?喘不過?。就作者本?經驗來說，已經過了慌亂的年紀，再也不會盲?地追尋新技術，?轉向關注技術背后解決的痛點，就好像2C創(chuàng)業(yè)者們嘴上?說的?戶痛點?樣。在介紹本?涉及項?的技術棧之前，需要提醒諸位，此處的技術選擇并不?定完全適?于諸位的項?，請各位三思?測。?前市場上有眾多的測試框架，測試斷?庫甚?是全套的測試解決?案。Karma、Jasmine和Mocha是?家熟知的測試框架，?chai,should.js是流?的斷?庫，另外在不同的技術社區(qū)還有?成?套的測試技術，?如React社區(qū)中的Jest和Enzyme都是受開發(fā)者喜愛的測試框架和庫，最近?些新的并?測試解決?案也?漸流?，如AVA、Intern。本?中的實踐來?于項?A，在項?測試前期我們分析了測試需求，我們希望整個測試?案能滿??下要求：?持端到端測試對接云測試服務?便本地測試和云測試切換?便提供封裝的瀏覽器操作接?測試?例可以快速遷移到其他框架下執(zhí)?考量了以上的需求，我們認為NightWatch.js是?款?常合適的測試解決?案。當然其他的測試框架也基本能滿?需求，但是從?便易?性上考慮，我們最后采?了NightWatch.js，該?案不僅提供簡易封裝的瀏覽器代理操作API，還給我們提供了?便便捷的云測試配置(下?篇?章將著重介紹此內容)，就憑這兩點就已經?常吸引我們了。對于前端測試新?，強烈推薦試?此框架，讓你可以迅速完成曾經畏?卻步的測試?作。項?實踐項?A的本地測試實踐是需要分別在兩臺電腦上的多瀏覽器中執(zhí)?測試，兩臺電腦分別是Windows系統(tǒng)和Mac系統(tǒng)，包括了IE、Firefox(windows/mac)、Chrome(windows/mac)、Safari等最新的主流瀏覽器。兩臺機?的測試是分別執(zhí)?的，我們通過Jenkins分別定期執(zhí)?機?上的測試任務，將測試結果通過郵件的?式反饋給開發(fā)?員。Jenkins是?個持續(xù)集成的平臺，關于如果使?Jenkins請各位??Google..在接下來的?章中，我們將只介紹在?臺機?上的?程實踐，對于多個機?的測試需要將如下的?程部署到不同的機?，再使?諸如Jenkins之類的?具進?定期執(zhí)?就可以。開始?作前，我們需要將技術關系了然于?。我們在Nightwatch框架下使?Selenium中的driver對瀏覽器進?操作。不同的瀏覽器有不同的Driver，整個技術棧圖如圖1所?：圖1在圖中TestRunner即為Nightwatch，我們使?Nightwatch提供封裝過的API進?TestCase的書寫。下?我們將從零開始?把?教你如何使?Nightwatch啟動你的第?個Testcase。1.安裝測試所需包在??的前端項?中安裝Nightwatch.js，并將其保存在package.json的devDependencies中。npminstallnightwatch--save-dev2.增加npmscript??在中加?test指令??，該條指令的具體?作是使?test.conf.js的配置，執(zhí)?名為'A'、'B'、'C'的配置項(若為了直觀查看測試的內容，可根據項?的測試瀏覽器和版本將名字設為,safari9.0這樣的名字，此處設為A,B,C是避免?家誤認為是指令是?動根據名字去尋找匹配的瀏覽器）。更多命令的詳解請參照Nightwatch?檔。"scripts":{..."test":"./node_modules/.bin/nightwatch-cconf/test.conf.js-eA,B"...}3.配置Nightwatch完成指令??的配置?作，接下來需要完成test.conf.js的配置?作。在本地測試中，我們使?Selenium對瀏覽器進?代理操作。配置使?本地Selenium操作本機瀏覽器Nightwatch有三個重點：Selenium的配置：配置好Seleniumjar包的路徑，該包從Selenium的官?上下載，host和port按照下?配置書寫。driver的配置：cli_args是Selenium參數，在這我們指定了chromedriver和geckodriver的路徑，chromedriver是?來操作chrome，geckodriver?來操作safari和firefox（顧名思義，geckodriver?持基于gecko的瀏覽器），都可以從?上進?下載。在項?A中，我們將其下載到前端下?的bin?錄下。測試?標瀏覽器的配置：也就是A和B，每?個Object都是?個配置項，A是測試Chrome瀏覽器，B是測試Safari瀏覽器，如果沒有指定版本，就使?本地最新版，更多的配置可以參考Nightwatch?檔，可以指定系統(tǒng)、版本，并可以啟動、禁?瀏覽器的某些特性，如Cookie。selenium:{"start_process":true,"server_path":"./bin/-3.4.0.jar","host":"","port":4444,"cli_args":{"webdriver.chrome.driver":"bin/chromedriver","webdriver.gecko.driver":"bin/geckodriver"}},...test_settings:{A:{desiredCapabilities:{'browserName':'chrome'}},B:{desiredCapabilities:{'browserName':'safari'}}}...諸位需要根據??機?的實際情況進?配置，如果是Windows系統(tǒng)，那么將沒有，?使?IE瀏覽器，這樣則會需要IE瀏覽器對應的driver。4.書寫測試?例在各項準備?作完畢后，就只差測試?例了，下?是項?A的?個測試?例的?段，?于檢測頁?上id為testid的DOM中的內容字符，我們期待字符的長度為32，如果該字符為32個字符，那么測試通過，否則測試失敗。需要注意的是因為此DOM是動態(tài)插?的，所以在判斷其字符前，我們使?waitForElementVisible來檢查瀏覽器中testid的DOM是否已經顯?，若在5秒內顯?則進?下?的?作，如果沒有顯?，那么測試也會失敗。module.exports={'@tags':['unit'],'unittesting':function(browser){(`http://localhost:3010/test`).waitForElementVisible('#testid',5000).getText("#testid",function(result){this.assert.equal(result.value.length,32);});browser.end();}};5.運?測試到此為?，我們簡單的測試?程已經搭建完畢。現在我們回過頭去，執(zhí)?我們最開始配置的test指令，啟動測試任務。你需要在命令中執(zhí)?：如果順利的話，此時你會看到瀏覽器?動地打開關閉，很快就能從終端上看到如下的測試結果,圖2展?的是多個測試?例成功的結果，圖3展?的是測試失敗的結果（如遇到?法測試或者其它異常情況請Google。：D)。圖2圖3從測試結果中可以查看測試?例的測試結果，包括測試的瀏覽器、未通過測試的信息詳情等。?此，?個從零開始的本地測試實踐教程結束。本地測試與云測試因為本地瀏覽器的類型有限，?般我們更多地使?本地的多瀏覽器測試來完成功能驗證的?作，對于要求更嚴的兼容性測試，我們將采?云測試的?式。云測試即云服務提供商將向我們提供更多的云主機，每臺主機上運?著不同版本的瀏覽器。通過使?云測試服務，我們就能將測試覆蓋到更多類型、版本的瀏覽器。在下?篇?章中，我們仍以項?A為例?，使?Nightwatch框架，在此?章的基礎上介紹云測試和云測試?程的搭建。轉?：在上?篇?章中，擼主已?把?教?家如何從零開始構建?個本地?動化測試?程。如果你沒有看過上?篇?章，請先逐字閱讀。本?將在上?篇?章的基礎上主要為?家介紹兩個內容：?是如何免費地搭建多機的?動化測試環(huán)境，?是如何使?云測試服務進?360度?死?的?動化測試。信息量?，請各位閱后勿焚，動?牢記。本地測試鞭長莫及由于?臺計算機?持的瀏覽器種類有限，如?臺mac上可以安裝safari,chrome,firefox,opera等，?且通常只能安裝?個版本的產品，所以本地測試多?于檢驗功能邏輯是否正確，或者是檢驗特定瀏覽器的特定功能。對于未知的兼容性測試，單憑本地測試是沒法進?的。下?中介紹的?法將提供給測試者?種全新的測試體驗，通過遠程測試的?式對??的代碼進?測試。遠程測試需要搞清楚兩個概念，?是客戶端(Client)，?是服務端(Server)，Client是?于運?testcases代碼的地?，Server則是瀏覽器所在地。通過Server上的?些servlet來連接Client和Server上的瀏覽器，實現將test中的?例?為在遠程端的瀏覽器上執(zhí)?。通過瀏覽器和test執(zhí)?宿主機的分離，使得test能在更多的瀏覽器上執(zhí)?，并且更易于擴展測試瀏覽器的數量。在下?的實踐當中，讀者會對Client和Server有更清楚的了解，在此不再贅述。??的云測試環(huán)境既然測試代碼要和瀏覽器環(huán)境分割開來，那么我們需要在前?的基礎上將瀏覽器安裝到其他的環(huán)境中，?不是將瀏覽器和測試的Node測試環(huán)境放在同?臺機?。安裝完成之后需要使?服務端的Servlet也就是Selenium提供的將測試環(huán)境和瀏覽器連接起來。具體的步驟如下：1.尋找到?臺可?的主機：?論是實體機還是虛擬機都是可以的，不過需要主機可以接?到測試運?主機的?絡。2.在主機上安裝瀏覽器：具體安裝的瀏覽器類型和版本根據操作系統(tǒng)和測試需求?定，例如可以在windows操作系統(tǒng)上安裝IE，firefox等瀏覽器，在Linux系統(tǒng)安裝chrome,firefox等瀏覽器，在Mac系統(tǒng)上安裝safari,chrome等瀏覽器。3.下載對應瀏覽器的driver到Server主機上。因為selenium需要使?不同的driver來啟動不同的瀏覽器，如同上?篇?章提到的bin?錄下的driver可執(zhí)??件，此時要將需要測試瀏覽器對應的driver下載到server上，然后再通過測試?程的配置告訴selenium-server-standalone這些driver在哪，從?執(zhí)?它們來操作瀏覽器。chromedriver(?于chrome)下載地址:geckodriver(可?于firefox,safari)下載地址:4.在主機上下載并啟動SeleniumServer:該Server實際上是?個Java?程序，?于client和server之間的通信（有關selenium原理的?章請關注《搞不懂》系列）。?先在Selenium的官?上下載selenium-server-standalone-{VERSION}.jar，然后啟動該Jar包。java-jarselenium-server-standalone-{VERSION}.jar如果主機沒有安裝JRE,則需要再安裝java的運?環(huán)境或者是直接安裝jdk。5.修改測試項?的配置?件：還記得啟動測試時需要指定的配置?件嗎？這個配置?件test.conf.js?常重要，?于配置selenium以及測試的瀏覽器，當我們改變使?遠程server的瀏覽器作為測試?標時，當然需要修改配置?件。我們需要將配置?件中的selenium項修改為如下形式：selenium:{"start_process":true,//server的ip地址"host":"","port":4444,"cli_args":{//chromedriver在server主機上的?件路徑"webdriver.chrome.driver":"/home/bin/chromedriver",//geckodriver在server主機上的?件路徑"webdriver.gecko.driver":"/home/bin/geckodriver"}}對于的設置請參照上?，然后按照??安裝的瀏覽器版本進?修改。6.啟動測試：?切準備好了之后，在client主機上，也就是測試代碼運?的機?上便可啟動測試。"scripts":{..."test":"./node_modules/.bin/nightwatch-cconf/test.conf.js-eA,B"...}??搭建測試云環(huán)境的過程其實并不復雜，只需要在將和瀏覽器安裝到其他主機即可，對于client上的代碼不需要改動，只需要改動配置中的selenium配置。但是很快測試者會發(fā)現，當我們需要測試更多的機?，???的?式去維護這些server是?件費時費?的事，也消耗了公司的計算資源。有沒有更好的辦法讓我們既可以全?的測試??的代碼?可以不?費盡?思維護主機？答案是有，請繼續(xù)閱讀。云測試服務對于繁瑣重復的?程任務，商家們總是能想到賺錢的辦法，這不對于上?我們碰到的?煩就有商家提供了相應的產品。該產品為測試者們提供?數個測試瀏覽器，測試者不需要關?這些瀏覽器在何處運?，應該怎么樣維護，只需要?個服務地址便可以將??的測試頁?跑在這些瀏覽器上，其實這個服務地址和之前我們??搭建的Serverip類似，只不過如果使???的測試云，使?不同的測試主機時，需要?動更改host。?這些商家提供了?個類似分銷中?，?于流量分發(fā)，所以我們只需要??個地址便可實現使?不同的主機進?測試。?前提供此類服務的商家有很多，如browserstack、saucelabs、crossbrowsertesting等，?家可以根據???頭黃?和測試的需要選擇性價??的服務。本?將使?browserstack作為例?為?家科普此類服務，不過它并不是擼主的?錢爸爸，請?家放下??的猜疑。根據我們??搭建云測試環(huán)境的經驗，我們將browserstack的測試后臺架構猜想為下圖所?。我們不關?該架構是否是真實的實現，但是這是合理的理論猜想，希望此圖能讓我們對此服務有個?概的技術了解：selenium:{"start_process":false,"host":"","port":80},common_capabilities:{'build':'',//Browserstack的username對應配置項'browserstack.user':process.env.BROWSERSTACK_USERNAME',//Browserstack的key對應