Locators in Selenium, well I just love this topic, for reasons being its so simple yet made so complicated. But having said that, the importance of this concept is not to be undermined. A very important concept and foundation in selenium, it should be understood correctly. So in this article we will be talking about it.
The locators in Selenium, as we all know are of following types - ID, Name, XPATH, CSS and DOM. When I teach I like to take an analogy about them, for that lets assume that the objects are the students and the page is a classroom. Keeping that in mind, the analogy would play like as follows –
|
Locator |
Analogy |
|
ID |
Roll number of student |
|
NAME |
Name of student |
|
XPATH |
The location or position of student with respect to another student or class entrance |
|
CSS |
The appearance of student |
|
DOM |
The hierarchy as in school.class.section.student |
It always helps me to understand locator in the above manner, and I have seen it has helped other students whom I teach as well. I hope it will help you to keep this in mind when we talk about locators. Now lets understand them in a little bit more detail and the syntax associated with them.
The id and the name details are present in the backend HTML element of the page. It is a html attribute of a html object from which these locators are created. For example lets have the backend view of the website – http://5elementslearning.com/demosite/login.php
We will talk in here about three objects – Email Address, Password and Sign in button and see their backend html information.
|
Object name |
HTML |
|
Email Address |
<input type="text" name="email_address" /> |
|
Password |
<input type="password" name="password" maxlength="40" /> |
|
Sign in |
<button id="tdb5" type="submit">Sign In</button> |
So when you record this scenario using Selenium ide, you will these locators being fetched. Email address has name property Email_address, the password text box, name is ‘password’ and the sign in button has an id property ‘tdb5’
Xpath, is one of the most complicated and very interesting locator. It is the path traversed to reach the node of interest. It is basically used in xml documents, so we say lets look at the html document as if it is an xml document, and the path traversed to reach the node of interest is the xpath. Xpath can be absolute or relative. Absolute xpaths are from the root html node. Another analogy –
|
Type of Xpath |
Analogy |
Syntax Example |
|
Absolute |
Complete address, like you give when you want a courier |
/html/form[@id=’login]/table/div/ |
|
Relative |
In relation to or with respect to, like when you want to invite someone to your home who lives in same city, so u give address with respect to a popular locations |
//input[@name=’email_address’] |
In another article we will talk about Xpath Axes which is also an important technique to find dynamic elements. We need to understand that during the time of recording Selenium IDE will capture all locator types for the object, but it will chose the one it can use to find the object fastest.
CSS stands for cascading style sheets. These are used to provide a common theme of appearance to the object types in a html application. For example in our example application all links and buttons appear with a pale blue color, and round corner, this is because of a CSS theme associated. The CSS syntax is as follows.
|
Object Atrtribute |
CSS |
|
If ID is available |
Css=#id. Eg. Css=#tdb5 |
|
If not then we use html attribute |
Css=htmltag[@attr=value] Css=input[@name=’email_address’] |
DOM stands for document object model. It says that we look at the page as if its an hierarchy and we then based on the parent child relation find the object of interest. The html node in here becomes the document, in relation to which other objects are available. Example
Document.login.email_address is same as //input[@name=’email_address’] is same as name=’email_address’ we are talking about the same object. The form which contains the element email_address, has the name as login, and the input object has the name email_address.
If the object has id or name, Selenium ideally uses it as it is the fastest to find the object. After that we have css, xpath and dom. But xpath is more reliable than css, specially relative xpath.So ideally one should follow- id or name, relative xpath, css, dom to find the object of interest.
That’s all we discuss in the above article. Hope you find it informative.