Website structure in Ranorex Studio | Ranorex
Help CenterUser GuideWeb and mobile testing

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: