Identify web elements

This section describes how to identify elements in web applications.

Although it is recommended to use Chrome extension for most automation scenarios, there are times when Chrome extension wouldn’t pick up the identifiers on the page.

Identification methods

useMango™ supports several different identifiers, some for ease of use and performance, others intended for advanced identification.

  • Default identifier strategy (omitting identifier type)

    If the strategy= prefix is omiited from the identifier string, the useMangoTM framework will iterate through a list of possible identifiers for the control in question. This is very easy to use, especially for links or buttons and makes the test data easy to read. However, there is a performance impact since the framework doesn’t know itself which property to search for, it will have to try several different strategies before finding the element. As such this is recommended for ease of use and beginners but if performance is of interest it is better to apply the strategies below.

    usage: link text

  • Html id

    The html id is the property of an html element. It can easily be found by inspecting the web page and in modern web sites most automatable controls should have an id. Ids are used for uniquely identifying elements on a web page and are therefore the natural choice for identification also in automation. If elements are missing ids it is usually very easy for a developer to add ids to elements and it is good practice to work together with the developers in order to make the automation easier, faster and more robust. The html id can also be used in css by prepending the id with a #character. So id=btn would equal css=#btn although the former would be slightly faster in most web browsers.

    usage: id=tbn

  • Html name

    Most form elements (which may also have ids) will have a name. The name is usually fairly static like ids since it is used to bind the control data to the datasource when teh form is posted to the server. This makes it almost as good to use as the html id as an identifier although the performance if using an id is slightly better. Also, usually only input controls such as text fields, radio boxes etc have the name property specified, links and buttons usually don’t since they don’t contain data that gets posted to the server.

    usage: name=username

  • Cascading style sheet (CSS) identifer

    CSS identifiers are commonly used across the internet to select elements where an element id is missing. Usually this is applied for styling of web suites but it may also be used for automation. i.e. buttons are usually styled using special class attributes which can be used to identify them for automation as well. CSS is very powerful and allows for matching properties and hierarchies of objects making it a very powerful tool. Also, teh performace of applying CSS identification is in most cases faster than using XPath. For a reference of using CSS please see:

    usage: css=input.className

  • XPath

    If identification cannot be done in any other way, XPath can probably still be applied in some way to select the element. XPath is a tool originally for selecting elements within XML documents but since modern HTML follows XML standards so closely it is possible to apply it to web pages. XPath searches are slower than using CSS but the selectors are more powerful as they can do attribute seraches, conditionals and much more. For a reference of XPath capabilities please see:

    usage: xpath=//a[text()=”About”]

Default identification properties

As described above, if no specific strategy= is applied the useMangoTM framework will attempt to find the element based on teh properties available for each element type. This list below states which identifiers are attempted for each element type.