如何進行前端自動化測試？

轉(zhuǎn)自專欄：

[從入門到不放棄]多瀏覽器的自動化測試(1)-本地測試 - 知乎專欄

[從入門到不放棄]多瀏覽器的自動化測試(2)-云服務(wù)測試

前端之殤

要是你碰到前端工程師朋友，那聊聊瀏覽器的兼容性準是沒錯，這和碰到英國朋友就談天氣是一個道理。大部分程序員朋友們一定會捶胸頓足，連連訴苦，不過如果對方一時語塞，或者欲言又止，請拍拍他/她肩膀說：“沒事，過兩年出了新瀏覽器又是一條好漢。”

在前端界，瀏覽器兼容性是讓工程師們頭疼的問題，對于經(jīng)驗豐富的人來說，很清楚瀏覽器有哪些坑，但是對于大部分程序員，最可怕的是代碼明明在這個瀏覽器運行得很好，但是到了另一個瀏覽器中就不能正常運行了。對于這部分的程序員，保障代碼能正常運行的方法便是能盡早發(fā)現(xiàn)問題，然后將其解決。

通常情況下，發(fā)現(xiàn)兼容性問題的方法莫過于將程序在各個瀏覽器中執(zhí)行一遍，但這是極其浪費人力和時間的，最省力的方法也需要在每次版本的更迭時重復(fù)一遍測試工作。對于不同的兼容性要求，測試需要的時間各不相同，若是只支持最新版本的瀏覽器，那么便測試3、4個瀏覽器即可，但是對于兼容性要求高的程序，有可能要測試10個瀏覽器以上。對于中小型公司來說，如果沒有專職的測試人員，這樣的測試耗時是致命的。若進行嚴格測試，則會拖慢項目進度，倘若敷衍了事，那程序的質(zhì)量便沒法保證。

本文將作為多瀏覽器自動化測試的第一篇文章，將以項目A作為例子，給讀者從頭介紹如何進行本地多瀏覽的自動化測試工作，包括測試的原理、測試框架的選取、測試工程的搭建和實現(xiàn)等。在下一篇文章中將介紹如何使用云服務(wù)實現(xiàn)更多瀏覽器的測試工作。另外“從入門到不放棄”系列將給讀者們帶來更多從零開始的前端實踐案例，諸如前端組件庫設(shè)計與實施、項目自動化構(gòu)建等案例，歡迎大家關(guān)注本系列的其他文章。

小窺測試

測試是一個龐大的主題，包括各種分類的測試，諸如黑盒測試/白盒測試、單元測試

/集成測試/端到端測試等。通常程序員在測試自己的代碼的時候用得最多的便是單元測試，但是因為測試也是需要代價，很多人是不喜歡寫測試的，甚至是一點都不寫。當然今天我們不是要討伐諸位，而是希望讀者能從文中受益，從一個測試小白可以自己動手搭建自己的測試工程。

在多瀏覽器的自動化測試，我們多半是進行端到端的測試工作，一小部分是大粒度的單元測試。端到端測試測試模擬用戶的行為。在 Web 應(yīng)用程序中，他們會啟動服務(wù)器，打開瀏覽器，模擬用戶的行為進行點擊、輸入、提交等動作，斷言瀏覽器中發(fā)生了特定的事情或者是得到了期待的結(jié)果，從而讓我們相信功能可以正常的運行。而單元測試根據(jù)代碼單元的公共 API 運行它們。這些測試需要創(chuàng)建一個類的實例，使用特定的輸入調(diào)用它的方法，斷言被調(diào)用的方法達到了預(yù)期的效果。在下文中我們會看到這兩種測試的實踐，當然有時候區(qū)分度并不大，可能無法明顯地區(qū)分哪些是端對端測試哪些是單元測試，有時候他們是混合起來的，不過只要記住我們的目標是保證功能可以正常運行救足夠了。

在瀏覽器的測試中，Selenium 可謂是最重要的工具之一。簡單來說Selenium的作用是 "Automate Browsers"——讓瀏覽器可以自動化起來的工具。它提供了統(tǒng)一的接口，讓用戶可以使用不同的編程語言，調(diào)用其接口來模擬用戶的操作，例如點擊，移動等操作。基本上一切人工操作的行為都可以通過 Selenium 的 API 進行觸發(fā)操作。我們將 Selenium 看作是人手的代理，幫程序員完成一切用手干的活。

測試的技術(shù)方案選擇

在介紹本文涉及項目的技術(shù)棧之前，需要提醒諸位，此處的技術(shù)選擇并不一定完全適用于諸位的項目，請各位三思而測。目前市場上有眾多的測試框架，測試斷言庫甚至是全套的測試解決方案。Karma、Jasmine 和 Mocha 是大家熟知的測試框架，而 chai, should.js 是流行的斷言庫，另外在不同的技術(shù)社區(qū)還有自成一套的測試技術(shù)，比如 React 社區(qū)中的 Jest 和 Enzyme 都是受開發(fā)者喜愛的測試框架和庫，最近一些新的并行測試解決方案也日漸流行，如AVA、Intern。本文中的實踐來自于項目A，在項目測試前期我們分析了測試需求，我們希望整個測試方案能滿足一下要求：

支持端到端測試

對接云測試服務(wù)方便

本地測試和云測試切換方便

提供封裝的瀏覽器操作接口

測試用例可以快速遷移到其他框架下執(zhí)行

考量了以上的需求，我們認為 NightWatch.js 是一款非常合適的測試解決方案。當然其他的測試框架也基本能滿足需求，但是從方便易用性上考慮，我們最后采用了 NightWatch.js，該方案不僅提供簡易封裝的瀏覽器代理操作 API， 還給我們提供了方便便捷的云測試配置(下一篇文章將著重介紹此內(nèi)容)，就憑這兩點就已經(jīng)非常吸引我們了。對于前端測試新手，強烈推薦試用此框架，讓你可以迅速完成曾經(jīng)畏而卻步的測試工作。

項目實踐

項目A的本地測試實踐是需要分別在兩臺電腦上的多瀏覽器中執(zhí)行測試，兩臺電腦分別是 Windows 系統(tǒng)和 Mac 系統(tǒng)，包括了 IE 、Firefox(windows/mac)、Chrome(windows/mac)、Safari 等最新的主流瀏覽器。兩臺機子的測試是分別執(zhí)行的，我們通過 Jenkins 分別定期執(zhí)行機子上的測試任務(wù)，將測試結(jié)果通過郵件的方式反饋給開發(fā)人員。 Jenkins 是一個持續(xù)集成的平臺，關(guān)于如果使用 Jenkins 請各位自己 Google..

在接下來的文章中，我們將只介紹在一臺機子上的工程實踐，對于多個機子的測試需要將如下的工程部署到不同的機子，再使用諸如 Jenkins 之類的工具進行定期執(zhí)行就可以。

開始工作前，我們需要將技術(shù)關(guān)系了然于心。我們在 Nightwatch 框架下使用 Selenium 中的 driver對瀏覽器進行操作。不同的瀏覽器有不同的 Driver，整個技術(shù)棧圖如圖1所示：

圖1

在圖中 Test Runner 即為 Nightwatch，我們使用 Nightwatch 提供封裝過的 API 進行 Test Case 的書寫。下面我們將從零開始手把手教你如何使用 Nightwatch 啟動你的第一個 Test case。

1. 安裝測試所需包

在自己的前端項目中安裝 Nightwatch.js，并將其保存在 package.json的 devDependencies 中。

npm install nightwatch --save-dev

1

2. 增加 npm script 入口

在 npm scripts

中加入 test 指令入口，該條指令的具體工作是使用 test.conf.js 的配置，執(zhí)行名為'A'、'B'、'C'的配置項(若為了直觀查看測試的內(nèi)容，可根據(jù)項目的測試瀏覽器和版本將名字設(shè)為 chrome52.0

, safari9.0 這樣的名字，此處設(shè)為 A,B,C 是避免大家誤認為是指令是自動根據(jù)名字去尋找匹配的瀏覽器）。更多命令的詳解請參照 Nightwatch 文檔。

"scripts": { ... "test": "./node_modules/.bin/nightwatch -c conf/test.conf.js -e A,B" ... }

1

2

3

4

5

3. 配置 Nightwatch

完成指令入口的配置工作，接下來需要完成 test.conf.js 的配置工作。在本地測試中，我們使用 Selenium 對瀏覽器進行代理操作。配置使用本地 Selenium 操作本機瀏覽器 Nightwatch 有三個重點：

Selenium 的配置：配置好 Selenium jar 包的路徑，該包從 Selenium 的官網(wǎng)上下載，host 和 port 按照下文配置書寫。

driver 的配置：cli_args 是 Selenium 參數(shù)，在這我們指定了 chromedriver 和 geckodriver 的路徑，chromedriver 是用來操作 chrome，geckodriver 用來操作 safari 和 firefox（顧名思義，geckodriver 支持基于 gecko 的瀏覽器），都可以從網(wǎng)上進行下載。在項目A中，我們將其下載到前端下面的 bin 目錄下。

測試目標瀏覽器的配置：也就是A和B，每一個 Object 都是一個配置項，A是測試Chrome瀏覽器，B是測試 Safari 瀏覽器，如果沒有指定版本，就使用本地最新版，更多的配置可以參考 Nightwatch 文檔，可以指定系統(tǒng)、版本，并可以啟動、禁用瀏覽器的某些特性，如 Cookie。

selenium : { "start_process" : true, "server_path":"./bin/selenium-server-standalone

-3.4.0.jar", "host" : "127.0.0.1", "port" : 4444, "cli_args": { "webdriver.chrome.driver": "bin/chromedriver", "webdriver.gecko.driver" : "bin/geckodriver" } }, ... test_settings: { A: { desiredCapabilities: { 'browserName': 'chrome' } }, B: { desiredCapabilities: { 'browserName': 'safari' } } } ...

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

諸位需要根據(jù)自己機子的實際情況進行配置，如果是Windows系統(tǒng)，那么將沒有safari瀏覽器

，而使用 IE 瀏覽器，這樣則會需要 IE 瀏覽器對應(yīng)的 driver。

4. 書寫測試用例

在各項準備工作完畢后，就只差測試用例了，下面是項目A的一個測試用例的片段，用于檢測頁面上 id 為 testid 的 DOM 中的內(nèi)容字符，我們期待字符的長度為 32， 如果該字符為 32 個字符，那么測試通過，否則測試失敗。需要注意的是因為此 DOM 是動態(tài)插入的，所以在判斷其字符前，我們使用 waitForElementVisible 來檢查瀏覽器中 testid 的 DOM 是否已經(jīng)顯示，若在5秒內(nèi)顯示則進行下面的工作，如果沒有顯示，那么測試也會失敗。

module.exports = { '@tags': ['unit'], 'unit testing' : function (browser) { browser.url

(`http://localhost:3010/test`) .waitForElementVisible('#testid', 5000) .getText("#testid",function(result){ this.assert.equal(result.value.length,32); }); browser.end(); } };

1

2

3

4

5

6

7

8

9

10

11

12

13

14

5. 運行測試

到此為止，我們簡單的測試工程已經(jīng)搭建完畢?，F(xiàn)在我們回過頭去，執(zhí)行我們最開始配置的 test 指令，啟動測試任務(wù)。你需要在命令中執(zhí)行：

npm test

1

2

3

4

如果順利的話，此時你會看到瀏覽器自動地打開關(guān)閉，很快就能從終端上看到如下的測試結(jié)果,圖2 展示的是多個測試用例成功的結(jié)果，圖3展示的是測試失敗的結(jié)果（如遇到無法測試或者其它異常情況請 Google。：D)。

圖2

圖3

從測試結(jié)果中可以查看測試用例的測試結(jié)果，包括測試的瀏覽器、未通過測試的信息詳情等。至此，一個從零開始的本地測試實踐教程結(jié)束。

本地測試與云測試

因為本地瀏覽器的類型有限，一般我們更多地使用本地的多瀏覽器測試來完成功能驗證的工作，對于要求更嚴的兼容性測試，我們將采用云測試的方式。云測試即云服務(wù)提供商將向我們提供更多的云主機，每臺主機上運行著不同版本的瀏覽器。通過使用云測試服務(wù)，我們就能將測試覆蓋到更多類型、版本的瀏覽器。

在下一篇文章中，我們?nèi)砸皂椖緼為例子，使用 Nightwatch 框架，在此文章的基礎(chǔ)上介紹云測試和云測試工程的搭建。

轉(zhuǎn)自：[從入門到不放棄]多瀏覽器的自動化測試(2)-云服務(wù)測試 - 知乎專欄

在上一篇文章中，擼主已手把手教大家如何從零開始構(gòu)建一個本地自動化測試工程。如果你沒有看過上一篇文章，請先逐字閱讀。本文將在上一篇文章的基礎(chǔ)上主要為大家介紹兩個內(nèi)容：一是如何免費地搭建多機的自動化測試環(huán)境，二是如何使用云測試服務(wù)進行360度無死角的自動化測試。信息量大，請各位閱后勿焚，動手牢記。

本地測試鞭長莫及

由于一臺計算機支持的瀏覽器種類有限，如一臺 mac 上可以安裝 safari, chrome, firefox, opera 等，而且通常只能安裝一個版本的產(chǎn)品，所以本地測試多用于檢驗功能邏輯是否正確，或者是檢驗特定瀏覽器的特定功能。對于未知的兼容性測試，單憑本地測試是沒法進行的。下文中介紹的方法將提供給測試者一種全新的測試體驗，通過遠程測試的方式對自己的代碼進行測試。 遠程測試需要搞清楚兩個概念，一是客戶端 (Client)，一是服務(wù)端 (Server)，Client 是用于運行 test cases 代碼的地方，Server 則是瀏覽器所在地。通過 Server 上的一些 servlet 來連接 Client 和 Server 上的瀏覽器，實現(xiàn)將 test 中的用例行為在遠程端的瀏覽器上執(zhí)行。 通過瀏覽器和 test 執(zhí)行宿主機的分離，使得test能在更多的瀏覽器上執(zhí)行，并且更易于擴展測試瀏覽器的數(shù)量。在下文的實踐當中，讀者會對 Client 和 Server 有更清楚的了解，在此不再贅述。

自己的云測試環(huán)境

既然測試代碼要和瀏覽器環(huán)境分割開來，那么我們需要在前文的基礎(chǔ)上將瀏覽器安裝到其他的環(huán)境中，而不是將瀏覽器和測試的 Node 測試環(huán)境放在同一臺機子。安裝完成之后需要使用服務(wù)端的 Servlet 也就是 Selenium 提供的 webdriver server

將測試環(huán)境和瀏覽器連接起來。具體的步驟如下： 1. 尋找到一臺可用的主機： 無論是實體機還是虛擬機都是可以的，不過需要主機可以接入到測試運行主機的網(wǎng)絡(luò)。

2. 在主機上安裝瀏覽器： 具體安裝的瀏覽器類型和版本根據(jù)操作系統(tǒng)和測試需求而定， 例如可以在 windows 操作系統(tǒng)上安裝 IE， firefox等瀏覽器，在 Linux 系統(tǒng)安裝 chrome, firefox等瀏覽器， 在 Mac系統(tǒng)上安裝 safari, chrome 等瀏覽器。

3. 下載對應(yīng)瀏覽器的 driver 到Server主機上。因為 selenium 需要使用不同的 driver 來啟動不同的瀏覽器，如同上一篇文章提到的bin目錄下的 driver 可執(zhí)行文件，此時要將需要測試瀏覽器對應(yīng)的 driver 下載到 server 上，然后再通過測試工程的配置告訴 selenium-server-standalone 這些 driver 在哪，從而執(zhí)行它們來操作瀏覽器。

chromedriver (用于 chrome)-: https://sites.google.com/a/chromium.org/chromedriver

geckodriver (可用于 firefox, safari)-:https://github.com/mozilla/geckodriver/releases

4. 在主機上下載并啟動 Selenium Server: 該 Server 實際上是一個 Java 小程序，用于 client 和 server 之間的通信（有關(guān) selenium 原理的文章請關(guān)注《搞不懂不甘心

》系列）。首先在 Selenium 的官網(wǎng)上下載 selenium-server-standalone-{VERSION}.jar， 然后啟動該 Jar 包。

java -jar selenium-server-standalone-{VERSION}.jar

1

如果主機沒有安裝 JRE, 則需要再安裝 java 的運行環(huán)境或者是直接安裝 jdk 。

5. 修改測試項目的配置文件：還記得啟動測試時需要指定的配置文件嗎？這個配置文件 test.conf.js 非常重要，用于配置 selenium 以及測試的瀏覽器，當我們改變使用遠程server的瀏覽器作為測試目標時，當然需要修改配置文件。我們需要將配置文件中的 selenium 項修改為如下形式：

selenium : { "start_process" : true, //server的ip地址 "host" : "192.168.10.1", "port" : 4444, "cli_args": { //chromedriver 在server主機上的文件路徑 "webdriver.chrome.driver": "/home/bin/chromedriver", //geckodriver 在server主機上的文件路徑 "webdriver.gecko.driver" : "/home/bin/geckodriver" } }

1

2

3

4

5

6

7

8

9

10

11

12

對于test_settings

的設(shè)置請參照上文，然后按照自己安裝的瀏覽器版本進行修改。

6. 啟動測試：一切準備好了之后，在client主機上，也就是測試代碼運行的機子上便可啟動測試。

"scripts": { ... "test": "./node_modules/.bin/nightwatch -c conf/test.conf.js -e A,B" ... }

1

2

3

4

5

自己搭建測試云環(huán)境的過程其實并不復(fù)雜，只需要在將 selenium server

和瀏覽器安裝到其他主機即可，對于 client 上的代碼不需要改動，只需要改動配置中的 selenium 配置。但是很快測試者會發(fā)現(xiàn)，當我們需要測試更多的機子，用手工的方式去維護這些 server 是一件費時費力的事，也消耗了公司的計算資源。有沒有更好的辦法讓我們既可以全面的測試自己的代碼又可以不用費盡心思維護主機？答案是有，請繼續(xù)閱讀。

云測試服務(wù)

對于繁瑣重復(fù)的工程任務(wù)，商家們總是能想到賺錢的辦法，這不對于上文我們碰到的麻煩就有商家提供了相應(yīng)的產(chǎn)品。該產(chǎn)品為測試者們提供無數(shù)個測試瀏覽器，測試者不需要關(guān)心這些瀏覽器在何處運行，應(yīng)該怎么樣維護，只需要一個服務(wù)地址便可以將自己的測試頁面跑在這些瀏覽器上，其實這個服務(wù)地址和之前我們自己搭建的 Server ip 類似，只不過如果使用自己的測試云，使用不同的測試主機時，需要手動更改host。而這些商家提供了一個類似分銷中心，用于流量分發(fā)，所以我們只需要用一個地址便可實現(xiàn)使用不同的主機進行測試。 目前提供此類服務(wù)的商家有很多，如 browserstack、saucelabs、crossbrowsertesting 等，大家可以根據(jù)自己手頭黃金和測試的需要選擇性價比高的服務(wù)。本文將使用 browserstack 作為例子為大家科普此類服務(wù)，不過它并不是擼主的金錢爸爸，請大家放下水文的猜疑。

根據(jù)我們自行搭建云測試環(huán)境的經(jīng)驗，我們將 browserstack 的測試后臺架構(gòu)猜想為下圖所示。我們不關(guān)心該架構(gòu)是否是真實的實現(xiàn)，但是這是合理的理論猜想，希望此圖能讓我們對此服務(wù)有個大概的技術(shù)了解：

browserstack 為用戶提供了自動化測試、實時交互測試、截圖等服務(wù)，關(guān)于具體的服務(wù)細節(jié)請移步官網(wǎng)。本節(jié)將主要介紹如何使用其自動化測試服務(wù)，會稍微提及實時交互測試的功能。那接下來便開始我們的云測試使用體驗： 首先在其[網(wǎng)站](https://www.browserstack.com)上注冊賬號，點擊最上方的導(dǎo)航欄中的 Automate，跳轉(zhuǎn)頁面后在新頁面左側(cè)最上方點擊 ”Username and Access Keys”，便可看到用于使用云測試服務(wù)的用戶名和key，我們將使用此auth來修改測試配置。 現(xiàn)在回到我們的測試項目，對 test.conf.js 的 selenium 項進行修改，并添加 common_capabilities

項，用于配置云服務(wù)的信息。

selenium : { "start_process" : false, "host" : "hub-cloud.browserstack.com", "port" : 80 }, common_capabilities: { 'build': 'nightwatch-browserstack

', // Browserstack 的 username 對應(yīng)配置項 'browserstack.user': process.env.BROWSERSTACK_USERNAME', // Browserstack 的 key 對應(yīng)配置項 'browserstack.key': process.env.BROWSERSTACK_ACCESS_KEY, 'browserstack.debug': true, 'browserstack.local': true }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

連接云測試服務(wù)的配置工作完成后，我們需要指定測試的瀏覽器種類和版本。如果有不指定的字段，云服務(wù)會有缺省值來填充，例如配置中沒有指定操作系統(tǒng)，云服務(wù)則會自動選擇最快的一個測試機，而不管瀏覽器所在的操作系統(tǒng)。再例如當沒指定測試瀏覽器的版本時，云服務(wù)則會測試最新版本的瀏覽器。官網(wǎng)上的文檔提供了所有可提供測試的瀏覽器種類和版本，為了說明方便，我們現(xiàn)在只指定瀏覽器種類，不規(guī)定版本。簡要的瀏覽器配置項如下：

... safari: { desiredCapabilities: { browserName: 'safari' } }, ie: { desiredCapabilities: { browserName: 'ie' } }, ... ios: { desiredCapabilities: { browserName: 'iPhone' } } ... }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

以上工作做完之后便可以啟動測試了，是不是so easy。除了命令行返回的測試結(jié)果之外，browsertack 自動化測試還為我們提供了測試回放等。如果發(fā)現(xiàn)測試出錯，可以通過商家提供的在線實時測試來進行調(diào)試，這也是一個非常方便的功能。

有的放矢地測試

閱讀完自動化測試的文章，相信大家已經(jīng)迫不及待想體驗云測試的便利。在各位動手之前，有一些溫馨提示需要告知大家。首先這些云測試服務(wù)因為由國外服務(wù)商提供，所以網(wǎng)絡(luò)延時有些時候會過高，測試可能會出現(xiàn)超時的情況，請選擇網(wǎng)絡(luò)較好的主機來運行測試用例。其次是因為自動化測試會讓大家寫測試用例上癮，反正測試扔上去測就好，但是擼主認為測試人員還是要清楚地劃分測試的粒度，有些測試用例比如細粒度的單元測試和端對端的測試，有很多測試覆蓋的都是同樣的代碼，這樣的測試其實是浪費的，所以在明確目標之后，還需要精心設(shè)計測試用例。最后如有不懂請先 google，其他不能 google 的問題歡迎和擼主交流，文章若有錯請指教。

web前端 自動化測試

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。