Managing page objects | Ranorex Webtestit User Guide
WebtestitUser GuideManaging page objects

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
    tipp icon


    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 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.
    Note icon


    While we recommend keeping the default project structure, you can create a Page Object in any folder you like, as long as you keep the special headers.
    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.
    tipp icon


    It is a good practice to create Page Object classes which have Po as a suffix, e.g. DetailPagePo.
    Each Page Object is generated with default functions open and 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.
    # Name Description
    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.

    Default actions

    Default 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 :hover state. 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 actions

    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.
    Note icon


    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.
    tipp icon


    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.

    Structuring your page objects

    It’s strongly advisable to keep in mind ⇢ test maintenance when designing your tests and Page Objects. We recommend you to implement the Page Object pattern to keep everything in order. 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.