分度器のページオブジェクトを設定する

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

私のSPECファイルのコードは次のとおりです。：

ページのオブジェクトで

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); 
}); 

を

は、を効率的に参照し、アプリケーションのテンプレートが変更されても、ページオブジェクトを変更するだけで済みますあなたのテストケースではなく、 あなたの質問を明確にすることを願っています！