Identifying UI elements using XPath

Identification using XPath is another locator identification strategy supported by selenium. XPath is query language used for locating nodes within an XML document. Since HTML can be considered to be an implementation of XML, XPath can be used for locating the web elements present within the HTML of the web application. Like CSS, XPath can also locate almost any element within a web application (even those without class, name or id attribute).

I shall demonstrate some of the common XPath locator identification methods through an example. For this take up the Wikipedia-login page. We shall try to describe the user name field on the page using the common XPath identification methods.

Identifying UI elements using CSS locators

Locating UI elements by name/id/link text is certainly the most simplest way of locator identification. But not all HTML elements within a page are defined by an id or name. For such situations where the user is unable to locate using the id or name locator strategies we use the CSS locator strategy.

CSS (cascading style sheets) is a style sheet language used for describing the rendering of documents written in mark-up languages such as HTML and XML. The CSS locator strategy uses the CSS selectors for finding the UI elements. Selenium supports CSS 1.0, CSS 2.0 and CSS 3.0 selectors. Although compared to the name and id locator strategies CSS locators are more complex to form, they can be used to locate even the most complicated objects within an HTML document. Also CSS locators are much faster compared to xPath locators. Owing to these reasons majority of selenium users recommend CSS as the most appropriate locating strategy of their choice.

Identifying UI elements using ID, Name, Link text locators

Among the various types of locator strategies used in selenium, locating elements using the id, name or link text locator strategy is the most simplest and direct method. All locators are given in the format locatorType = location where ‘locatorType’ is the location strategy followed by the location of the element.

Locating by ID

Locating using ID is the most common way of locating UI elements since all id’s on a pages must be unique (assuming your web application adheres to this W3C specification; although this is not followed mostly).

Locators in Selenium and tools for identifying them

Selenium is essentially a web automation tool where in the various UI elements of the web application under test are manipulated to drive the automation process. Hence identifying these UI elements is a prerequisite to creating automation scripts.

Selenium identifies these UI elements using what are known as locators. Locators tell selenium which UI element (say button, link, text box, drop down) to be targeted.