# Page Objects

Page Objects (PO) provides means for abstracting element locators behind human friendly *objects*. This makes scripts more readable, reduces duplicate code, and simplifies maintenance since locators are defined in a single location and any updates due to UI changes for example will need to be done only once in one place. Page objects will be stored in a special file called oxygen.po.js

**Hardcoded locators:**

```javascript
web.init();
web.open('https://www.wikipedia.org/');
web.type('id=searchInput', 'selenium');
web.select('id=searchLanguage', 'label=English');
web.click('//*[@id="search-form"]/fieldset/button');
web.assertText('id=firstHeading', 'Selenium');
```

**Using Page Objects:**

{% hint style="info" %}
Using require is no longer needed, but still supported.
{% endhint %}

```javascript
var po = require('./po.js');
web.init();
web.open('https://www.wikipedia.org/');
web.type(po.homePage.searchInput, 'selenium');
web.select(po.homePage.languageSelect, 'label=English');
web.click(po.homePage.goButton);
web.assertText(po.searchResultScreen.mainTitle, 'Selenium');
```

### This will work the same without require

```javascript
web.init();
web.open('https://www.wikipedia.org/');
web.type(po.homePage.searchInput, 'selenium');
web.select(po.homePage.languageSelect, 'label=English');
web.click(po.homePage.goButton);
web.assertText(po.searchResultScreen.mainTitle, 'Selenium');
```

Each object can be a part of a certain screen inside the "oxygen.po.js" file. The objects themselves are separated with ',' similar to a json file. Here is an example of how the file is built:

```javascript
module.exports = {
    homePage:
        {
            searchInput: 'id=searchInput',
            languageSelect: 'id=searchLanguage',
            goButton: '//*[@id="search-form"]/fieldset/button',
        },
        searchResultScreen:
        {
            mainTitle: 'id=firstHeading',
        }
}
```

In the above example search input box, language drop-down list, and the "Go" button are all located on the homepage and the header which we assert in the last step is located on a separate page. Hence we have defined two pages "Homepage" and "Search Result" (the names are arbitrary) each containing the relevant objects.

## Page object video tutorial <a href="#page-object-video-tutorial" id="page-object-video-tutorial"></a>

The following video will show you step by step how to create your own Page Object file and use it step by step in your Oxygen IDE tests!

{% embed url="<https://www.youtube.com/watch?v=lU0FCRYRDP8>" %}