CODEWITHSUNDEEP
javascriptjasmineprotractorangularjs-e2ee2e-testing
Colm Gallagher
Colm Gallagher

Reputation: 13

Chaining element variables for better location in protractor

In protractor I'm trying to clean up my locators, and organize things a little better. Currently, I have a variable that contains the element locator for a dialog, and a save button:

var StoryPage = function(){
    this.dialog = element(by.css('md-dialog'));
    this.saveButton = element(by.buttonText('Save'));
}

My question is, is there a way to chain these element variables, so that I can find the save button within the dialog like so:

this.dialog.saveButton.click()

or 

this.dropdown.saveButton.click()

Thanks in advance!

Upvotes: 1

Views: 667

Answers (1)

alecxe
alecxe

Reputation: 473833

Yes, you can chain the element finders in Protractor:

var StoryPage = function() {
    this.dialog = element(by.css('md-dialog'));
    this.saveButton = this.dialog.element(by.buttonText('Save'));
}

Now the Save button would be located within/in the scope/inside the md-dialog element.

If you want to "scale" that to multiple page objects, you can define a base page object:

var BasePage = function() {
    this.getSaveButton = function () {
        return this.dialog.element(by.buttonText('Save'));
    }
}

module.exports = new BasePage();

Then, use prototypical inheritance to inherit your other page objects from the base one which would allow you have save buttons inside different dialog containers: 

var BasePage = require("base");

var StoryPage = function(){
    this.dialog = element(by.css('md-dialog'));
}

StoryPage.prototype = Object.create(BasePage);

module.exports = new StoryPage();

Upvotes: 1

Related Questions