使用Nodejs+Protractor搭建測試環境

Protractor是一個end-to-end的測試框架，從網絡上獲得的答案是Protractor是做爲Angular JS應用程序的測試框架。它的構建基於Selenium WebDriver之上，且圍繞着Selenium WebDriver進行封裝，所以，Protractor中包含的每個feature對於Selenium WebDriver都是可用的。

至於爲何會強調Protractor做爲 Angular JS 應用程序的測試框架，或許是由於它針對Angular JS 提供了一些新的定位策略及功能，來更好的支持Angular JS。這裏是我的對其進行的猜想，而猜想的依據是Protractor提供了諸如 waitForAngular()方法。

這篇文章就來簡單看下怎麼搭建一個基於Protractor測試框架的測試環境，用來寫咱們的自動化測試代碼。

第一步毫無疑問，安裝Node.js，安裝Node.js並不難，能夠直接到 https://nodejs.org/en/ 網站上下載相應的安裝包，這裏選擇的是windows的安裝包：

上圖高亮的npm package manager是咱們安裝Node.js最爲重要的目的，固然，Add to PATH是幫助咱們省去了配置變量的環節，也是很重要的，安裝步驟很少贅述，若是圖方便的話，閉上眼睛一路Next下去就好。

安裝完成後，打開命令窗口，使用命令 "npm --version" 查看Node.js是否安裝成功：

因爲這裏須要使用pratractor，因此須要使用命令 "npm install --global protractor" 或者 "npm install -g protractor" 全局安裝protractor，爲何是全局安裝而不是本地安裝，由於咱們這裏只須要使用CLI(Command Line Interface) 而不須要用require將protractor包含進去，若是須要後者，則須要再在本地安裝一次，固然，若是不放心，也徹底能夠將全局和本地都安裝一次，之後若是須要用，就能夠直接用了，這裏做爲例子來看，只須要全局安裝便可。

因爲前面說過，Protractor是基於Selenium WebDriver的，而Selenium WebDriver須要安裝Java的JDK，所以這裏也一樣須要安裝JDK， 安裝完JDK以後，一樣的，在command window中輸入命令：webdriver-manager update

這時候，能夠試着啓用webdriver, 注意，若是這裏是先作了webdriver-manager update操做，而直接輸入 webdriver-manager start則會不成功，它會提示 java 不能識別，它既不是內部也不是外部命令。而緊接着才安裝JDK的話，在相同的command window中也一樣會持續這個提示，此時只須要從新開一個新的command window便可。

這時候能夠發現，webdriver 啓動了，接下來咱們試着開始寫case來看下是否是能夠運行，這裏選擇的編譯器爲Visual Studio Code， 固然，我的也挺喜歡用IntelliJ IDEA~

先隨便找一個目錄建立一個文件夾，而後用Visual Studio Code打開，通常來講，寫一個簡單的測試用例只須要兩個文件，一個configure文件，一個test case文件就能夠了，不過考慮到測試數據的存放，公共方法的共享等等各類因素，漸漸的，咱們的代碼結構會隨之而變化，這裏不會討論這些東西，但出於我的習慣，仍是選擇了三個文件，一個configure文件叫作conf.js, 一個test case文件叫作spec.js，這裏還有一個文件叫作TestData.js，考慮到從此本身練手可能會用不一樣的網頁，這個文件用來存在不一樣的測試網頁。 

先將三個文件建立出來，而後我的的習慣是先寫TestData.js, 這個文件內容很簡單，無非是存放一些URL，因此代碼以下：

有了測試的URL， 咱們就能夠開始寫test case了，這裏的test case來自於stack overflow 的protractor的介紹文章中他人提供的例子：

這裏第3行(hmm... 第1行其實能夠不用空的，由於不必)的目的就是爲了能獲得存放在TestData.js中的URL，一樣的，若是之後會將一些被提取出來的公用方法存放在單獨的文件中，而本身當前test case文件須要使用相應的方法，也須要使用 var xxx = require('xxx.js') 這樣的語法。

最後要寫的是最重要的conf.js文件，能夠說，當環境搭建完成後，case是否是可以運行得起來，配置可全靠這個conf.js文件，不過不用擔憂，由於就目前這個例子來講，conf.js文件很好寫：

對吧，確實好寫，但是這個配置是什麼意思呢？這個配置是告訴Protractor你的測試文件在什麼地方以及你的Selenium 服務器在哪裏。seleniumAddress就是指定Selenium的服務器，但是爲何是這個地址呢，hmm....寫這篇文章以前我還真沒想過，好像看到的只要是選擇配置seleniumAddress的，配置裏都是用這個網址的……點進去看到的以下圖所示：

從http://localhost:4444 上來看，這個應該是本機預留給Selenium WebDriver的端口號，所以，這個selenium address應該會默認設置全部其餘的配置。

好了，若是這個時候你的webdriver沒有啓動的話，使用上面介紹過的 webdriver-manager start命令讓它run起來吧，確保selenium webdriver正在運行，而後在conf.js文件所在的目錄中打開command window, 咱們要來見證奇蹟發生的時刻啦~

根據上面的配置，咱們在打開的command window中輸入命令： protractor conf.js --config=specs, 而後就靜靜地看着屏幕上出現的一幕幕精彩表演吧。

此時，若是一切都正常的話，電腦將會自行打開Chrome瀏覽器，而後輸入咱們指定的網址，完成咱們在case中指定的操做並進行一系列的驗證，以後瀏覽器關閉，結果顯示在command window中，好比下圖：

固然，這幅圖說明的是case運行成功的狀況，若是有不成功的狀況，也會在command window中有必定的提示，這裏沒有標註任何log，因此咱們看命令行顯示看不出case到底作了什麼，若是用log的方式一步步標註，那麼，咱們能夠很清晰地知道case作了什麼，哪一步經過順利，哪一步出現了誤差……

到這裏，其實本文就告一段落了，既驗證了咱們搭建的測試框架可用，也宣告了咱們這條case的成功，不過，用心的讀者們會發現一個問題，在咱們的配置文件裏，咱們徹底沒有對瀏覽器進行指定，可是run case的時候，卻自顧自地打開了Chrome，這是爲何呢？查找資料的時候，咱們可能會看到說Protractor對Chrome的支持是全部瀏覽器中最佳的，可是不是就能夠直接認爲這個framework默認啓用的瀏覽器是Chrome呢？

答案是確定的~ Chrome is the default browser！

更多內容能夠掃描下面二維碼關注微信公衆號: 倚樓聽風雨的如月