CS/IT Turotials

Different Ways of Locating Elements in Selenium IDE

Google+ Pinterest LinkedIn Tumblr

While writing test cases in Selenium IDE, you have to locate the elements for which you want to perform some actions, verify the value of an element or the presence of the element itself. You have to provide locators of the element on the target field at the time of writing test scripts. The element locator used on target field will identify an element in the content of web application. But for some of the selenium IDE commands providing locator type may not be required. Here we are writing in detail about different ways of locating elements while writing test cases in selenium IDE along with their examples.

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.

Shuseel Baral is a web programmer and the founder of InfoTechSite has over 5 years of experience in software development, internet, SEO, blogging and marketing digital products and services is passionate about exceeding your expectations.

Write A Comment