TestComplete Tips: How To Find A Web Page Element With Specific Text

When testing web pages, you often need to find web page elements by
using the element text. TestComplete provides access to the methods and
properties of web page elements so you can search all web page elements
and find the desired text in the element properties.

To perform the search, you can use the Page object’s Find method. This method takes three parameters:

Page.NativeWebObject.Find(PropertyName, KeyValue, TagName)

• PropertyName – Name of the property, whose value is checked by the method. Typically, the element’s text is accessible through the innerHTML or innerText property.
• KeyValue – The sought-for text. You can use the * and ? wildcards to specify the search masks.
• TagName – This parameter is optional. You can use it to specify tag names that you would like to search in.

Since the name of the Find method coincides with the name of the Find method added to all tested objects by TestComplete, the Page object’s method resides in the NativeWebObject namespace, that is, in your script you should call Page.NativeWebObject.Find rather than Page.Find.

The following code demonstrates how you can use the method to search for the object containing the string, “Johns“. (Ed. Note: We all know how hard it can be to find a John when you need one.) The sample routine works with the web page that displays the orders list. To view this page, open the pageSamplesOpen AppsOrdersDemoWebStart.htmin your Internet browser and click View all orders. The test script works with Internet Explorer 6. If you use another browser, you will need to modify the script lines responsible for obtaining the Page object and the document object.

function Test()<br />{<br />var Pg, Obj;<br />// Obtains the Page object<br />Pg = GetPage();<br />// Searches for the text in the page<br />// Note that we used the * wildcards to specify the search pattern<br />Obj = Pg.NativeWebObject.Find(“innerText”, “*Johns*”, “TD”);<br />// Checks the result<br />if (Obj.Exists)<br />Log.Message(“Found! “, Obj.FullName + “</p> <p>” + Obj.outerHTML);<br />else<br />Log.Warning(“Not found!”);<br />}<br />// Obtains the Page object<br />function GetPage()<br />{<br />var p, w;<br />p = Sys.Process(“iexplore”);<br />w = p.Window(“IEFrame”, “Web orders – *”, 1).Window(“Shell DocObject View”, “”, 1).Window(“Internet Explorer_Server”, “”, 1);<br />return w.Page(“*”);<br />}<br />

The Find method frees you from writing code that parses the web page element’s tree. However, the method always starts the search from the top level of the element’s hierarchy and if you have two elements containing the same text, the method may return a different element than what you expect. In this case, you should add a special search method. Below is an example of this type of script routine. The SearchForText routine can perform the search from any level of the element’s hierarchy:

function Test()<br />{<br />var Pg, Doc, Obj;<br />// Obtains the Page object and the document<br />Pg = GetPage();<br />Doc = GetDoc(Pg);<br />// Searches for the text in the page<br />// We start the search from the body element<br />Obj = SearchForText(Doc.body, “Johns”, “TD”);<br />// Checks the result<br />if (Obj != null)<br />{<br />// The SearchForText method returns a DOM object.<br />// The following line finds the appropriate TestComplete object for this object.<br />Obj = Doc.FindChild(“uniqueID”, Obj.uniqueID, 10);<br />// Post results to the log<br />Log.Message(“Found! “, Obj.FullName + “</p> <p>” + Obj.outerHTML);<br />}<br />else<br />Log.Warning(“Not found!”);<br />}<br />// Searches for an object<br />function SearchForText(AObject, AText, ATag)<br />{<br />var i, coll, item, r, tag;<br />// Initializes variables and parameters<br />r = null;<br />tag = ATag.toUpperCase();<br />// Obtains the elements collection<br />coll = AObject.all.tags(ATag);<br />// Goes through the collection elements<br />for (i = 0; i < coll.length; i++)<br />{<br />// Obtains the element<br />item = coll.item(i);<br />// Searches for text in the element<br />if (item.tagName.toUpperCase() == tag)<br />if(item.innerHTML.indexOf(AText) > 0) // Searches for text<br />r = item;<br />// If text was not found, search in children<br />if (r == null)<br />r = SearchForText(item, AText, ATag);<br />// If text was found, exit the loop<br />if (r != null) break;<br />}<br />return r;<br />}<br />// Obtains the Page object<br />function GetPage()<br />{<br />var p, w;<br />p = Sys.Process(“iexplore”);<br />w = p.Window(“IEFrame”, “Web orders – *”, 1).Window(“Shell DocObject View”, “”, 1).Window(“Internet Explorer_Server”, “”, 1);<br />return w.Page(“*”);<br />}<br />// Obtains the document object<br />function GetDoc(APage)<br />{<br />var Frame;<br />// In our example the data are displayed in frames<br />Frame = APage.document.frames.rightFrame;<br />return Frame.document;<br />}<br />

Note that the SearchForText routine returns a DOM object containing the sought-for text. This object does not contain methods and properties provided by TestComplete. To find the TestComplete object corresponding to the found object, we call the FindChild method. It searches for an object by its property values. To find the object, select the property or properties that uniquely identify the element on the page. In our example we used the uniqueID property – it contains a unique element’s identifier generated by the browser. Note, however, that this property is available if the web pages is displayed in Internet Explorer or in the WebBrowser control. If you use TestComplete 5 to test a web page shown in Firefox, you have to find another property or properties. For instance, you can use the combination of the tagName, innerHTML, offsetTop and offsetLeft properties (you can also use offsetTop and offsetHeight properties or the clientTop, clientLeft, clientWidth and clientHeight properties).