Welcome to the new Ranorex Support Portal

Ranorex
Try DesignWise with Ranorex
Help Center › User Guide › Web and mobile testing › Web testing
User Forum

Website structure in Ranorex Studio

Ranorex Studio can recognize the entire HTML architecture of a website and make it available for automated tests. Use Ranorex Spy to browse through a website’s structure and see how it’s represented within Ranorex Studio. Websites are organized into three basic parts in Spy. These are explained below.

In this chapter

    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 showing five DOM nodes, each representing an individual website.

    Browser-specific elements

    Each browser also has browser-specific elements that aren’t contained in a DOM node. These relate mostly to control elements and application windows, e.g.:

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

    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 in 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:

    // 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();
}
     C#
 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: