端到端測試，protractor測試的教程

之前我們介紹了如何測試某段js代碼的邏輯是否正確，考慮的情況是否全面，但是在ui界面上我們每次做好的功能都要自己去填寫內容，點擊按鈕等，那么是否存在自動化測試的工具呢，讓這些事情可以自動完成，答案是肯定的，今天我們就來講解如何自動測試我們界面上的功能。

1.安裝依賴文件

　　在任意的地方創建新的文件夾，例如test，進入到文件夾里，打開命令行或者gitbash；

　　<1>安裝protractor

npm install -g protractor

　　<2>安裝karma-jasmine

npm install --save-dev karma-jasmine

　　<3>webdriver-manager 驅動

webdriver-manager update //瀏覽器的驅動

　　<4>安裝javaJDK

　　由於運行的時候需要java環境，所以需要安裝javaJDK， http://blog.csdn.net/bingiser/article/details/53375282，這個網址很詳細的介紹了如何一步一步安裝javaJDK。

2.簡單介紹karma-jasmine的語法

　　由於之前的單元測試介紹過karma-jasmine，所以這里簡單介紹，如果有人沒看過，去這里看 ，http://www.cnblogs.com/zhenfei-jiang/p/7027948.html。

describe("測試加法", function () {//describe就是對這次測試的整體描述，如：加法測試
      it("3+5=8", function () {//it是對個測試的描述，如：3+5應該等於8
        expect(add(3, 5)).toEqual(8);//期待add（3,5）的結果等於8
      });
});

3.介紹幾個常用的protractor api　具體的api去網站  http://www.protractortest.org/#/api，需要翻牆。

　　1. browser.get('http://baidu.com')導航到當前頁面
　　2. element找到元素
　　3. element.all找到元素集合
　　4. by 查找元素
　　　　* by.binding : ng-bind, {{}}
　　　　* by.model : ng-model       //例子：element(by.model('name')).sendKeys('haha'),就是找到含有ng-model="name"的輸入框然后填寫haha；
　　　　* by.repeater : ng-repeater
　　　　* by.id : id選擇器      //id選擇器
　　　　* by.css : css選擇器
　　　　* Array.get(2) : 選擇第2個      //獲取元素的第二個，因為可能某種選擇器會得到很多的元素
　　5. click 點擊事件     //element(by.cssContainingText("button","OK")).click()，選擇button的內容是OK的按鈕點擊
　　6. sendKeys 書寫內容
　　7. 獲取信息,判斷
　　　　* getText 獲取文本
　　　　* getSize 獲取尺寸
　　　　* getAttribute 獲取屬性
　　8. getTitle
　　9. sleep
　　10. brower.wait()等待某元素出現   //這個常用的是跳轉頁面的時候要等待下一個頁面某個元素出來才可以操作

4.編寫你的protractor_conf.js

exports.config = {
    directConnect: true,
    capabilities: {
        'browserName': 'chrome',
    },
    specs: ['applications-test.js'],     //運行的測試文件地址
    //framework: 'jasmine2',
    jasmineNodeOpts: {
        showColors: true,
        defaultTimeoutInterval: 30000
    },
    //輸出測試報告
    //onPrepare: function(){
    //    jasmine.getEnv().addReporter(
    //        new Jasmine2HtmlReporter({
    //            savePath: 'e2e/',
    //            takeScreenshots: true,  //是否截屏
    //            takeScreenshotsOnlyOnFailures: true //測試用例執行失敗時才截屏
    //        })
    //    );
    //}
};

5.編寫的測試代碼

describe(" checkoutLogin", function() {
    it('進入登入界面',function(){
        browser.get("http://localhost:106/#/login");//首先進入到這個網址
    })

    it('登入',function(){
        browser.wait(function () {//然后等待這個網頁出現了ng-model="form.password"這個選擇器，再執行其他的操作
　　　　 　　return browser.isElementPresent(by.model("form.password"));//直到這個選擇器的元素存在的時候
　　　　 }, 2000); 
　　　　 element(by.model("form.username")).sendKeys("admin")//給ng-model="form.username"填寫admin
　　　　 element(by.model("form.password")).sendKeys("admin") //給ng-model="form.password"填寫admin
　　　　 element(by.css("input.loginbtn")).click()　 //點擊登入這個按鈕
　　 })
})

6.啟動命令

　　<1>啟動瀏覽器驅動  當前文件夾下打開cmd命令行或者gitbash

webdriver-manager start

　　<2>啟動測試代碼  當前文件夾下打開另一個cmd命令行或者gitbash

protractpr protractor_conf.js

就可以看到自動會啟動一個頁面，跳轉到你測試代碼的地址，進行你一系列的操作。

7.踩過的坑

　　<1>最好在你的protractor_conf.js的 browserName填寫“chrome”，因為火狐的瀏覽器（firefox）可能存在報錯的問題，並且你的chrome的版本需要高於58。

　　<2>你的頁面假設有透明的地方可能會遮住你的按鈕，那么會導致你的按鈕點擊不到報錯