Question

我是量角器的新手，并且用各种各样的提示和技巧弄脏我的手，使我的代码更加模块化和高效。我为我的规范文件创建了一个页面对象。页面对象：

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

在您的页面对象中，您应该使用＆＃34; this＆＃34; 声明元素，将其视为英语中的代词 - ＆＃34;他＆＃34; ，＃＆＃34;她＆＃34;，＆＃34;它＆＃34; 用于引用某个人或某个对象，类似地，您可以通过此方式访问代码/测试用例中的任何位置。

http://www.protractortest.org/#/style-guide#page-objects - 此样式指南明确指出在页面对象中使用＆＃34; this＆＃34; 与您的元素。所以您的代码应该是这样的：

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

上述方法有助于有效地引用元素，即使应用程序的模板发生更改，您也只需要更改页面对象而不是测试用例。希望它澄清你的问题！

在量角器中设置页面对象

1 个答案: