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

    Hint

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

    Note

    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

    Hint

    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, 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

    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:  

    Do

    Name Description
    Click on element A standard Selenium click() element method that performs a click on the given element.
    Double click on element Invokes the mouse doubleclick() method from the Selenium Actions() class on the given element.
    Type into element Invokes the sendKeys(text) method, allowing you to send the input string to simulate typing into an element.
    Clear and type into element First invokes the clear() method, that clears out the input field, followed by sendKeys(text) method that sends the input string to the and simulates typing into an element.
    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.

    Perform mouse

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

    Note

    An example of enumerator-based elements is a list of products in a Demo Webshop you can download for Java or TypeScript. 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
    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.
    tipp icon

    Hint

    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.

    Get

    Name Description
    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 .getText() method.
    Element’s value Returns the “elements” value attribute using the getAttribute("value") method.
    Element’s attribute Gives you the possibility to retrieve a specific element attribute like value, type, etc using the getAttribute() method.
    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 Select() class. If the WebElement is not of a “select” type, an Exception gets thrown.

    Is

    Name Description
    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 isDisplayed() method on the element.

    Is not

    Name Description
    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 isDisplayed() method on the element.

    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.