We will understand working with locators DOM and XPath in detail with proper examples in this article.
This article is continuation of Understanding of Selenium Locator Part-1.
Working with DOM (Document Object Model) :
Before going into selecting a web element through DOM locator, let’s first understand what DOM is.
What is DOM ? :
In short DOM represents the HTML document as a tree structure.
In this article we will be focusing on locating the element by using DOM. If you want to read more about DOM in detail please click here. Please note that Selenium IDE is able to understand command starting with keyword “document”, hence there is no need to add prefix “dom=” in commands.
To showcase this DOM locator type we will take example of seleniumhq.org search button.
Format : document.getElementById(“Web element ID”)
– Hit the URL : http://docs.seleniumhq.org/ in Firefox browser.
– Look for “search selenium” on Top right corner of the screen.
– Open Firebug and click on Inspect button.
– Select “Go” button. Now in Selenium IDE, select blank test step where we will add DOM command.
– As mentioned in above image take id of the “Go” button and use it with document.getElementByID.
Locating the element by DOM-getElementsByName is not straight forward as locating through its ID. As we discussed in earlier post that ID’s are unique throughout the entire web page but multiple elements can have same Name parameter. In such cases Selenium collects array of all elements having the Name you mentioned. Now to access any particular element from this array we need to append the index number to the target.
Format : document.getElementsByName(“Name of the Element”)[index number] where,
[index number] = An integer value to identify the element from the Array.
As an example we will use Gender Radio buttons displayed in the Sign Up screen of Facebook landing page.
– Hit the URL : https://www.facebook.com/
– Make sure you are not logged in and on the landing page of Facebook.
– Now under “Sign Up” section verify 2 radio buttons for “Female” and “Male”.
– Open Firebug and and inspect these radio buttons. You will see something like this.
– As you can see in above image both radio buttons are having same Name value : “sex”.
– For the first radio button index value will be “0” and for the second one value will be “1”.
– Hence, you Selenium IDE command can be generated as below :
3) Locating Element by DOM : Named Forms
This type of locators can be used for specific elements which are part of a named form.
Format : document.forms[“Form Name”].element[“Element Name”]
We will directly jump into example to understand more of this locator. To demonstrate we will take example of “http://www.makemytrip.com/” Header Login.
– Hit the URL : http://www.makemytrip.com/
– On the landing page of Make My Trip, click on the “Header Login” and you will see a box full of links, buttons and text-boxes displayed as shown below :
– Our focus is on the “Email Address” field which we want to locate using DOM : Named form.
– Now open firebug and locate the same field.
– Let’s put down all the values in the Format mentioned above.
Form Name = “header_login_form_0”
Element Name = “username”
So our Selenium IDE Target value will be : document.forms[“header_login_form_0”].elements[“username”]
– Open fly-out and try locating “Email Address” box by pressing Find button on IDE window.
Using XPath for locating the Web Element
When none of the above locators works well in identifying any particular element, that’s when XPath comes into the play. XML stands for Extensible Markup Language and XPath is used to show the direction of web element through Nodes and Attributes.
XPath can be used locating the elements having no Id, Name or Class. XPath can be created manually but in this tutorial we will use plugin to generate the XPath. Such
XPaths are not 100% accurate in locating the element. Hence it is advisable to verify that XPath is locating the proper element.
Before going any further make sure that you have installed this plugin : FirePath. Click Here to to understand installation and usage of FirePath add-on.
Basically there are two types of XPath : Absolute XPath & Relative XPath.
Absolute XPath :
It is the full path for your desired element starting from the root node and ending with the element’s node. It starts bye using single forward slash (/) as displayed below,
This is the XPath of Search Icon displyed in the right sidebar of www.testingjournals.com
Only disadvantage of using Absolute XPath is: If the structure is changed or any node is added in between, than this path will be no longer useful.
Relative XPath :
It does not start from root node, instead any In between node or the node of your choice can be used as a reference. Relative XPath starts with double slash(//).
In above example for Relative XPath, the most recent ID attribute is considered as the reference.
Why Single slash (/) & double slash(//) ?
A Single Slash given at the start of XPath guides the engine to locate the element from the very starting of the root node.
A Double Slash given at the start of XPath guides the engine to look for the matching element anywhere in the XML structure for reference.
In these tutorials we learned how to identify a web element through locators and using them in Selenium IDE. Pattern of using appropriate locator varies for each web application considering the code structure and nature of the elements. Here are few Tips :
– ID should be the first preference to locate any element
– Stay away from dynamically generated locators
– Elements you’ll most interact with are : Text-box, Buttons, Drop-downs, Hyperlinks, Check-box and Radio buttons
– When recording through Selenium IDE, study each command and its locator and Change them if required
Please provide your feedback & suggestions to improve these tutorials below in the comments section. Thank You and Happy Testing.