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.

Docking selenium IDE to Firefox

For almost everyone engaged in selenium automation let it be using selenium RC or web driver, selenium IDE is an unavoidable tool for initial assessment of the application under test. Some of us might want to check out the locator elements which we have described using either of the locator strategies are getting identified properly or not. Some other might want to check out if the commands themselves are doing what is intended by the user itself.

So every time we try to use the selenium IDE add-on for checking the locator objects of commands a user will have to toggle back and forth between the Firefox browser window and the selenium IDE window. In order to avoid this one could dock the IDE add-on onto the Firefox browser like docking the firebug window. This would help the user to see the recorded commands as he carries out the actions on the web application.

Creating a manual selenium IDE script using firebug

The easiest way for a user to create a test case using the selenium IDE is the record and playback mode. One could record the entire flow with assertions and verifications in between to create the test case. But if one is to move on to learning up the more advanced selenium tools such as selenium RC or web driver, it would be a good practise to manually create the selenium IDE scripts.

For demonstrating this we shall use the http://newtours.demoaut.com/ site to create the IDE script. We shall create a selenese script for a user to login.

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.

What is Selenese?

Selenese is a special test scripting language used by selenium for creating test cases. It a cross platform language used for representing the selenium commands. These are also referred to as selenese commands. Test scripts are created by writing these commands in proper sequence.

Making use of the various selenese commands a user can perform various actions such as checking for the existence of various UI elements, check for links present, enter data into text fields, select from drop down lists, etc. Besides these they can also perform actions such as switch between windows, scroll through a page, test Ajax functionality and many other web application features.

Record and playback using selenium IDE

Now that we are familiar with the basic features and functionalities of the selenium IDE we will begin to create test cases using the IDE. The simplest approach to creating test cases using the selenium IDE is using its record and playback capability. People who are relatively new to automation can use this approach to quickly learn the basics to creating a simple automation test script.

Step1: Launch Firefox browser and open selenium IDE.

Enhancements in Selenium IDE 2.5.0

Selenium 2.5.0 has brought in 3 enhancements and 3 minor fixes to the the already existing version of 2.4.0. The release notes can be found on the SeleniumHQ downloads page or can be directly accessed by visiting this link.

There are 3 enhancements, 3 fixes and some minor changes.

Enhancement 1: Select an element for a command by clicking on the element in the browser window