# 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>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.oxygenhq.org/advanced/page-objects.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.