Page Object Design Approach — Key Points to Avoid Page Maintenance

What is Page Object

Page Object is a most popular Design Pattern used to enhance test maintenance and reduce code duplication. The Page Object Design Pattern has multiple advantages:

1. Easy to separate test code and page code
2. The code looks cleaner
3. All actions of page are listed in common file so easy to maintain in case of any change rather than updating the multiple test files.
4. Page functions get names which can be easily related with the action performed in the UI. Like clickSignInButton();

Page Object Design Approaches

The Page Object design pattern works well only when the Page Object design Approach is chosen carefully else it become a nightmare to update the pages in the long run. Let’s briefly review the different Page Object design approaches and key points to be followed for creating good Page Objects

Element Based approach

• The Element based approach lists all the possible elements and functions of a page.
• The Data function of a page will populate and return data for all the elements depending upon the element status on that page.
• This approach is useful when the same page has some differences in the elements for different users or roles. For e.g.

var obj = {

signup_btnText: ($$(this.signupBtn).length > 0) ? $(this.signupBtn).getText() : null,

login_btnText: ($$(this.loginBtn).length > 0) ? $(this.loginBtn).getText() : null

};

Pattern based approach

• This approach is suitable for the cases where element IDs and values are not fixed and the exact element selector can not be determined or prone to change.
• Use this approach where we get the pattern in the elements, count is not fixed and data may very based on user input.

let listCount = $$(this.listName).length;
if (listCount > 0) {
let i;
for (i = 0; i < listCount; i++) {
obj.list[i] = {
listName: $$(this.listName + i + “‘]”).length > 0 ? $(this.listName + i + “‘]”).getText() : null,
……………………………………..,
………………….

}

Condition based approach

• The condition approach will identify the state of the page based on a condition (an identifier in the dom) and then it will require the required Page object or Page Function or Page data.
• For eg: if the shuffling of questions in a quiz is enabled then every time the quiz is launched, the page object would identify the type of question and then call the required page object for the question.

Hybrid approach:

• Hybrid approach will be used when different page object approaches need to be used in a single page For eg: we will use both element and pattern based approach on a single page based on the requirement.

Page Object Construction rule

While designing a Page Object, it is important to define the Page construction rules upfront to avoid design inconsistency of the different pages. One option is to go with option provided below.

Categorize Page object into following page component:

1. Selectors
2. Is initialized()
3. Page Data
4. Page Functions

1. Selectors:

The following best practices can be followed for Selectors:

• All the selectors of the page will be listed at the start of page object
• Selector values should not be hardcoded in the page object file
• Selector values should always be referenced to a selector file

2. Isinitialized()

The following best practices can be followed for isinitialized():

• IsInitialized() function in the page object should always ensure that the dom is completely loaded by calling waitForDocumentLoad() function before calling the data function.
• Common Page Objects Like Header or Footer (whenever applicable) will also be called under this section

3. Page Data

• Page objects should be entirely dynamic and the default approach would be an element-based approach i.e. if the element is found then only get the attribute of the element.
• Try to avoid static data under Data function.
• If a page contains data which can be extracted using a pattern of selectors then we should use a pattern-based approach. It is recommended that the pattern-based approach is used when the number of elements matching the pattern is >=5.
• If a page in the application is so dynamic that it changes whenever it is visited then in such cases, a condition-based approach should be used where the nature of the page is identified based on an element in the dom and if the condition satisfies then the required page object is called. For example, a quiz with shuffling of questions.
• There may also be a case where we may follow a mixed approach i.e. combination of any approaches above.

4. Page Function

• Based on the page functionality, page specific functions will be created as required
• Never use default Test Framework (like WebdriverIO/ Mocha etc.) functions directly in the page. First create wrapper function in Base Action library and post that use the function in Page object. This will avoid your dependency on Test Framework in future.

Conclusion:

Page Object is a powerful design pattern for the Test Automation and it help a lot in writing clean code and maintaining the code base very easily. However, good Page Object can be created only if correct Page design approach and best practices be followed from the start i.e. consider and implement these rules during the Automation Test Design phase itself .