How to Convert below Line in Page Object using Protractor - protractor

Question

want to convert below line
rows.element(by.xpath(".//*[#ng-model='strategy.COMMENT']")).clear()
into page object like
rows.dataCatcherPage.strategyAUMValue.clear()
But i am getting the error
"Failed: Cannot read property 'strategyAUMValue' of undefined"
This is the Page object
strategyAUMValue: {
get: function () {
return element(by.xpath(".//*[#ng-model='strategy.AUM_VALUE']"));
}
},

Answer 1

How about this:
page
module.exports = new function () {
var elements : {
strategyAUMValue : element(by.xpath(".//*[#ng-model='strategy.AUM_VALUE']"))
};
this.clear = {
strategyAUMValue : elements.strategyAUMValue.clear()
};
this.getText = {
strategyAUMValue : elements.strategyAUMValue.getText()
};
};
spec
var dataCacherPage = require('./dataCacher.page.js');
describe('Data cacher', function(){
it('can clear the strategy aum value', function(){
dataCacherPage.clear.strategyAUMValue();
expect(dataCacherPage.clear.strategyAUMValue()).toEqual('', 'Strategy AUM Value should have been an empty string');
});
});
This lets your page elements be private(separating your framework layers), but gives you full access to all of the actions a test would be taking. You can expand on it by adding any other elements to the elements section, then adding to any this.clear/getText/isDisplayed type function that the element will need for testing.
Some extensibility:
module.exports = new function () {
var elements : {
strategyAUMValue : element(by.xpath(".//*[#ng-model='strategy.AUM_VALUE']")),
// Get an element where multiple exist
coolElement : $$('[name="coolElement"]')
};
this.clear = {
strategyAUMValue : elements.strategyAUMValue.clear()
};
this.getText = {
strategyAUMValue : elements.strategyAUMValue.getText(),
coolElement : elements.coolElement.getText()
};
};
.
var dataCacherPage = require('./dataCacher.page.js');
describe('Data cacher', function(){
it('can hit multiple elements', function(){
// Just add an index on coolElement to get whichever you want
expect(dataCacherPage.clear.coolElement(2)).toEqual('This is the third cool element on the page', 'Should have gotten the text from the third cool element');
});
});