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

1.安裝依賴(lài)文件

　　在任意的地方創(chuàng)建新的文件夾，例如test，進(jìn)入到文件夾里，打開(kāi)命令行或者gitbash；

　　<1>安裝protractor

npm install -g protractor

　　<2>安裝karma-jasmine

npm install --save-dev karma-jasmine

　　<3>webdriver-manager 驅(qū)動(dòng)

webdriver-manager update //瀏覽器的驅(qū)動(dòng)

　　<4>安裝javaJDK

　　由于運(yùn)行的時(shí)候需要java環(huán)境，所以需要安裝javaJDK，http://blog.csdn.net/bingiser/article/details/53375282，這個(gè)網(wǎng)址很詳細(xì)的介紹了如何一步一步安裝javaJDK。

2.簡(jiǎn)單介紹karma-jasmine的語(yǔ)法

　　由于之前的單元測(cè)試介紹過(guò)karma-jasmine，所以這里簡(jiǎn)單介紹，如果有人沒(méi)看過(guò)，去這里看 ，http://www.cnblogs.com/zhenfei-jiang/p/7027948.html。

describe("測(cè)試加法", function () {//describe就是對(duì)這次測(cè)試的整體描述，如：加法測(cè)試
      it("3+5=8", function () {//it是對(duì)個(gè)測(cè)試的描述，如：3+5應(yīng)該等于8
        expect(add(3, 5)).toEqual(8);//期待add（3,5）的結(jié)果等于8
      });
});

3.介紹幾個(gè)常用的protractor api　具體的api去網(wǎng)站 http://www.protractortest.org/，需要翻墻。

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

4.編寫(xiě)你的protractor_conf.js

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

5.編寫(xiě)的測(cè)試代碼

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

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

6.啟動(dòng)命令

　　<1>啟動(dòng)瀏覽器驅(qū)動(dòng) 當(dāng)前文件夾下打開(kāi)cmd命令行或者gitbash

webdriver-manager start

　　<2>啟動(dòng)測(cè)試代碼 當(dāng)前文件夾下打開(kāi)另一個(gè)cmd命令行或者gitbash

protractpr protractor_conf.js

就可以看到自動(dòng)會(huì)啟動(dòng)一個(gè)頁(yè)面，跳轉(zhuǎn)到你測(cè)試代碼的地址，進(jìn)行你一系列的操作。

7.踩過(guò)的坑

　　<1>最好在你的protractor_conf.js的browserName填寫(xiě)“chrome”，因?yàn)榛鸷臑g覽器（firefox）可能存在報(bào)錯(cuò)的問(wèn)題，并且你的chrome的版本需要高于58。

　　<2>你的頁(yè)面假設(shè)有透明的地方可能會(huì)遮住你的按鈕，那么會(huì)導(dǎo)致你的按鈕點(diǎn)擊不到報(bào)錯(cuò)

總結(jié)

以上是生活随笔為你收集整理的端到端测试，protractor测试的教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。