Managing page objects with Ranorex WebtestitRanorex Webtestit provides you with powerful tools for Page Object creation and management. You can define new Page Objects and create elements with selectors imported from Ranorex Selocity (as described here). You can use elements to generate Page Object Actions directly in Ranorex Webtestit. Using Page Object pattern, you can model the behavior of your web application into simple objects and perform your Page Object actions, like “click”, “sendKeys”, etc. to construct logical user interactions.
Structure of this chapter
Despite the name, do not make a mistake to create a Page Object for each page. The Page Object pattern does not necessarily correspond to a whole “page” in your website or app, but for the significant components on a page, such as headers, menus or content regions.
Creating a page objectA Page Object is a class within your project that contains elements and a set of actions utilizing those elements. To create a new Page Object, right-click the
test/pageobjectsfolder in the Project tab and select New > Page Object from the context menu.
As an alternative, you can use the keyboard chord Ctrl+N > Ctrl+P. Ranorex Webtestit will create a new Page Object file and wait for you to name it. Hit ENTER to create a new class.
It is a good practice to create Page Object classes which have
Poas a suffix, e.g.
Each Page Object is generated with default functions
getTitle, which is derived from the template system. You can adjust templates for your project by ⇢ following this guide. The Page Object you select in the Project tab becomes the active Page Object. Ranorex Webtestit will adapt the user interface and display information in various tabs according to the currently active Page Object class.
The page object tabWhen you select a Page Object from the Project tab, Ranorex Webtestit will open the Page Object tab. You use the Page Object tab to navigate the actions within the active Page Object.
|1||Page Object Name||Displays the name of the currently active Page Object|
|2||Actions List||GDisplays the Page Object’s public methods and their return values Right-click the name of an action and select Jump to code position to directly scroll to the definition in the code editor.|
Adding elements to page objectsTo add elements to your Page Object, you can… Connect Ranorex Selocity to import elements with one click Use the Elements tab to add new elements and define selectors manually Implement them directly as members in your Page Object class using the API calls provided by the automation framework
Creating page object actionsTo quickly create a Page Object action, you can utilize the Ranorex Webtestit templates. With an active Page Object, locate the Elements tab Drag the element you want to base your action on, into the Code tab Release the mouse at the spot you want to insert the new method From the pop-up menu, select the action you want the method to be based on Ranorex Webtestit will create a method reflecting the action. You can continue to edit the action freely, or drag more elements into the newly generated method.
Thanks to this feature you’ll save on the amount of code you’ll have to write when defining your Page Objects. Ranorex Webtestit offers you a set of actions out of the box.
Default actionsDefault actions are simple starting points for interactions with elements in your website or app. The following actions are available from the pop-up menu:
|Name||Description||Use this for|
|Click on element||Executes a mouse click on the element.||A click is the most basic interaction a user would execute with your element and is supported by most controls in automation.|
|Assign element to a variable||Creates a method stub to retrieve an element as soon as its visible and assigns it to a variable that can be used for further manipulation.||The perfect starting point for all the more complex operations you’d like to perform.|
|Get the element’s text||Extracts the element’s text value and assigns it to a variable.||Return the value to use it in your test, e.g. for an assertion.|
|Hover over element||Positions the mouse cursor within the element’s boundaries. Triggers the
||If your website or app uses hover effects to bring individual parts into view (e.g. menus), you can use this to simulate the mouse hovering the element.|
|Type into element||Enters text which gets passed as a parameter in the element||Not only useful when filling forms but also handy when testing keyboard shortcuts for your website or app.|
Enumerable actionsIf you hover over the Element by index pop-up menu entry, you’ll find a set of enumerator-based actions. These generate methods which are specifically targeting lists and other collections of similar elements.
An example of enumerator-based elements is a list of products in a webshop. Every product is displayed as its own component and the number of items is variable. In cases like these, the ID-based selector is often not feasible.
|Name||Description||Use this for|
|Click nth element||Creates a complex method that accepts the index of the specific element to be clicked. The index is 0-based. Yields an error if the index is negative or greater than the number of items.||If your element’s selector returns more than one element, you can instruct the automation framework to click, for example, the first one.|
|Get nth element||Creates a complex method that accepts the index of the specific element to be returned. The index is 0-based. Yields an error if the index is negative or greater than the number of items.||If your element’s selector returns more than one element, you can select which one to return. Behaves otherwise the same as Assign element to a variable.|
|Get nth element’s text||Creates a complex method that returns the text content of a specific element from a list. The index is 0-based. Yields an error if the index is negative or greater than the number of items.||If your element’s selector returns more than one element, you can select the one you want the text returned from. Behaves otherwise the same as Get element’s text.|
Make sure your selector always returns exactly one result for an element. Also, use enumerable actions only in cases where there actually exists more than one element of a kind. ⇢ Use Ranorex Selocity to assess your selector’s effectiveness.