The RanoreXPath is a powerful identifier of UI elements for desktop, web and mobile applications and is derived from the XPath query language. In this blog we will show you a few tips & tricks on how to best use the various RanoreXPath operators to uniquely identify UI elements. You can then use these RanoreXPaths in your recording and code modules to make your automated tests more robust.

Overview

Using RanoreXPath operators

Element Browser

The Ranorex Spy displays the UI as hierarchical representation of elements in the Element Browser view. The RanoreXPath can be used to search and identify items in this UI hierarchy.

In this example, we’ll use the tool KeePass as application under test (AUT). This open source password manager application is one of our sample applications delivered with Ranorex Studio. If you have multiple applications open, Ranorex Spy will list them all. Filtering the application you want to test will increase speed and give you a better overview. To do so, track the application node of KeePass and set it as root node (context menu > ‘Set Element as Root’). Now, only the main KeePass form and its underlying elements are visible.

Ranorex Spy

General Layout of RanoreXPath

RanoreXPath expressions are similar to XPath expressions. They share both syntax and logical behavior. A RanoreXPath always consists of adapters, attributes and values:

Layout of RanoreXPath

The adapter specifies the type or application of the UI element. The attribute and values specify adapter properties.

The absolute RanoreXPath of our KeePass form looks like this:

RanoreXPath of AUT

The form is an adapter specifying the type or classification of the UI element. It is followed by the attribute value comparison, which identifies the requested element. In this example, the comparison operator is a simple equality.

If you want to know more about how the RanoreXPath works, we recommend our dedicated user guide section.

Search for multiple button elements

You can list all buttons elements that are direct children of a designated positon in your AUT. Have a look at these two examples:

1. List all buttons that are direct children of the KeePass toolbar:

To do so, simply set the toolbar as root node and type ./button into the RanoreXPath edit field, directly after the given RanoreXPath.

Relative path to all child buttons

This will create a relative path to all child nodes of the actual node, which are buttons.

Element Tree with Child Buttons

2. List all buttons of your AUT:

Navigate back to the form adapter, set it as root node and type in .//button.

Relative path to all buttons

You’ve now created a relative path to all descendants of the actual node, which are buttons. These are all buttons of all levels of the subtree of the current element.

Element Tree with all Buttons

Identify controls with a specific attribute

You can also create a path to controls, to filter them according to specific attributes. In this example, we want to find all checked checkboxes.

Open the “Find” dialog in KeePass (<CTRL><F>), as this dialog contains checkboxes, and set it as root node. Now, you can validate which item of the checkbox control has the attribute “checked” set to true. To do so, enter “//checkbox[@checked=’True’]”:

RanoreXPah for Checked Checkboxes

As you can see, only the checked checkboxes will be visible in the Element Browser.

Element Tree with all checked checkboxes

Identify checkboxes by combining attributes

You can further extend the previous example by combining attributes. This enables you to, for example, omit certain items from the search, or search for specific items.

1. Omit a specific item from the search

You can omit a specific item from the search using the “not equal” operator and the “and” conjunction. In this case, we want to omit the item “&Title”:

RanoreXPah for Checked Checkboxes excluding Title

Element Tree with all checked checkboxes excluding Title

2. Search for specific items

You can use the “or” instead of the “and” conjunction to extend your search and only look for specific items. Extend the checkbox search to look for the items “&Title” and “&URL”:

RanoreXPah for Checkboxes

Element Tree with checkboxes

Recognize related elements using the parent operator

After running the Ranorex desktop sample project, there will be two entries in our AUT – one for a WordPress and one for a Gmail account. In this case, we’d like to find the username of the “Gmail” KeePass entry:

RanoreXPah for username of gmail entry

Element Tree username of gmail entry

Username of gmail entry

Start with the RanoreXPath to the cell containing the text “Gmail” (framed in red). Next, use the relationship operator “parent” to reference the parent node of the current element. In this example, it’s a row (framed in blue). The index “[2]” navigates to the second cell, which contains the Gmail username (framed in green).

Recognize related elements by using preceding- and following-sibling

Another way to search for related elements is to use the relationship operator “preceding-sibling”. In this example, we want to find the title of a KeePass entry based on its username.

Relationship operators

The command “preceding-sibling::cell” lists all preceding cells. In this case, the result is the title (framed in green) which corresponds to the given username (framed in red).

RanoreXPath Preceding Sibling

Element Browser Preceding Sibling

In contrast, the command “following-sibling::cell” delivers all following cells. In our case, these are all following cells (framed in blue) that correspond to the given username (framed in red).

RanoreXPath Following Sibling

Element Browser Following Sibling

Identify attributes fields using regular expressions

You can also use regular expressions in attribute conditions to identify attribute fields. In this example, we’d like to filter cell adapters that contain an email address in their text attribute. Regular expressions matching an email address may look like this: “[email protected]+\..+’”.

RanoreXPath Regular Expression

Element Browser Regular Expression

The “~” operator instructs Ranorex to filter attribute fields using a regular expression. The “.” in our regular expression matches every single character, while the “+” specifies that the preceding element has to occur one or more times. To escape special characters (such as “.”), enter a backlash before the character.

In our example, every expression will match that contains the character “@” with one or more characters before and after it, followed by a “.”, which is followed by one or more characters.

For more examples on how to use regular expressions in RanoreXPaths, please have a look at this user guide section: RanoreXPath with regular expression.

Identify attributes with dynamic values

Dynamic attribute values change each time an element is displayed anew. Fortunately, dynamically generated content usually has a prefix or postfix. To identify dynamic elements, you can either use regular expressions, as described above, or use the ‘starts with’ or the ‘ends with’ comparison operators:

  • ‘>’: The value of the attribute must start with the given string
  • ‘<‘: The value of the attribute must end with the given string

Conclusion

The RanoreXPath enables you to find and uniquely identify every single UI element of desktop, web and mobile applications. You can use the RanoreXPath operators to make your test suite more robust and identify even dynamic attribute values.

RanoreXPath Overview  RanoreXPath Editor
 

Related Posts