Ranorex Studio can recognize a website’s HTML structure and expose it in Ranorex Spy. This helps you understand what you’re automating, how elements are organized, and why some UI parts behave differently across browsers.
How websites are represented in Spy
Domain object model (DOM)
This is the top-level node. Each website opened in a browser has its own DOM node in Spy.
- Browser in Spy shows five DOM nodes, each representing an individual website.
Browser-specific elements
Each browser also has browser-specific elements that are not contained in a DOM node. These relate mostly to control elements and application windows, for example:
- Window controls (minimize, maximize, close)
- Pop-ups
- Dialog windows
These elements are organized in browser-specific FORM nodes.
- Tab control elements in a browser (note the website in the tab is still a DOM node).
- Window controls in a browser.
- Dialog window in a browser.
These elements are organized in browser-specific FORM nodes.
Note: Browser-specific elements can cause issues in cross-browser tests because, naturally, different browsers have different elements. They should either be avoided or individualized in these cases.
You can handle browser-specific elements in the RanoreXPath or code.
A RanoreXPath handling a button for two different browsers by way of their process names would look as follows:
/form[@processname='firefox' or [@processname='chrome']//button[@text='OK']
If you want to include more process names, the following is a more economical way of doing so:
/form[@processname~'[iexplore|IEXPLORE|chrome|firefox]'//button[@text='OK']
The Ranorex Automation Library included in Ranorex Studio also makes it possible to differentiate between browser-specific elements by way of various variables and methods in code. For example, the variable BrowserName allows distinguishing between different browsers. The following code example demonstrates this:
C#
// Click the OK button in popping up dialog of one of the supported browser
// If the current browser is Internet Explorer
if(webDocument.BrowserName == "IE")
{
Button okIE = "/form[@processname~'(iexplore|IEXPLORE)']//button[@text='OK']";
okIE.Click();
}
// If the current browser is Mozilla Firefox
else if(webDocument.BrowserName == "Mozilla")
{
Button okFF = "/form[@processname='firefox']//button[@text='OK']";
okFF.Click();
}
// If the current browser is Google Chrome
else if(webDocument.BrowserName == "Chrome")
{
Button okChrome = "/form[@processname='chrome']//button[@text='OK']";
okChrome.Click();
}
// If the current browser is Apple Safari
else if(webDocument.BrowserName == "Safari")
{
Button okSafari = "/form[@processname='Safari']//button[@text='OK']";
okSafari.Click();
} VB.NET
' Click the OK button in popping up dialog of one of the supported browser
' If the current browser is Internet Explorer
If webDocument.BrowserName = "IE" Then
Dim okIE As Button = "/form[@processname~'(iexplore|IEXPLORE)']//button[@text='OK']"
okIE.Click()
' If the current browser is Mozilla Firefox
ElseIf webDocument.BrowserName = "Mozilla" Then
Dim okFF As Button = "/form[@processname='firefox']//button[@text='OK']"
okFF.Click()
End If
' If the current browser is Google Chrome
ElseIf webDocument.BrowserName = "Chrome" Then
Dim okChrome As Button = "/form[@processname='chrome']//button[@text='OK']"
okChrome.Click()
End If
' If the current browser is Apple Safari
ElseIf webDocument.BrowserName = "Safari" Then
Dim okSafari As Button = "/form[@processname='Safari']//button[@text='OK']"
okSafari.Click()
End If The WebDocument class and its variables and methods are described in the Ranorex API documentation under Ranorex > WebDocument.
Website elements
Website elements are targeted using RanoreXPath, just like elements in a desktop application. The element browser in Spy displays this as follows:
In the repository, identified website elements are referenced as repository items and displayed as follows: