Creating automating test suites using Page Object Design pattern is very successful in languages like Java and C#, but Automation Engineers faces many problems while creating page object when creating automation test suites using JavaScript. Astrolabe is a famous extension for Protractor, but I did not find it of much usefulness to implement that, instead you can create your own page objects without the need of any extension.
You can use the following procedure to implement the page object:
Page.js
var pageObject = {
// Locator of a link
link : function(){
return ptor.findElement(protractor.By.id(<locator>));
},
// function to click on element
clickOnLink : function(){
pageObject.locators().click();
}
};
exports.pageObj = pageObject;
Test.js
var pageObject = require(<path to Page1.js>);
describe('Click on an element', function(){
it('Verify page should open', function(){
// Click on Link by calling the function defined in the Page.js
pageObj.clickOnLink();
// Verify actual value to be expected value
expect(actual value).toBe(expected value);
});
});
In this architecture, we have created Page.js in which we have found a locator of a Link and a function to click on that Link. If you can recall, it is the same way we used to do in Java, C# or in any other similar language.
Now we want to click on the link and then expect something over there, so in the Test.js, we have called the function to click on the link and then we verify our expected value. I am writing my automation scripts using this architecture and till now I am very successful in this approach.
You can use the following procedure to implement the page object:
Page.js
var pageObject = {
// Locator of a link
link : function(){
return ptor.findElement(protractor.By.id(<locator>));
},
// function to click on element
clickOnLink : function(){
pageObject.locators().click();
}
};
exports.pageObj = pageObject;
Test.js
var pageObject = require(<path to Page1.js>);
describe('Click on an element', function(){
it('Verify page should open', function(){
// Click on Link by calling the function defined in the Page.js
pageObj.clickOnLink();
// Verify actual value to be expected value
expect(actual value).toBe(expected value);
});
});
In this architecture, we have created Page.js in which we have found a locator of a Link and a function to click on that Link. If you can recall, it is the same way we used to do in Java, C# or in any other similar language.
Now we want to click on the link and then expect something over there, so in the Test.js, we have called the function to click on the link and then we verify our expected value. I am writing my automation scripts using this architecture and till now I am very successful in this approach.
I would add to this in that I have found an expectations object to be useful. Sometimes, I repeat a number of very similar tests - such as testing that the creation and editing of a form displays the proper results.
ReplyDeleteHi Lingke,
DeleteCan you provide some more detail about expectations object? I am sorry but really I did not get what you trying to say with that. Any link is available on this would be really helpful.
I would love to hear your opinion of this related question: http://stackoverflow.com/questions/21466505/protractor-page-objects-inheritance
ReplyDeleteI was successful in creating a single page object (for a particular page) and able to test that page. When I try to add one more page object (for a different page of the Application) the protractor failed. Please let me know how this can be achieved?
ReplyDelete