Ranorex网页插件（适用Microsoft Internet Explorer, Mozilla Firefox, Google Chrome 和 Apple Safari）可以让你，像测试桌面程序一样，自动化测试网页程序界面。

Ranorex框架中的网页结构
AJAX处理
搜索或过滤页面元素
表元素及其CSS样式设置
跨浏览器测试
设置输入，tag属性以及在不用鼠标的情况下进行点击
录制和对象库
执行javascript代码
层级菜单处理
Ranorex框架中的网页结构
Ranorex能够获取web文档的全部HTML结构。Ranorex在自动化测试过程中，使用Ranorex Spy分析网页程序的结构和内容，识别出可访问的信息。

每个打开的网页都表现为spy tree中的一个DOM节点。除了标准的浏览器程序，Ranorex还可以识别内嵌的浏览器对象（比如：已编译的帮助文件）。另外，浏览器窗口中的每个tab项在spy tree中也是一个为单独的DOM节点。

Web文档及其HTML结构是通过RanoreXPatch识别的。与HTML中的XPath类似，RanoreXPath为搜寻web页面中一个或多个web元素提供了一种简单的搜索机制。

WebDocument适配器
WebDocument适配器代表一个包含所有tag的完整的网页，（比如：header，body等tag）。此外，它提供了一些实用的方法，让测试脚本更加有效。

下面的示例说明了这些特性的使用方法：
C#
// Identify a web document by its title
WebDocument webDocument = “/dom[@caption=’Ranorex Test Page’]”;

// Open a website
webDocument.Navigate(“http://www.ranorex.com”);
// Wait until the document is loaded
webDocument.WaitForDocumentLoaded();
// Execute a javascript code
webDocument.ExecuteScript(“history.back();”);

 

VB.NET

‘ Identify a web document by its title
Dim webDocument As WebDocument = “/dom[@caption=’Ranorex Test Page’]”
‘ Open a website
webDocument.Navigate(“http://www.ranorex.com”)
‘ Wait until the document is loaded
webDocument.WaitForDocumentLoaded()
‘ Execute a javascript code
webDocument.ExecuteScript(“history.back();”)
搜索或过滤页面元素

针对每个HTML标记元素，Ranorex框架提供了大范围的适配器（比如：ATag适配 <a> tags）。每个适配器都有特定的方法和属性；比如，链接标签（<a>）有特定属性HREF，TARGET和REL。

C#

// Start IE with a specific website
System.Diagnostics.Process.Start(“iexplore.exe”, “www.ranorex.com/web-testing-examples”);
// Identify the webdocument by its title
WebDocument webDocument = “/dom[@caption=’Ranorex Test Page’]”;
// Find a link by its link text (innertext)
ATag link = webDocument.FindSingle(“.//a[@innertext=’simple link’]”);
link.Click();

VB.NET

‘ Start IE with a specific website
System.Diagnostics.Process.Start(“iexplore.exe”, “www.ranorex.com/web-testing-examples”)
‘ Identify the webdocument by its title
Dim webDocument As WebDocument = “/dom[@caption=’Ranorex Test Page’]”
‘ Find a link by its link text (innertext)
Dim link As ATag = webDocument.FindSingle(“.//a[@innertext=’simple link’]”)
link.Click()

 

跨浏览器测试

在Ranorex安装过程中，安装包会自动为所有支持的浏览器安装插件，以实现Ranorex浏览器插件和特定浏览器的通信。如果你调制特定的浏览器有问题，请参考Ranorex调制向导。

创建用于Firefox的测试和创建用于Internet Explorer或者其他支持的浏览器的测试没有区别。所有的web UI元素，都是RanoreXPath使用HTML属性和值来识别。因此，一个web对象库可用于测试所有支持的网页浏览器。了解更多有关如何使用基于一个对象库的测试用例来测试多个浏览器，可以参考我们的web测试示例项目，该项目程序是Ranorex安装程序包的一部分。

浏览器特定元素的自动化（比如：弹出窗口）

处理浏览器特定的UI控件，需要有一个针对每种浏览器特定元素的单独的RanoreXPath。这就意味着，如果想点击不同浏览器弹出的对话框，你必须为每一个对话框添加一个单独的对象库对象。
Ranerex自动化测试库提供的”BrowserName”属性，会告诉你测试网站时使用的是什么浏览器。
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
录制和对象库

Ranorex Recorder为标准桌面客户端程序和web程序提供了相同的捕获和回放功能。Recorder会自动在其动作列表中为每个录制的用户操作创建动作条目，对应的对象库也包含了动作列表中所有必需的UI网页元素的对象。

对象库和WebDcument
下面的例子演示了如何使用对象库访问WebDocument的方法：
C#

// Load repository
ProjectRepository repo = ProjectRepository.Instance;
// Open a website
repo.WebPage.Self.Navigate(“http://www.ranorex.com”);
// Wait until the document is loaded
repo.WebPage.Self.WaitForDocumentLoaded();

VB.NET

‘ Load repository
Dim repo As ProjectRepository = ProjectRepository.Instance
‘ Open a website
repo.WebPage.Self.Navigate(“http://www.ranorex.com”)
‘ Wait until the document is loaded
repo.WebPage.Self.WaitForDocumentLoaded()

 

处理Ajax

C#

GlobalRepository repo = GlobalRepository.Instance;
WebDocument webDocument = repo.WebPage.Self;
// Fill out the AJAX form
InputTag input1 = webDocument.FindSingle(“.//form[@id=’ajax-form’]/fieldset//input[@name=’value1′]”);
input1.EnsureVisible();
input1.Value = “Size”;
InputTag input2 = webDocument.FindSingle(“.//form[@id=’ajax-form’]/fieldset//input[@name=’value2′]”);
input2.Value = “Weight”;
InputTag checkbox = webDocument.FindSingle(“.//form[@id=’ajax-form’]/fieldset//input[@name=’checkbox2′]”);
checkbox.Checked = “true”;
SelectTag selectColor = webDocument.FindSingle(“.//form[@id=’ajax-form’]/fieldset//select[@name=’color2′]”);
selectColor.TagValue = “blue”;
// Submit data
InputTag submit = webDocument.FindSingle(“.//form[@id=’ajax-form’]//input[@id=’submit-ajax’]”);
submit.Click();

// Wait for the ajax request for max 10 seconds (10000 milliseconds)
PreTag result = webDocument.FindSingle(“.//div[@id=’ajax_response’]/div/pre”, 10000);

VB.NET

Dim repo As GlobalRepository = GlobalRepository.Instance
Dim webDocument As WebDocument = repo.WebPage.Self
‘ Fill out the AJAX form
Dim input1 As InputTag = webDocument.FindSingle(“.//form[@id=’ajax-form’]/fieldset//input[@name=’value1′]”)
input1.EnsureVisible()
input1.Value = “Size”
Dim input2 As InputTag = webDocument.FindSingle(“.//form[@id=’ajax-form’]/fieldset//input[@name=’value2′]”)
input2.Value = “Weight”
Dim checkbox As InputTag = webDocument.FindSingle(“.//form[@id=’ajax-form’]/fieldset//input[@name=’checkbox2′]”)
checkbox.Checked = “true”
Dim selectColor As SelectTag = webDocument.FindSingle(“.//form[@id=’ajax-form’]/fieldset//select[@name=’color2′]”)
selectColor.TagValue = “blue”
‘ Submit data
Dim submit As InputTag = webDocument.FindSingle(“.//form[@id=’ajax-form’]//input[@id=’submit-ajax’]”)
submit.Click()

‘ Wait for the ajax request for max 10 seconds (10000 milliseconds)
Dim result As PreTag = webDocument.FindSingle(“.//div[@id=’ajax_response’]/div/pre”, 10000)

 

表元素及其CSS样式设置

C#

GlobalRepository repo = GlobalRepository.Instance;
WebDocument webDocument = repo.WebPage.Self;

// List all elements of a table
foreach (TrTag row in repo.WebPage.DivTagContent.TableTagSimpletable.Find(“./tbody/tr”))
{
string rowInfo = “”;

TdTag rowNameCell = row.FindSingle(“./td[2]”);
rowInfo += “Row index: ” + rowNameCell.PreviousSibling.InnerText + “, “;
rowInfo += “Row name: ” + rowNameCell.InnerText + “, “;
rowInfo += “Row value: ” + rowNameCell.NextSibling.InnerText + “, “;

// Get all cells from the row
rowInfo += “All Cells: “;
foreach (TdTag cell in row.Find(“./td”))
{
rowInfo += cell.InnerText + “, “;
// Move the mouse to each cell element
cell.MoveTo();
// Set css style
cell.SetStyle(“background-color”,”#33ff00″);
}

Report.Info(rowInfo);
}

VB.NET

Dim repo As GlobalRepository = GlobalRepository.Instance
Dim webDocument As WebDocument = repo.WebPage.Self

‘ List all elements of a table
For Each row As TrTag In repo.WebPage.DivTagContent.TableTagSimpletable.Find(“./tbody/tr”)
Dim rowInfo As String = “”

Dim rowNameCell As TdTag = row.FindSingle(“./td[2]”)
rowInfo += “Row index: ” & rowNameCell.PreviousSibling.InnerText & “, ”
rowInfo += “Row name: ” & rowNameCell.InnerText & “, ”
rowInfo += “Row value: ” & rowNameCell.NextSibling.InnerText & “, ”

‘ Get all cells from the row
rowInfo += “All Cells: ”
For Each cell As TdTag In row.Find(“./td”)
rowInfo += cell.InnerText & “, ”
‘ Move the mouse to each cell element
cell.MoveTo()
‘ Set css style
cell.SetStyle(“background-color”, “#33ff00”)
Next

Report.Info(rowInfo)
Next

 

设置输入，tag属性以及在不用鼠标的情况下进行点击

C#

// Use mouse and keyboard to set Name
repo.WebPage.TestForm.InputTagTestname.Click();
Keyboard.Press(“Test Name”);
// Set email address directly via ‘Value’
repo.WebPage.TestForm.InputTagTestemail.Value = “test@ranorex.com”;
// Open calendar form
repo.WebPage.TestForm.ButtonTagCalendar.Click();
// Select the 22th of the current month
repo.WebPage.TdTag_22nd.Click();

// Select each item of list box
foreach (OptionTag option in repo.WebPage.TestForm.SelectTagTestmultiple.Find(“.//option”))
{
option[“selected”] = “selected”;
}

// Perform a click without moving the mouse to the button
repo.WebPage.TestForm.InputTagSubmit.PerformClick();

 

VB.NET

‘ Use mouse and keyboard to set Name
repo.WebPage.TestForm.InputTagTestname.Click()
Keyboard.Press(“Test Name”)
‘ Set email address directly via ‘Value’
repo.WebPage.TestForm.InputTagTestemail.Value = “test@ranorex.com”
‘ Open calendar form
repo.WebPage.TestForm.ButtonTagCalendar.Click()
‘ Select the 22th of the current month
repo.WebPage.TdTag_22nd.Click()

‘ Select each item of list box
For Each [option] As OptionTag In repo.WebPage.TestForm.SelectTagTestmultiple.Find(“.//option”)
[option](“selected”) = “selected”
Next

‘ Perform a click without moving the mouse to the button
repo.WebPage.TestForm.InputTagSubmit.PerformClick()

 

执行javascript代码

C#

webDocument.ExecuteScript(“history.back();”);

VB.NET

webDocument.ExecuteScript(“history.back();”)

 

层级菜单处理

C#

WebDocument webDocument = “/dom[@caption=’Ranorex Test Page’]”;

DivTag topMenuDiv = webDocument.FindSingle(“.//div[@id=’top-menu’]”);
// Bring the main menu to the front
topMenuDiv.EnsureVisible();
// Automating a dropdown menu
foreach (LiTag item in topMenuDiv.Find(“.//li[@visible=’true’]”))
{
Mouse.MoveTo(item);
// Move the mouse to each submenu item
foreach (LiTag subitem in item.Find(“.//li[@visible=’true’]”))
Mouse.MoveTo(subitem);
}

VB.NET

Dim webDocument As WebDocument = “/dom[@caption=’Ranorex Test Page’]”

Dim topMenuDiv As DivTag = webDocument.FindSingle(“.//div[@id=’top-menu’]”)
‘ Bring the main menu to the front
topMenuDiv.EnsureVisible()
‘ Automating a dropdown menu
For Each item As LiTag In topMenuDiv.Find(“.//li[@visible=’true’]”)
Mouse.MoveTo(item)
‘ Move the mouse to each submenu item
For Each subitem As LiTag In item.Find(“.//li[@visible=’true’]”)
Mouse.MoveTo(subitem)
Next
Next