Managing page objects with Ranorex Webtestit
Ranorex 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, the Page Object pattern does not necessarily correspond to an entire “page” on your website or in your app, but to the significant components on a page, such as headers, menus or content areas. So, when creating Page Objects, create a separate one for each of these components, not one for the whole page or multiple pages.
Creating a page object
A 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/pageobjects folder 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
Po as a suffix, e.g.
DetailPagePo in Java and Typescript or
detail_page_po in Python.
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 tab
When 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 objects
To 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 actions
To 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, which is a subset of Selenese commands used in Selenium IDE to help test various elements, actions, and many other functionalities related to a web application.
Actions are simple starting points for interactions with elements in your website or app. The following actions are available from the pop-up menu in Ranorex Webtestit:
|Click on element||A standard Selenium
|Double click on element||Invokes the mouse
|Type into element||Invokes the
|Clear and type into element||First invokes the
|Hover over element||Moves the mouse cursor at the center of the given element, simulating the hover over element action.|
|Submit form||Performs the submit to remote server action if the given element is a form or an element that is within in a form.|
|Switch to the iframe element||Allows users to switch to the located iframe and perform actions on the elements located inside that iframe.|
|Scroll to element||Allows users to scroll the specified element into the visible area of the browser window.|
|Scroll to element with offset||Scrolls to the target element and additionally by the number of pixels given as offset coordinates (x, y). Note that a negative value means either left (-x) or up (-y).|
|Down||Simulates the mouse click and hold action. Moves the mouse cursor to the center of the given element and performs the click and hold (without releasing) the left mouse button.|
|Up||Simulates the release of the clicked mouse button, in the middle of the given element.|
|Move||Moves the mouse cursor to the center of the given element.|
|Over||Simulates the mouseover event by moving the mouse cursor over the given element.|
|Out||Moves the mouse cursor away from the current (X, Y) position to the desired location by the given offset.|
Element by index
If 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.
|Click nth element||Clicks the nth item from the list. Stores all the located elements, and clicks the selected element from the list using the element’s index.|
|Get nth element||Returns the nth item from a WebElement list. Creates a list of Web Elements and selects and returns the element from the list using the element’s index.|
|Get nth element’s text||Returns the nth item’s text from the list. Creates a list of Web Elements and returns the selected element’s text from the list using the element’s index.|
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.
Instead of Assert and Verify commands common to Selenese, we introduced Get/Is/Is not commands in Ranorex Webtestit to obtain the data to be checked, such as the element’s value, text, attribute, etc.
With these new commands, the acquired data will be split from the test, which is a recommended practice when working with Page Objects. This means that the Page Object contains the Get/It/Is not commands to get the data, while the test validates it.
|Element as variable||Returns the selected element as a WebElement so that you can add your custom actions and methods to it.|
|Element’s text||Returns a String containing visible element’s inner text using the
|Element’s value||Returns the “elements” value attribute using the
|Element’s attribute||Gives you the possibility to retrieve a specific element attribute like value, type, etc using the
|Element’s selected value||Returns the first selected option from the given (“select” type) element, e.g. the select list. If the WebElement is not of a “select” type, an Exception gets thrown.|
|Element’s selected label||Returns a String containing the label (text) of the first selected option from the given “select” type element, e.g. the select list, using the Selenium
|Element checked||Determines if the given element is checked or not. Returns a Boolean. Only applies for input elements e.g. checkboxes, radio buttons, options in select tags.|
|Element editable||Determines if the given element is editable. Returns a Boolean after checking if the element is enabled within the webpage and has a “readonly” attribute that equals null.|
|Element present||Determines if the given element is present on the Web page. Returns a Boolean after checking if the number of elements with provided selector found is greater than 0.|
|Element visible||Determines if the given element is visible on the Web page. Returns a Boolean after using the
|Element checked||Determines if the given element is not checked. Returns a Boolean. Only applies for input elements e.g. checkboxes, radio buttons, options in select tags.|
|Element editable||Determines if the given element is not editable. Returns a Boolean after checking whether the element is disabled within the webpage and has a “readonly” attribute not equal to null.|
|Element present||Determines if the given element is not present on the Web page. Returns a Boolean after checking if the number of elements with provided selector found is equal to 0.|
|Element visible||Determines if the given element is not visible (is hidden) on the Web page. Returns a Boolean after using the
Structuring your page objects
Page Objects offer you a great possibility to encapsulate the elements and actions specific to your website or app. If an element breaks (e.g. the selector is not returning an element), you can edit the selector in the appropriate Page Object. Your test cases are responsible for orchestrating those actions and evaluating the results.
That’s why a good practice is to keep elements private in their dedicated Page Object. You as the tester are interested in the actions only, which should be publicly accessible.
What about redirects and site changes? Let’s say you’re entering data on a form and sending it off, which causes your client to get redirected to another page. In this case, the appropriate action should return the new Page Object.
The number of Page Objects required for the test depends heavily on your website’s or app’s structure. We recommend to analyze the overall structure and break down your website or app into components. Create a Page Object then for each of the components you identified. Don’t worry though if something isn’t perfect from the beginning. There’s always the possibility of refactoring your Page Objects.
For further information on the Page Object pattern, click here.