Table of Contents
Locating Elements by ID
Locating elements by ID is the most common ways that may use while developing any web applications. It will locate the elements with matching ID attributes provided in the form of “id=idname”.
For example, following is the the source code for an email subscription form.
<html> <body> <form id="subscribeform"> <input name="firstname" type="text"/> <input name="lastname" type="text"/> <input class="required" name="email" type="text"/> <input name="continue" type="submit" value="subscribe"/> <input name="continue" type="button" value="cancel"/> </form> </body> </html>
Here, you have to write “id=subscribeform” on the target field for locating email subscription form by the ID attribute.
Locating Elements by Name
Likewise locating the elements by ID, you can locate the elements by Name with a matching name attribute. We use the format ‘name=name of element’ to the target field. If there are multiple elements having the same value for name attribute, you may apply additional filters along with name locators.
Now, look at the source code for email subscription form given above.
Use ‘name=firstname’ for locating the First Name field within the form. Similarly, If you want to locate Last Name field, you can use ‘name=lastname’ and ‘name=email’ for locating Email field.
For both subscribe and cancel button, it has the same value for the name attribute. So you can locate them using additional filters along with name locators. Use ‘name=continue value=subscribe’ or ‘name=continue subscribe’ for locating subscribe button. Similarly, you can locate cancel button using ‘name=continue value=cancel’ on the target field.
Locating Elements by CSS
You can also locate the elements using different types of CSS selectors on the target field. It is a more complicated method than the methods we have described above. Using CSS selectors, you may locate the elements even there are no id or name attributes available. You should write CSS locators on the format ‘css=css attributes’. Following are the examples of different ways of locating elements by CSS.
Locating by Tag and ID
You can locate the element by CSS using Tag and ID with syntax css=tag#id. Where the ‘tag’ is the tag of the HTML element and ‘id’ is the ID of the element which needs to locate.
On the HTML code given above, you can locate the Subscribe Form with writing ‘css=form#subscribeform’ on the target field.
Locating by Tag and Class
Likewise locating the elemets by Tag and ID, you can locate by Tag and Class simply replacing ID attribute with the class attribute with preceding dot(.) symbol. You can locate Email field with writing ‘css=input.required’ on the target field. If there are multiple elements having same class, may write ‘css=input.required[type=”text”]’.
Locating by Tag and Attribute
Locating elements by CSS with tag and attribute is another method of locating elements in Selenium IDE. Where you may use any of the CSS attributes such as name, type, value etc. after the tag name. In order to locate the First Name field on the HTML code given above with tag and the name attribute, you can write ‘css=input[name=”firstname”].
You may locate the elements with other more ways other than given above. Following are the examples of other possible ways of locating elements by CSS.
- css=input.required[name=”email”] → locating by tag, class and attribute
- css=#subscribeform input[type=”button”] → locating by id, tag and attribute
- css=#subscribeform .required → locating by id and class
- css=.required input[type=”text”] → locating by class, tag and attribute
Locating Elements by DOM
The Document Object Model (DOM) is the way of representing an HTML document which can be accessed using JavaScript codes. Selenium IDE is able to use the DOM for easily evaluate the HTML element location usningthe hierarchical dotted location. While locating elements by DOM, you should start with “dom=document…” on target field. Selenium also accepts writing DOM without “dom=” prefix. There are different ways of locating elements by DOM, some of them are described below.
Locating by ID, Name or Class
You can locate the elements easily with specifying the ID, Name or Class of an element. On the sample HTML code for email subscription form above, you can locate the subscription form and the first name input box as the following.
- dom=document.getElementByID(“subscribeform”) → locating by id ‘subscribeform’ within the document.
- dom=document.getElementsByName(“firstname”)[0] → locating by name ‘firstname’ with specifying first element.
- dom=document.getElementsByClass(“required”)[0] → locating by class ‘required’ with specifying first element.
Locating by dom:name or dom:index
Along with locating by ID, Name or Class, you may locate the HTML elements with specifying its name or index. Following are the examples of locating elements by dom:name or dom:index for the sample HTML code for email subscription form above.
- dom=document.forms[0]→ locating the first form of the document.
- dom=document.forms[0].elements[“email”] → locating the element having name ’email’ within the first form.
- dom=document.forms[“subscribeform”].elements[“continue”][0] → locating the first element having name ‘continue’.
- dom = document.forms[0].elements[2] → locating the third element within the first form of document.
Locating Elements by Xpath
We use XPath for locating Extensible Markup Language(XML) nodes in an XML document. Selenium allows it’s users to use XPath for locating elements on a web application. It provides the simple methods for locating elements by different attributes. For selenium, we can provide XPath location in two ways. The first one is locating in absolute terms and the another is relative to an element. We will provide location of all elements from the root on absolute XPath where as we will locate the elements from nearby elements or the parent elements on relative XPath.
Following are the examples of XPath locators that can be used for sample HTML codes for email subscription form given above.
- xpath=/html/body/form[1] → absolute path for locating first form in the HTML document.
- xpath=//form[1] → relative path for locating first form in the HTML document
- xpath=//input[@name=”firstname”] → relative path for locating input elment having value of name attribute ‘firstname’
- xpath=//input[@name=”continue”][@type=”submit”] → relative path for locating input element having value of name attribute ‘continue’ and the type ‘submit’.
Although, all the XPath locators are started from the prefix ‘xpath=’, you may exclude this part while writing as locators on selenium IDE.
Locating Hyperlinks by Link Text
If the HTML element is a hyperlink, you may locate it on selenium IDE with very simple way using the text of the link. If there are multiple hyperlinks with same text, it will locate the first hyperlink by default.
For example, here is the sample HTML code of linked list.
<body> <p>Sample linked List</p> <a href="/p/mcqs.html">MCQs</a> <a href="/category/csit-tutorials-collections">Tutorials</a> </body>
For locating the hyperlink with the link text “Tutorials”, you may write ‘link=Tutorials’ on target field.
