在量角器中設置頁面對象

Question

我是量角器的新手，讓我的手髒了所有的各種技巧和竅門，使我的代碼更加模塊化和高效。我爲我的規範文件創建一個頁面對象。 Page對象：

var mapFeedBackpage=function(){ 

    REPORT_ROAD=element.all(by.css("div[ng-click=\"setLocation('report_road')\"]")); 
    ROAD_NEW=element.all(by.css("div[ ng-click=\"mapFeedBack.editObject= mapFeedBack.createMapObjectModel();setLocation(mapFeedBack.noMap?'road_new':'choose_location_road_new/road_new')\"]")); 
    ZOOM_IN=element(by.css('div[ng-click="zoomIn()"]')); 
    ROAD_NAME=element(by.model("mapFeedBack.editObject.roadName")); 
    SUBMIT_ROAD=element(by.css('button[ng-click="onSubmit({reportType: reportType})"]')); 
    HIGHWAY_OPTION=element(by.model("mapFeedBack.editObject[attrs.select].selected")).$("[value='string:app.road.roadType.highway']"); 


    }; 

    module.exports=mapFeedBackpage; 

現在的問題是，當我在頁面加載寫this.REPORT_ROAD文件我的測試失敗說它不能找到REPORT_ROAD變量，但是當我刪除此它適用的變數。現在，我想知道爲什麼這樣？任何人都可以請解釋我嗎？ 我使用的頁面加載指南：http://www.protractortest.org/#/style-guide#page-objects

我的規格文件，代碼如下：

var mapFeedBackpage=require('./mapFeedBack-page.js') 
describe("Map feedback Automation",function() 
{ 

var mapFeedBack= new mapFeedBackpage(); 

    it("Check if the Url works ",function() //spec1 
    { 
     browser.get(browser.params.url); 
     expect(browser.getCurrentUrl()).toContain("report"); 
     browser.sleep(browser.params.sleeptime); 
    }); 


    it("test browser should reach report road option",function() //spec2s 
    { 
     REPORT_ROAD.click(); 
     expect(browser.getCurrentUrl()).toContain("report_road"); 
     browser.sleep(browser.params.sleeptime); 
     browser.sleep(browser.params.sleeptime); 
    }); 


    it("test browser should reach report road missing",function() //spec3 
    { 
     ROAD_NEW.click(); 
     expect(browser.getCurrentUrl()).toContain("choose_location_road_new/road_new"); 
     browser.sleep(browser.params.sleeptime); 
     browser.sleep(browser.params.sleeptime); 
    }); 


    it("test browser should zoom on map ",function() //spec4 
    { 


    var EC = protractor.ExpectedConditions; 

    for(var i=0;i<3;i++) 
    { 
     var elm = ZOOM_IN; 
     browser.wait(EC.elementToBeClickable(elm), 10000); 
     elm.click(); 
     browser.sleep(browser.params.sleeptime); 
    } 



    }); 

    it("Should click on ok option",function() //spec5 
    { 
      var EC = protractor.ExpectedConditions; 
     var elm = element(by.buttonText('OK')); 
     browser.wait(EC.elementToBeClickable(elm), 10000); 
     elm.click(); 

     expect(browser.getCurrentUrl()).toContain("road_new"); 

    }); 



it("test browser should reach report road option",function() //spec6 
    { 

     browser.sleep(browser.params.sleeptime); 
     expect(browser.getCurrentUrl()).toContain("road_new"); 

    }); 



    it("should enter a road name",function() //spec8 
    {  

    browser.sleep(browser.params.sleeptime); 

    var testroadname = browser.params.testroadname; 


    ROAD_NAME.sendKeys(testroadname); 
    browser.sleep(browser.params.sleeptime); 



    }); 


     it("should check the type of road is highway",function() //spec9 
    { 

    HIGHWAY_OPTION.click(); 
}); 


     it("should submmit the map feedback",function() //spec10 
    {  

    SUBMIT_ROAD.click(); 
    browser.sleep(browser.params.sleeptime); 
    }); 





}); 

Answer 1

在你的頁面的對象，你應該「這個」聲明的元素，把它作爲一個代名詞在英語語言中 - 「he」，「she」，「it」您用於引用某個人或某個對象，同樣，您可以通過此方式訪問代碼/測試用例中的任何位置的元素。

http://www.protractortest.org/#/style-guide#page-objects - 這個風格指南中明確指出，使用「這個」與您在網頁中的元素objects.So你的代碼應該是這樣的：

var mapFeedBackpage=function(){ 

this.REPORT_ROAD=element.all(by.css("div[ng-click=\"setLocation('report_road')\"]")); 
this.ROAD_NEW=element.all(by.css("div[ ng-click=\"mapFeedBack.editObject= mapFeedBack.createMapObjectModel();setLocation(mapFeedBack.noMap?'road_new':'choose_location_road_new/road_new')\"]")); 
this.ZOOM_IN=element(by.css('div[ng-click="zoomIn()"]')); 
this.ROAD_NAME=element(by.model("mapFeedBack.editObject.roadName")); 
this.SUBMIT_ROAD=element(by.css('button[ng-click="onSubmit({reportType: reportType})"]')); 
this.HIGHWAY_OPTION=element(by.model("mapFeedBack.editObject[attrs.select].selected")).$("[value='string:app.road.roadType.highway']"); 


}; 

module.exports=mapFeedBackpage; 

你的天賦應該是這樣的：

var mapFeedBackpage=require('./mapFeedBack-page.js') 
describe("Map feedback Automation",function() 
{ 

var mapFeedBack= new mapFeedBackpage(); 

it("Check if the Url works ",function() //spec1 
{ 
    browser.get(browser.params.url); 
    expect(browser.getCurrentUrl()).toContain("report"); 
    browser.sleep(browser.params.sleeptime); 
}); 


it("test browser should reach report road option",function() //spec2s 
{ 
    mapFeedBack.REPORT_ROAD.click(); //This is a cleaner way to access page objects 
    expect(browser.getCurrentUrl()).toContain("report_road"); 
    browser.sleep(browser.params.sleeptime); 
    browser.sleep(browser.params.sleeptime); 
}); 

it("test browser should reach report road missing",function() //spec3 
{ 
    mapFeedBack.ROAD_NEW.click(); 
    expect(browser.getCurrentUrl()).toContain("choose_location_road_new/road_new"); 
    browser.sleep(browser.params.sleeptime); 
    browser.sleep(browser.params.sleeptime); 
}); 

上述方式有助於有效地引用元素，即使應用程序的模板發生變化，您只需更改頁面對象而不是你的測試用例。 希望它澄清你的問題！