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.

This is the top-level node. Each website opened in a browser has its own DOM node in Spy.

1. 1. Browser in Spy shows five DOM nodes, each representing an individual website.

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.

1. 1. Tab control elements in a browser (note the website in the tab is still a DOM node).

   2. Window controls in a browser.

   3. 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();

} 

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