Samples

The following web testing examples show how to access typical web elements of a web page.

The Ranorex web site provides a small page especially for web testing purposes:

www.ranorex.com/web-testing-examples/

All examples are available in the WebTesting Visual Studio project located within your installation folder (..\Samples\WebTesting)

Open a web page and set an input field

The first example describes how to open the Ranorex example web page and how to set a value in a specific text field.

C#

// Opening web site for automation
WebDocument exampleDoc =WebDocument.OpenDocument
                 ("www.ranorex.com/web-testing-examples/", true);
// Setting value of text box 'testname'
WebElement textField;
// Normal search of web element
WebElement form = exampleDoc.FindForm(testform);
textField = form.FindInput(testname);

// ... or element search by RanoreXPath
textField = exampleDoc.FindSingle
       (".//form[@id='testform']//input[@id='testname']");            
// set value of found textField 
Mouse.ClickWebElement(textField);
textField.Value = "Ranorex Text";

VB.NET

' Opening web site for automation
Dim exampleDoc As WebDocument = WebDocument.OpenDocument("www.ranorex.com/web-testing-examples/", True)

' Setting value of text box 'testname'
Dim textField As WebElement
' Normal search of web element
Dim form As WebElement = exampleDoc.FindForm("testform")
textField = form.FindInput("testname")

' ... or element search by RanoreXPath
textField = exampleDoc.FindSingle(".//form[@id='testform']//input[@id='testname']")
' set value of found textField
Mouse.ClickWebElement(textField)
textField.Value = "Ranorex Text"

Select a checkbox

This example describes how to select a check box element.

C#

// Click checkbox 'testcheckbox'
WebElement checkBox;
// Normal search of web element
WebElement form = exampleDoc.FindForm("testform");
checkBox = form.FindInput("testcheckbox");

// ... or element search by RanoreXPath
checkBox = examplDoc.FindSingle
           (".//form[@id='testform']//input[@id='testcheckbox']");
// Click checkBox 
Mouse.ClickWebElement(checkBox);

VB.NET

' Click checkbox 'testcheckbox'
Dim checkBox As WebElement
' Normal search of web element
form = exampleDoc.FindForm("testform")
checkBox = form.FindInput("testcheckbox")

' ... or element search by RanoreXPath  
checkBox = exampleDoc.FindSingle(".//form[@id='testform']//input[@id='testcheckbox']")
' Click checkBox   
Mouse.ClickWebElement(checkBox)

Select an item in a drop down box

The following sample code shows how one can select elements from a drop down element.

C#

WebElement select;
// Normal search of web element ...
WebElement form = exampleDoc.FindForm("testform");
select = form.FindSelect("testcolor");

// ... or element search by RanoreXPath
select = exampleDoc.FindSingle
             (".//form[@id='testform']//select[@id='testcolor']");
Mouse.ClickWebElement(select);

// select items
select.Value = "blue";
Application.Sleep(300);
select.Value = "yellow";
Application.Sleep(300);
select.Value = "green";

VB.NET

Dim sel As WebElement
' Normal search of web element ...
form = exampleDoc.FindForm("testform")
sel = form.FindSelect("testcolor")

' ... or element search by RanoreXPath
sel = exampleDoc.FindSingle(".//form[@id='testform']//select[@id='testcolor']")
Mouse.ClickWebElement(sel)

' select items
sel.Value = "blue"
Application.Sleep(300)
sel.Value = "yellow"
Application.Sleep(300)
sel.Value = "green"

Select an item in a list box

The following code selects and deselects multiple items from a list box.

C#

// Select multiple color items from the list box
WebElement listBox;
            
// Select listbox items using normal search ...
WebElement form = exampleDoc.FindForm("testform");
listBox = form.FindSelect("testmultiple");            
foreach (WebElement items in listBox.Children)            
{
   // select
   items.SetAttribute("selected", "selected");
   Application.Sleep(500);
   // deselect
   items.SetAttribute("selected", "");
}          

// .. or select each listbox item using RanoreXPath
WebElementCollection listItems = 
          exampleDoc.Find("//select[@id='testmultiple']/option")
foreach (WebElement items in listItems)
{                
   items["selected"] = "selected";
}

VB.NET

 ' Select multiple color items from the list box  
 Dim listBox As WebElement

' Select listbox items using normal search ...  
form = exampleDoc.FindForm("testform")
listBox = form.FindSelect("testmultiple")
For Each items As WebElement In listBox.Children
    ' select
    items.SetAttribute("selected", "selected")
    Application.Sleep(500)
    ' deselect
    items.SetAttribute("selected", "")
Next

' .. or select each listbox item using RanoreXPath 
Dim listItems As WebElementCollection = exampleDoc.Find("//select[@id='testmultiple']/option")
For Each items As WebElement In listItems
    items("selected") = "selected"
Next

Select a date in a calendar box

The next web automation code opens the calendar box and selects the calendar day number "4".

C#

// Open calender box and select day number 4
WebElement calendarButton;
WebElement dayFourth;
// Normal search of web element
WebElement form = exampleDoc.FindForm("testform");
calendarButton = form.FindChild(Tags.Button, Attributes.Class, "calendar");
// Open calendar
Mouse.ClickWebElement(calendarButton);
Application.Sleep(200);
// Finding calendar box using RanoreXPath 
// with regular expressions
WebElement calendar = exampleDoc.FindSingle
                                     ("/body/div[@class~'calendar']");
// Normal search of day "4" ...
dayFourth = calendar.FindChild(Tags.Td, Attributes.InnerText, "4");
// ... or RanoreXPath search
dayFourth = calendar.FindSingle(".//td[text()='4']");
Mouse.ClickWebElement(dayFourth);

VB.NET

' Open calender box and select day number 4 
Dim calendarButton As WebElement
Dim dayFourth As WebElement
' Normal search of web element
form = exampleDoc.FindForm("testform")
calendarButton = form.FindChild(Tags.Button, Attributes.Class, "calendar")
' Open Calendar
Mouse.ClickWebElement(calendarButton)
Application.Sleep(200)

' Finding calendar box using RanoreXPath   
' with regular expressions
Dim calendar As WebElement = exampleDoc.FindSingle("/body/div[@class~'calendar']")
' Normal search of day "4" ... 
dayFourth = calendar.FindChild(Tags.Td, Attributes.InnerText, "4")

' ... or RanoreXPath search
dayFourth = calendar.FindSingle(".//td[text()='4']")
Mouse.ClickWebElement(dayFourth)

Wait for document loaded

The next code shows how to click a button and how to synchronize your Ranorex.WebDocument with the current page content.

C#

// Clicks the "submit" button and reads text content
// text content from the next page
WebElement button;
WebElement form = exampleDoc.FindForm("testform");
button = form.FindInput("submit");
// Click "submit" button (without mouse move)
button.Click();
// reloads new browser content
exampleDoc.WaitForDocumentLoaded(2000);
// reads inner text from page
WebElement content = exampleDoc.FindChild(Tags.Pre);
Console.WriteLine(content.InnerText);

VB.NET

' Clicks the "submit" button and reads text content  
' text content from the next page
Dim button As WebElement
form = exampleDoc.FindForm("testform")
button = form.FindInput("submit")
' Click "submit" button (without mouse move)
button.Click()
' reloads new browser content
exampleDoc.WaitForDocumentLoaded(2000)
' reads inner text from page
Dim content As WebElement = exampleDoc.FindChild(Tags.Pre)
Console.WriteLine(content.InnerText)

Handling of pull-down menu items

This example moves the mouse to each menu item. After that, the code selects a subitem from the first menu item.

C#

// Searching for menu with RanoreXPath
WebElement menu = exampleDoc.FindSingle
                                ("//div[@id='top-menu']/ul[@id='nav']");
foreach (WebElement item in menu.Find("./li/a"))
{
   Mouse.MoveToWebElement(item);
   Console.WriteLine("Menu item Name: \"{0}\"",item.InnerText);
   // list subitems if there are some one
   if ( item.NextSibling != null )
   {
       foreach ( WebElement subItems in item.NextSibling.Find("./li/a") )
       {
           Console.WriteLine("   Sub items Name: \"{0}\"", 
                                                     subItems.InnerText);                                        
       }
   }
}
 
WebElement menu1;
WebElement subItem;
// Search for "Menu 1" using normal way ...
menu1 = menu.FindChild(Tags.A, Attributes.InnerText, "Menu 1");
// ... or search for it using RanoreXPath
menu1 = menu.FindSingle("./li/a[text()='Menu 1']");

// Search "Submenu 1" using normal way ...
subItem = menu1.NextSibling.FindChild
                             (Tags.A, Attributes.InnerText, "Subitem 1");
// ... or search for it using RanoreXPath
subItem = menu1.FindSingle("../ul/li/a[text()='Subitem 1']");

Mouse.MoveToWebElement(menu1);
Mouse.ClickWebElement(subItem, MouseButtonType.LeftButton, 
                            new System.Drawing.Point(1,1),1,100);

VB.NET

 ' Searching for menu with RanoreXPath
Dim menu As WebElement = exampleDoc.FindSingle("//div[@id='top-menu']/ul[@id='nav']")
For Each item As WebElement In menu.Find("./li/a")
    Mouse.MoveToWebElement(item)
    Console.WriteLine("Menu item Name: {0} ", item.InnerText)
    ' list subitems if there are some one
    If Not item.NextSibling Is Nothing Then
        For Each subItems As WebElement In item.NextSibling.Find("./li/a")
            Console.WriteLine("   Sub items Name: {0}", subItems.InnerText)
        Next
    End If
Next

Dim menu1 As WebElement
Dim subItem As WebElement
' Search for "Menu 1" using normal way ...
menu1 = menu.FindChild(Tags.A, Attributes.InnerText, "Menu 1")
'  ... or search for it using RanoreXPath
menu1 = menu.FindSingle("./li/a[text()='Menu 1']")

'  Search "Submenu 1" using normal way ...
subItem = menu1.NextSibling.FindChild(Tags.A, Attributes.InnerText, "Subitem 1")
'  ... or search for it using RanoreXPath
subItem = menu1.FindSingle("../ul/li/a[text()='Subitem 1']")

Mouse.MoveToWebElement(menu1)

Dim point As System.Drawing.Point
point.X = 1
point.Y = 1

Mouse.ClickWebElement(subItem, MouseButtonType.LeftButton, point, 1, 100)

Handling of context menus

The following code finds an image and downloads it using the context menu.

C#

// Find an image within the web site
WebElement image;            
image = exampleDoc.FindImage("automate and relax");
Console.WriteLine("Image text: " + image.GetAttribute(Attributes.Alt));

// Download the image to "C:\testDownload.png"
Mouse.ClickWebElement(image, MouseButtonType.RightButton, ClickAlignment.Center);
Application.Sleep(200);
Application.PopupMenuSelectItem("Save Picture As...");
// Search for "Save Picture" dialog
Form saveAsDialog = Application.FindFormTitle
                       ("Save Picture", SearchMatchMode.MatchFromStart);
Control editBox = saveAsDialog.FindClassName("Edit");
editBox.Text = "C:\\testDownload";
// Search for "Save" button
Button saveButton = (Button)saveAsDialog.FindChildText("&Save");
saveButton.Click();
// Replace file if already exists            
Form msgBox = Application.FindFormTitle("Save Picture");
if (msgBox != null)
{
     Button yesButton = (Button)msgBox.FindChildText("&Yes");
     Mouse.ClickControl(yesButton);
}

VB.NET

' Find an image within the web site  
Dim image As WebElement
image = exampleDoc.FindImage("automate and relax")
Console.WriteLine("Image text: " + image.GetAttribute(Attributes.Alt))

' Download the image to "C:\testDownload.png"
Mouse.ClickWebElement(image, MouseButtonType.RightButton, Alignment.Center)
Application.Sleep(200)
Application.PopupMenuSelectItem("Save Picture As...")
' Search for "Save Picture" dialog
Dim saveAsDialog As Form = Application.FindFormTitle("Save Picture", SearchMatchMode.MatchFromStart)
Dim editBox As Control = saveAsDialog.FindClassName("Edit")
editBox.Text = "C:\testDownload"
' Search for "Save" button
Dim saveButton As Button = saveAsDialog.FindChildText("&Save")
saveButton.Click()
' Replace file if already exists
Dim msgBox As Form = Application.FindFormTitle("Save Picture")
If (Not msgBox Is Nothing) Then
    Dim yesButton As Button = msgBox.FindChildText("&Yes")
    Mouse.ClickControl(yesButton)
End If

Pop-up messages

The next sample code closes a pop-up message box after clicking on a web link.

C#

// Handle popup message boxes
WebElement openDialogLink;
// Click link
openDialogLink = exampleDoc.FindLink("Open dialog");
Mouse.ClickWebElement(openDialogLink);
// find message box
Control messageBox = Application.FindFormTitle("Windows Internet Explorer");
Button button = messageBox.FindButton(2);
button.Click();

VB.NET

' Handle popup message boxes  
Dim openDialogLink As WebElement
' Click link
openDialogLink = exampleDoc.FindLink("Open dialog")
Mouse.ClickWebElement(openDialogLink)
' find message box
Dim messageBox As Control = Application.FindFormTitle("Windows Internet Explorer")
Dim button1 As Button = messageBox.FindButton(2)
button1.Click()

AJAX content

The next example describes how to access AJAX content in a web page.

C#

// Find Ajax Form
WebElement ajaxForm = exampleDoc.FindForm("ajax-form");
// Setting values within form
WebElement textBox1 = ajaxForm.FindInput("value1");
WebElement textBox2 = ajaxForm.FindInput("value2");
Mouse.ClickWebElement(textBox1);
textBox1.Value = "Ranorex";                   
Mouse.ClickWebElement(textBox2);
textBox2.Value = "WebTesting";
// Choose "yellow" from drop down box
WebElement selectItem = ajaxForm.FindSingle
                                       (".//select[@id='color2']");
selectItem.Value = "yellow";

// Search for "submit" button
WebElement submitButton = ajaxForm.FindInput("submit-ajax");
submitButton.Click();

// Wait for loading ajax content...
exampleDoc.WaitForDocumentLoaded();

WebElement ajaxOutput = exampleDoc.FindDiv("ajax_out");
Console.WriteLine(ajaxOutput.InnerHtml.ToString());

VB.NET

' Find Ajax Form
Dim ajaxForm As WebElement = exampleDoc.FindForm("ajax-form")
' Setting values within form
Dim textBox1 As WebElement = ajaxForm.FindInput("value1")
Dim textBox2 As WebElement = ajaxForm.FindInput("value2")
Mouse.ClickWebElement(textBox1)
textBox1.Value = "Ranorex"
Mouse.ClickWebElement(textBox2)
textBox2.Value = "WebTesting"
' Choose "yellow" from drop down box
Dim selectItem As WebElement = ajaxForm.FindSingle(".//select[@id='color2']")

selectItem.Value = "yellow"

' Search for "submit" button
Dim submitButton As WebElement = ajaxForm.FindInput("submit-ajax")
submitButton.Click()

' Wait for loading ajax content...
exampleDoc.WaitForDocumentLoaded()

Dim ajaxOutput As WebElement = exampleDoc.FindDiv("ajax_out")
Console.WriteLine(ajaxOutput.InnerHtml.ToString())