Test Automation - VBA Web Automation with IE - Part 2

Introduction

In the previous entry of this series we looked at ways of creating the Internet Explorer object and how to interact with the elements contained within that particular object using the DOM. In this entry we will look at the various types of HTML element and some examples of how we can access and manipulate these particular elements.

HTML Elements

How do we interact with the different elements that are described within the DOM? The following examples take the most common elements and demonstrate some of the methods that we can use to access and manipulate them.

Links and Buttons

The following link can be accessed through a wide array of differing methods.

<a href=http://www.brownswood.co.uk name="brownslink" id="brlk" >brownswood</a >

document.Links("brlk").click
document.Links("brownslink").click
document.getElementById("brlk").click
document.getElementsByName("brownslink")(0).click
document.all("brownslink").click
document.all("brlk").click

A button can be accessed using some of the methods above. The properties of the button element below are almost identical to those of the link above.

<INPUT type="button" id=brownsBtn name=brownswood value="Click">

document.getElementById("brownsBtn").click
document.getElementsByName("brownswood")(0).click

Text Boxes

A textbox can have both its value read and set.

<INPUT userProp = "Company" type="text" id="Company Name" name="Company Name" value="Test this text box">

There are various ways to change the value of text box.

document.getElementById(“Company Name”).value=“insideSQA”
document.getElementsByName(“name”)(0).value=“insideSQA”

If the properties name and id are not available then the code below can be used to change its value.

Set Elems= document.getElementsByTagName(“INPUT”)

For each elem in Elems
if elem.userProp=“company” then
elem.value=“insideSQA”
Exit For
end if
Next

List Box

A list box usually contains a number of options that a user can select.

<SELECT size="1" name=“demo_ComboBox">
<option value=“Value 1">Value 1</option>
<option value=“Value 2" >Value 2</option>
<option value=“Value 3" >Value 4</option>
</SELECT>

Set oList=document.getElementsByName(“company type”).item(0)

optionsCount=oList.Options.length
optionOneValue=oList.Options(0).value
optionTxt=oList.Options(0).text

To select one of the options the code below can be used

oList.Options(0).Selected = true
oList.value="value 2"

Checkbox

A checkbox is either checked or unchecked.

<input type="checkbox" name="Company Checkbox">

Set oChkBox=document.getElementsByName("Company Checkbox").item(0)
oChkBox.Checked=True

Radio Button

The radio button element is an array of options where only one option can be selected.

Radio button elements are grouped using the same name.

<input type="radio" name="Company Type" value="Public" checked="checked" />
<input type="radio" name="Company Type" value="Private" />

A radio button is selected by assigning the required value to the object .

Set oRadio=document.getElementsByName(“Company Type”).item(0)
oRadio.checked=True 'This will select Public
oRadio.value="Private" 'This will select Private even if the Publci object node is being pointed to.

Tables

Tables are amongst the most difficult but useful of elements to access. When tables become nested it becomes necessary to work with the child objects of these tables, and sometimes its difficult to identify how many table structures a document contains. A great tool for element identification is the DOM inspector from Mozilla http://www.mozilla.org/projects/inspector/. With this tool it is possible to view all elements in a document, rather like an object spy that you find with a tool like HP's Quick Test Professional.

The table object provides two collections

cells – Access the cells of the table
rows – Access the rows of the table. The rows also allow access to a cells collection to access particular cells present in the row.


Row1 cell1 Row1 cell1
Row2 cell1 Row2 cell1


Access first row and the first column.

Set oTable=document.getElementById(“companyTable”)
oTable.rows(0).cells(0).outerText
oTable.cells(0).outerText

Access second row and the first column.

oTable.rows(1).cells(0).outerText
oTable.cells(2).outerText

Counting Cells and rows

oTable.rows.length
oTable.cells.length
oTable.rows(0).cells.length

Coming up..
Now that the basic concepts are covered we can now look at putting together the various parts to automate a web application. The final part of this series will demonstrate the possibilities of automating html objects within the Internet Explorer Object.

Test Automation - VB Web Automation with IE - Part 1

Internet Explorer

Internet Explorer is developed using the component object model (COM). This simple fact allows us to write code that can automate many web based applications without the need to invest in expensive automation test tools. Many market leading web automation test tools use the principles that I am going to describe here. In this article, although I am going to describe the use of Visual Basic (VB) in automating many aspects of Internet Explorer, you should note that all these working practices can be easily transcribed to other languages.
VB Development Environments

Throughout this article we will be using visual studio as our VB development environment but you can use any VB development environment. I have at times used the VB editor of MS office to get the work done!

Creating the Internet Explorer COM Object
There are two ways in which we can create the Internet Explorer COM object

- By referring to the Internet Explorer ActiveX library

Dim IE as InternetExplorer.Application
Set IE = New InternetExplorer.Application
IE.Visible = True

- By creating the object using the program identifier (progID) of the COM application.

DIM IE as object
Set IE = CreateObject("InternetExplorer.Application")
IE.Visible = True

Methods and Properties Available in Internet Explorer

The following list is some of the methods available in Internet Explorer. These methods can be viewed using the object browser that comes integrated with most development environments.

* Navigate2 - Navigates to a specified URL.
* Stop - Aborts the navigation.
* Refresh - Refresh the present URL
* Quit - Closes the browser. Closing a browser while its navigating to some URL is not recommended.
* GoBack - Navigates one page back.
* GoHome - Navigates to home page.
* GoForward - Navigates one page forward.

There are various properties available for use in Internet Explorer. Here is a list of some of the more commonly used properties used when automating web application.

* AddressBar - Controls whether address bar is shown. (Boolean)
* FullScreen - Maximizes window and turns off statusbar, toolbar, menubar, and titlebar. (Boolean)
* LocationName - Gets the short (UI-friendly) name of the URL/file currently viewed. (String)
* LocationURL - Gets the full URL/path currently viewed. (String)
* Path - Returns the path to the application. (String)
* Resizable - Controls whether the window is resizable. (Boolean)
* Silent - Controls if any dialog boxes can be shown. (Boolean)
* Type - Returns the type of the contained document object. (String)
* Visible - Determines whether the application is visible or hidden. (Boolean)
* Busy - Query to see if something is still in progress. (Boolean)
* ReadyState - Describes the current loading state of a page/Object. (Long)

Fundamental Actions

The following sections will demonstrate the use of these methods and properties.
- Browsing to a Web Page or site and waiting for the page to finish loading.

Dim IE

Dim urlStr
urlStr = "www.insideSQA.blogspot.com"
Set IE = CreateObject("InternetExplorer.Application")
IE.Visble = True
IE.Navigate2 urlStr
Do
DoEvents
Loop while IE.Busy = True
Msgbox urlStr & " has now loaded."
IE.Quit
Set IE = Nothing

- Enumerating all open Internet Explorer objects. The following code will form the basis of many of the object recognition techniques used on IE web applications.

Dim IEWins As SHDocVw.ShellWindows
Set IEWin = New SHDocVw.ShellWindows
Dim IEWin
For Each IEWin In IEWins
Msgbox "Name: " & IEWin.Name & vbcr & "LocationURL: " & IEWin.LocationURL
Next
For i = 0 To IEWins.Count - 1
Set IEWin = IEWins.Item(i)
Next

- Closing all open instances of Internet Explorer.

Dim IEWins As SHDocVw.ShellWindows
Set IEWins = New SHDocVw.ShellWindows
Dim IEWin()
ReDim IEWin(1 To IEWins.Count)
Dim i
For i = 1 To IEWins.Count
Set IEWin(i) = IEWins.Item(i - 1)
Next
For i = LBound(IEWin) To UBound(IEWin)
If InStr(1, IEWin(i).FullName, "iexplore.exe", vbTextCompare) Then
IEWin(i).Quit
End If
Set IEWin(i) = Nothing
Next

- Referencing an existing instance of Internet Explorer. This is a useful function as it allows you to work with instances of Internet Explorer that are already existent.

Public Function GetOpenIE(ByVal strUrl As String) As InternetExplorer
Dim insIE As InternetExplorer
Dim shWins As New ShellWindows
For Each insIE In shWins
If insIE.LocationURL Like strUrl Then
Set GetOpenIE = insIE
Exit Function
End If
Next
Set GetOpenIE = Nothing
End Function

Document Object Model

Once the Internet Explorer object is created, we need to access and interact with the objects that the web application consists of, for example, clicking on buttons, selecting web radio buttons, selecting list items, etc... These objects are defined by the html document object model or DOM.
The html DOM is a standard set of objects and includes a standard ways to access and manipulate these objects. All web applications, regardless of the technology or language that they are constructed with, make use of the DOM.
DOM Structure

The html DOM views html documents as a tree structure of elements. It is possible to access and manipulate all elements and their attributes through the DOM tree structure.
Every tag within the html structure of a document is represented as a node. When the tag is accessed or opened, all descendant tags become child nodes of the original starting node.
A tag is a construct that can have various attributes, some maybe pre defined and others may e user defined. In the following example type, value, and name are predefined attributes, and txtVal is a user defined attribute.
INPUT type="textbox" value="Chomsky" name="txtNombre" txtVal="Indepth"

Document

The upper most node in the DOM is the document, this represents the whole document. The document node has no dependant nodes, but provides various collections for different types of html element. It also provides various functions to interact with these elements.
Elements

An element is an object contained within the DOM. Each element has various means of accessing the methods and properties relating to that particular object. Al elements make use of the properties - outerText, innerText, innerHtml, tagName etc...
This piece of VBscript shows a way of accessing a particular text box in a document and changing its value.

Set txtBoxes = documents.GetElementsByName("chomskyTxt")
For i = 0 to txtBoxes.Length - 1
txtBoxes(i).value = "Sky"
next

This is the most common approach we can take when accessing elements of a web page. Using logic and programming structures, we can usually locate all elements within the document and interact with them.

Part 2 of Test Automation - Web Automation with IE will detail the different elements available in Internet Explorer, giving practical examples as how the DOM and VB can be used to access and control automatically a web application.