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:

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:

Using require is no longer needed, but still supported.

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

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:

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

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!