Access inner element from within an element in protractor

Question

I came across concept of Page Objects, and used it in writing tests in Protractor, but I am facing an issue. The old code was as follows.

var productList = element.all(by.repeater('product in contractsCtrl.contracts'));
productList.get(0).element(by.model('qty')).sendKeys(20);

I organized the code in a class, like

var Product = {
  productList : element.all(by.repeater('product in contractsCtrl.contracts')),
  qtyElem : element(by.model('qty')),
  setProduct : function (pos) {
     this.productElem = this.productList.get(pos);
  }
}

Now to implement the scenario (as in code snippet 1) with Page Objects, I modified code as,

 var Product = require('product.js');
 Product.setProduct(0);

I am stuck here on how to access the qtyElem within productElem.

score 4 · Accepted Answer · answered Nov 02 '15 at 09:02

You can create a method setProductQty(), which sets quantity for a product on specific position:

var Product = {

    productList : element.all(by.repeater('product in contractsCtrl.contracts')),

    setProductQty: function (pos, qty) {
        var productElem = this.productList.get(pos);
        productElem.element(by.model('qty')).sendKeys(qty);
        return this;
    }

};

And usage will look like:

var Product = require('product.js');
Product.setProductQty(0, 20);
// ---product index---^
// --------quantity-------^

This method describes a single action which user usually performs at a time: he sees a product at position and sets a quantity. You can take it as a rule when designing Page Objects - try to define what is a single user action for particular situation and make a method for it.

Access inner element from within an element in protractor

1 Answers1