As you might know, the RanoreXPath expression is a powerful identifier of UI elements for desktop and web applications. In this example we would like to show you some RanoreXPath tips and tricks for your everyday life. As application under test we choose the “Ranorex Flex Example Page” which can be found under FlexExamplePage.
- Element Browser
- General Layout of RanoreXPath
- Search for multiple button elements
- Identify a checkbox by its “checked” state
- Identify checkboxes by combining attributes
- Recognize related elements by using parent-operator
- Recognize elements by using preceding- and following-sibling
- Identify e-mail address fields using regular expressions
- Use RanoreXPath in user code items
Element Browser
Let’s have a look at the Element Browser to get a summary of RanoreXPath’s functionality before we get to the test automation code. Just start with browsing through the Element Browser identifying our AUT (application under test) and making the FlexObject located on the webpage our new root node (via context menu -> Set Element as Root):
Only the FlexObject and its underlying elements are now visible and all other elements are filtered out.
General Layout of RanoreXPath
So let’s take a closer look at the RanoreXPaths in our AUT. The absolute RanoreXPath of our FlexObject should look something like this:
where dom, body and flexobject are adapters which specify the type or classification of the UI element followed by their attribute value comparison to identify the requested element. Basically a path consists of the following elements:
whereas the comparison operator can be more complex than a simple equality.
Search for multiple button elements
Assuming we want to show all of the buttons which are direct children of our earlier defined root node, just type
into the RanoreXPath edit field. What we have done is creating a relative path to all child nodes of our actual node which are buttons.
But what if we want to show all buttons contained in our flex object?
The solution is as follows:
What we now have done is creating a relative path to all descendant nodes of our actual nodes which are buttons, thus all buttons in all levels of the sub tree of the current element.
Identify a checkbox by its “checked” state
Another thing we can do is creating a path to a “checkbox “. To accomplish that we have to enable the checked attribute of a checkbox item in our AUT, so check “milk” (and uncheck the “send me coupons item”) in the Checkbox Control Example area. Now we have to validate which item of the checkbox control has its attribute “checked” set to true:
The only element now visible in our Element Browser should be the “milk” checkbox element:
Identify checkboxes by combining attributes
You can extend this example to e.g. not search for “eggs” but to find all other checked checkboxes in the container using the equality operator:
or only search for “milk” and “eggs” using the “or” instead of the “and” operator:
Recognize related elements by using parent-operator
Now let’s see if we can get the telephone number of Maurice Smith:
So the characters “..” reference the parent of the current result element. In our example that is the parent of the cell holding the text “Maurice Smith” (framed red), which is the 3rd row (framed blue). As we know that the second column of our table stores the telephone numbers, we can retrieve the desired cell by using its index “[2]” (framed green).
Recognize related elements by using preceding- and following-sibling
What if we have a telephone number and want to get the corresponding name and e-mail address? Therefore, we need to get the preceding cell:
The “preceding-sibling::cell” command delivers all preceding cells. In our case the result is the name (framed blue) corresponding to the given telephone number (framed red).
In contrast the “following-sibling::cell” command delivers all following cells. In our case that is the e-mail address (framed green) corresponding to the given telephone number (framed red).
Identify e-mail address fields using regular expressions
Additional to simple equality comparison, you can use regular expressions in attribute conditions. Assume we want to search for all cell adapters containing an email address in their text attribute. There are several ways how a regular expression which matches an email address could look like, for example “.+q.+\..+”. Now we can use this regular expression in our RanoreXPath:
The “~” operator instructs Ranorex to perform comparison using regular expressions. The “.” in our expression matches to every single character and the “+” defines that the character on its left should match one or more times. To escape special characters (like “.”), you need to precede the character with a backslash “\”. In our example every expression will match that contains the character “@” with one or more characters before and after it, followed by a “.” which in turn is followed by one or more characters. Have a look at RanoreXPath with regular expression for more examples of using regular expressions in RanoreXPath.
Use RanoreXPath in user code items
Now as we all know how powerful RanoreXPath is, let’s start applying our knowledge to a Ranorex project. First of all add our newly defined root – the flex object – to the repository of the project via drag and drop and rename it to “flex_object”. After that add a new user code item – let’s call it “moveToButtons” – to the recording and switch to code. Add following code to the just created method:
foreach(Ranorex.Button my_button in repo.flex_object.Find("./button"))
{
my_button.MoveTo();
Delay.Milliseconds(300);
}
Then build and run your project. As expected, the mouse cursor moves to all buttons which are direct child nodes of our root. In order to move to all visible buttons in the flex object, not only to direct child nodes, alter your code as follows:
foreach(Ranorex.Button my_button in repo.flex_object.Find(".//button[@visible=’True’]"))
{
my_button.MoveTo();
Delay.Milliseconds(300);
}
In our user code example we’ve only used relative paths till now, but of course it’s possible to use absolute paths, too. So let’s try to find out the e-mail address of Maurice Smith via an absolute path. The following code searches for Maurice’ email address (using the regular expression from our previous example) and writes the email address to the Ranorex Test Report:
Ranorex.Cell cell = "/dom[@page='FlexExample.html']/body/flexobject/container[@caption='DataGrid Control']/table/row/cell[@text='Maurice Smith']/../cell[@text~'.+@.+\..+']";
Report.Info("Info: ", cell.Text.ToString());
After building and executing the test, you should see the expected email address in your Ranorex Test Report.
So as you can see the RanoreXPath is very powerful at searching UI elements in your AUT without the use of programming skills. You can find every single UI element just by having knowledge about RanoreXPath modification and regular expressions. If you use the Ranorex Repository and the Ranorex Recorder you don’t even have to modify any code . For an overview of all relevant modifications of RanoreXPath visit the RanoreXPath User Guide.
Tags: Code Samples, RanoreXPath, Regular Expression, Spy
Subscribe