Angular.js自動化測試之protractor的示例分析-創(chuàng)新互聯(lián)

小編給大家分享一下Angular.js自動化測試之protractor的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、重慶小程序開發(fā)公司、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了凱里免費建站歡迎大家使用！

前戲

• 面向模型編程；

• 測試驅(qū)動開發(fā)；

• 先保障交互邏輯，再調(diào)整細節(jié)。---by 雪狼。

為什么要自動化測試？

    1，提高產(chǎn)出質(zhì)量。

    2，減少重構(gòu)時的痛。反正我最近重構(gòu)多了，痛苦經(jīng)歷多了。

    3，便于新人接手。

angular自動化測試主要分：端到端測試和單元測試，很明顯兩者都要熟練掌握。

端到端測試是從用戶的角度出發(fā)，認(rèn)為整個系統(tǒng)是個黑盒，只會有UI暴露給用戶，主要是模仿人工操作測試。

單元測試認(rèn)為整個系統(tǒng)是白盒，可以用來測試服務(wù)，控制器，過濾器還有基礎(chǔ)函數(shù)等。

端到端測試使用protractor，今天就扯這個。

為什么使用Protractor,也就是說Protractor有什么好處，有沒有替代品？

    1,不需要基于id，css選擇器，xpath等查詢元素，你可以基于綁定，模型，迭代器等等進行測試。

    2,避免回調(diào)地獄。對比下面的代碼就知道了。

//沒有protractor
driver.getTitle().then(function(title){
 expect(title).toBe('Baidu');
});

//使用protractor
expect(browser.getTitle()).toEqual('Baidu');

替代品:capybara-angular等。

正文

前戲做完了，開始辦正事吧。

第一步當(dāng)然是配置Protractor，別人寫好了，我就不累贅了，送上傳送門：

配置

第二步，掌握最簡單的測試（高手可以繞過）

describe('hello world', function() {
 it('標(biāo)題是hello world', function() {
  browser.get('測試地址自己搞一個咯');
  expect(browser.getTitle()).toEqual('hello world');
 });
});

說白了就是希望指定的鏈接的標(biāo)題是"hello world"

第三步，了解下大體編寫流程。

首先我們必須跳轉(zhuǎn)到指定的頁面,跳轉(zhuǎn)頁面有兩種方法。

1，browser.get，跳轉(zhuǎn)到指定的頁面，還會重新刷新整個頁面。

2，browser.setLocation，更確切的說，是跳轉(zhuǎn)路由,修改#后面部分。

“等待某個元素出現(xiàn)”而不是“等待頁面加載完畢”，如果頁面加載完畢之后，馬上去獲取某個元素，很可能改元素不存在，然后直接報錯退出。

點擊某個按鈕之后，彈窗，彈窗有漸進動畫，具體彈窗內(nèi)的元素什么時候出現(xiàn)不確定，那么必須“等待某個元素出現(xiàn)”。怎么實現(xiàn)？

//等待ng-model="password"的出現(xiàn)，最多等待20秒
browser.wait(function(){
 return browser.isElementPresent(by.model("password"));
},20000);

封裝頁面對象，英文叫PageObject,我也不知道怎么翻譯，說白了就是封裝組件或者頁面的選擇器。

為什么要有這一步？

先看一段代碼：

describe('angularjs homepage', function() {
 it('should greet the named user', function() {
 browser.get('http://www.angularjs.org');
 element(by.model('yourName')).sendKeys('Julie');
 var greeting = element(by.binding('yourName'));
 expect(greeting.getText()).toEqual('Hello Julie!');
});

describe('todo list', function() {
 var todoList;
 beforeEach(function() {
 browser.get('http://www.angularjs.org');
 todoList = element.all(by.repeater('todo in todos'));
});

it('should list todos', function() {
 expect(todoList.count()).toEqual(2);
 expect(todoList.get(1).getText()).toEqual('build an angular app');
});

it('should add a todo', function() {
 var addTodo = element(by.model('todoText'));
 var addButton = element(by.css('[value="add"]'));

 addTodo.sendKeys('write a protractor test');
 addButton.click();

 expect(todoList.count()).toEqual(3);
 expect(todoList.get(2).getText()).toEqual('write a protractor test');
});

這是沒封裝的情況。

1，語義化很差，根本很難看明白在做神馬。

2，重復(fù)代碼多。browser.get('http://www.angularjs.org');就不止出現(xiàn)了一次。

3，耦合嚴(yán)重。如果標(biāo)簽結(jié)構(gòu)改動，代碼很多地方都要改。

4，難以維護，隨著項目的增長和時間的推移，沒有人會樂意在這上面添加其它測試功能。

問題已經(jīng)暴露出來了，怎么封裝？

封裝之前，建議過一遍官方的教程和API接口，常用的不多，難度不大。傳送門。

舉個栗子，很簡單的。現(xiàn)在有個滾動條。示意圖有點丑，別笑。

封裝出來應(yīng)該如下，這樣即使?jié)L動條的代碼結(jié)構(gòu)改了什么的，只要改下面的代碼，而具體測試邏輯不用動。

function ScrollBarSelector(model){
 Object.defineProperty(this,"target",{
  get:function(){
   return typeof model == "string" ? element(by.model(model)) : model;
  }
 })
 Object.defineProperty(this,"pre",{
  get:function(){
   return this.target.$(".pre");
  }
 })

 Object.defineProperty(this,"next",{
  get:function(){
   return this.target.$(".next");
  }
 })

 Object.defineProperty(this,"scrollButton",{
  get:function(){
   return this.target.$(".scrollButton");
  }
 })
 Object.defineProperty(this,"value",{
  get:function(){
   return this.target.$("input").getAttribute("value");
 } })
}

測試邏輯，基本上就是，

點擊某個按鈕：scrollBar.next.click()

希望某個輸入框的內(nèi)容為：expect(scrollBar.value).toBe("xx");

最后，還是附上登錄的測試和路由跳轉(zhuǎn)，google上面很多人都在問。很多人問的問題是，登錄完了，跳轉(zhuǎn)頁面，怎么知道頁面跳轉(zhuǎn)了。

spec.js

!function(){
 require(".LoginAction.js");
 require(".LogoutAction.js");
 require(".ScrollbarAction.js");
 
 describe("自動登錄",function(){
  new LoginAction().execute("GetLiShu","123456");
 })


 describe('testScrollbar', function () {
  new ScrollbarAction().execute();
 });

 describe("退出登錄",function(){
  new LogoutAction().execute();
 });
}();

LoginAction.js

!function(){

 function LoginAction(){

 }
 var prop = LoginAction.prototype;
 prop.execute = function(userName,password){
  beforeEach(function () {
   //先跳轉(zhuǎn)到登錄頁面
   browser.get("登錄頁面");
   //等待輸入框出來
   browser.wait(function(){
    return browser.isElementPresent(by.model("username"));
   },20000);
  })
  
  //輸入賬號密碼然后點擊登錄
  it('自動登錄', function () {
   element(by.model("username")).sendKeys(userName);
   element(by.model("password")).sendKeys(password);
   element(by.css(".login-input-btn")).click();
  });
 }
 module.exports = LoginAction;
}();

ScrollbarAction.js

!function(){
 beforeEach(function () {
  browser.setLocation("/app/common/stepper");
 })
 it('測試滾動條', function () {
  var scrollbar = new ScrollbarSelector("vm.scroll");
  
  //等待滾動條出來，最多等待20秒，滾動條出來了，馬上處理測試代碼
  browser.wait(function(){
   return browser.isElementPresent(numberDefault.mius);
  },20000);

  //這里省略很多行測試代碼
 });
}();

以上是“Angular.js自動化測試之protractor的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站bm7419.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞名稱：Angular.js自動化測試之protractor的示例分析-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://bm7419.com/article2/diopic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、靜態(tài)網(wǎng)站、用戶體驗、企業(yè)建站、服務(wù)器托管、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)