CODEWITHSUNDEEP
angularjsprotractor
Blaise
Blaise

Reputation: 22222

How to refactor some function inside a Protractor Page Object or spec file into a separate file?

For PageObject, we have buttons/links in the bottom of the page. We have to scroll down to the bottom so as to click.

var ContactAddPage = function() {
    ...
    this.btnAdd = element(by.id('btnAdd'));

    this.add = function() {
        scrollToBottom();
        this.btnAdd.click();
    };

    function scrollToBottom(){
        browser.executeScript('window.scrollTo(0,10000);');
    }
};

Since scrollToBottom() will be used in many other page object, I assume we could refactor it out into a separator file and somehow require() it into the page object. But how to do that?

As for the spec files, there would be common functions like log in with different persona in beforeAll() and log out in afterAll(). And checking url is also common to each page:

function loginAs(role) {
    var loginPage = new LoginPage();
    loginPage.login(role);
}

function logOut() {
    var lnkLogOff = element(by.linkText('Log off'));
    if (element(by.linkText('Log off')).isPresent()) lnkLogOff.click();
}

function expectRouteToBe(expectUrl) {
    expect(browser.getCurrentUrl()).toBe(browser.baseUrl + expectUrl);
}

The same question here: what is the correct way to move them out and require() them back?

Upvotes: 2

Views: 339

Answers (2)

Brine
Brine

Reputation: 3731

You can extend modules by using exports and prototype inheritances... then you can have methods available in any or all of your pages. Eg. something like:

basePage.js:

var BasePage = function() {
    this.loginAs = function(role) {
        this.login(role);
    };

    ...
};
module.exports = new BasePage();

And then extend any number of pages thusly:

var basePage = require('./basePage.js');

var MainPage = function() {
    this.btnAdd = element(by.id('btnAdd'));

    this.add = function() {
        this.scrollToBottom();
        this.btnAdd.click();
    };

    this.scrollToBottom = function() {
        browser.executeScript('window.scrollTo(0,10000);');
    };
};
MainPage.prototype = basePage;
module.exports = new MainPage();

And then in your spec, you can:

var mainPage = require("../pages/mainPage.js");

...
it('should login and click add', function() {
    mainPage.loginAs(role);
    mainPage.btnAdd.click()
    ...
});

Hope that helps...

Upvotes: 1

alecxe
alecxe

Reputation: 474003

We've had something similar in our set of protractor e2e tests. We've created a set of helper libraries for the reusable functionality used in tests.

Example:

  • create helpers.js file:

    var Helpers = function() {
    this.scrollToBottom = function () {
        browser.executeScript('window.scrollTo(0,10000);');
    };
};

module.exports = new Helpers();

  • require and use it in your Page Object:

    var helpers = require("./helpers.js");

var ContactAddPage = function() {
    this.btnAdd = element(by.id('btnAdd'));

    this.add = function() {
        helpers.scrollToBottom();
        this.btnAdd.click();
    };
};

module.exports = ContactAddPage;

Upvotes: 1

Related Questions