---
tags: English
---

# Page Object Model Using SideeX
Due to the trend of the rapid evolution of modern web applications, web elements often change in release cycles, consequently causing the test cases to break down. In the example below, if you have a sign-up page, but due to some UI changes, the locators (id or XPath) to the input fields may also change. As a result, all test cases related to these elements will break down. Fixing these problems one by one is a very tedious and time-consuming work if there are dozens of element changes and hundreds of related test cases to be fixed. Fortunately, Page Object Model (POM) can be applied to deal with this problem. However, most of the implementations of POM are written in programming languages. This article introduces how to implement POM using SideeX without writing any code.

<img src="https://i.imgur.com/4Ps8vdr.png" style="width:50%">

Four input elements in the sign-up web page:

<input id="first_name">
<input id="last_name">
<input id="company_name">
<input id="company_zipcode">

:::info
- Example URL: https://sideex.github.io/sideexdemo/pom/signup-demo
- The test cases of the example can be downloaded from the [repo](https://github.com/SideeX/sideexdemo/tree/master/docs/pom).
:::
---

## Defining a Page Object
In concept, a page object represents a web page or a part of it. Basically, a page object consists of a set of web elements (as attributes in object-oriented concept) and actions (as methods). An action is a sequence of commands running on top of the elements. In SideeX, a page object can be realized as a test suite that contains a number of test cases defining its elements and actions.

:::info
- A page object is defined as a test suite
- An element or an action of the page object is defined as a test case
:::

### Elements
At first, let's create a test suite `SignUpPageObject` and add a test case `Elements_Name`. This test case is intended for defining two variables referring to the locators of the first name and last name elements, which can be achieved by using `store` command. The candidate values of the two commands' targets can be automatically generated using Select Target function (cursor icon right to the Target). In the example, variable `first_name_element` is defined to store the locator of the first name element, and variable `last_name_element` is defined to store the locator of the last name element. In the same way, another test case `Elements_Company` can be added for company name and zipcode elements.


### Actions
After defining variables for the elements, we define another two test cases as actions for filling out the form. For inputting the first name and last name, we firstly use `INCLUDE` command to include the variables defined in the `Elements_Name` test case, and then use `sendKeys` command to assign values to the elements. The values are defined as another two variables `first_name_value` and `last_name_value`. Likewise, another test case `Action_EnterCompany` is added for inputting the company name and zipcode.


:::info
The concept of SignUpPageObject test suite is like the following pseudo code in object-oriented programming language

class SignUpPageObject{

  var first_name_element = "id=first_name"; 
  var last_name_element = "id=last_name"; 
  var company_name_element = "id=company_name"; 
  var company_zipcode_element = "id=company_zipcode"; 


  function Action_EnterName(var first_name_value, var last_name_value){
    sendKeys(first_name_element, first_name_value);
    sendKeys(last_name_element, last_name_value);
  }

  function Action_EnterCompany(var company_name_value, var company_zipcode_value){
    sendKeys(company_name_element, company_name_value);
    sendKeys(company_zipcode_element, company_zipcode_value);
  }

}

:::

## Test Case Using the Page Object
After defining `SignUpPageObject`, we can create test cases by reusing the actions of the page object. For example, we create a test case `SignUpTest` with three steps: 1) go to the sign-up page by `open` command; 2) fill out the first name and last name input fields by including `Action_EnterName`; 3) fill out the company name and zipcode input files by including `Action_EnterCompany`. Meanwhile, in the `Global Var` tab, we define four variables and their initial values as inputs for these two actions.


## Playback Result
When playing `SignUpTest`, the variables defined in Variable tab are firstly loaded. After that, the two action test cases are dynamically included and executed, during which `Elements_Name` and `Elements_Company` are also dynamically included and executed.


<img src="https://i.imgur.com/tu7ofiI.png" style="width:50%">

## Build More Resilient Test Cases
As shown in the example, you can create more test cases reusing the action test cases of the page object test suite through `INCLUDE` command. As a result, these test cases become more resilient to the UI changes, such as changes of element locators and steps insides the actions.

:::info
`INCLUDE` and variables are the key ingredients of the Page Object Model in SideeX
:::