Selenium

Understanding Object identification in Selenium | Let’s login to Facebook

Learning Selenium? Where to start? What to learn first? How to spy the objects in Selenium?

We got the perfect start for you if these kind of questions are on your mind.

To Automate any application using Selenium, we first need to identify the objects it is made of. Any generic application (Web Application or Desktop Application) consists of different objects like below:

  • Button
  • Text Box
  • Link
  • Drop Down
  • Radio Button
  • List Box
  • SliderWebpage

Object identification is very important part of automation. So one should first learn how to identify the objects.

In Selenium, ‘Locators’ are used to uniquely identify the objects used in the Application under Test while automating the test cases. Once identified, we will be able to confirm the expected results on the web page.

Locators: Selenium offers a wide choice of Locators, namely:

  • ID
  • Name
  • Identifier
  • Link
  • XPath
  • CSS
  • Class
  • tag
  • DOM
  • Filters

Here XPath and CSS are the most widely used locators.

It is extremely easy to identify the object of the applications built on Firefox as compared to those built on IE browser then it is pretty difficult to identify the object.

Locating an element by ID

Let’s Do it ourselves. Follow the below steps:

Step 1. Install Firebug add-in in your Firefox browser from the below url:

https://getfirebug.com/

This add-in allows use to inspect an element on any application.

Step 2. Once the Firebug is installed, Navigate to the below url (one of your favourites) in the same browser only:

http://www.facebook.com/

Step 3. Click on the bug icon in the Firefox toolbar and activate Firebug.

FirebugStep 4. Click on the ‘Inspect Element’ icon

InspectElement

Step 5. Now you just need to click on the textbox where you enter your email/phone to login.You will notice that in the Firebug’s HTML section, properties of the textbox are displayed and are highlighted as well.

ID

As part of the element properties, notice that a value against the id is shown. This is what we call the ID Locator precisely.

driver.findElement(By.id(“email”)) will refer to the above textbox

Similarly, you may inspect various elements on a webpage and learn other Locators.

Locating an element by Name

Just the way you inspected the login text box of Facebook, inspect the same element and notice that there is another property/attribute ‘name’ shown for this element.

This is what we refer to as Name Locator.

Name

driver.findElement(By.name(“email”)) will refer to the above textbox

Locating an element by Identifier

Identifier works with the ID and name attributes of the html tag.

For our understanding, if the html code for the login textbox is as follows:

<input id=”email” class=”inputtext” type=”email” tabindex=”1″ value=”” name=”emailName”>

Among the listed attributes, you may use the Identifier to refer to the name or ID of this html tag.

So if you use “Identifier=email” or “Identifier=emailName”, both are valid statements and accepted in Selenium to refer to this element.

Locating an element by Link

To locate an element by the Link locator, consider inspecting the hyperlink named ‘Forgotten account?’ displayed just below the password textbox on the Facebook login page.

Link

You may use can use either ‘linkText’ or ‘partialLinkText’:

Driver.findElement(By.linkText(“Forgotten account?”))         Driver.findElement(By.partialLinkText(“Forgotten”)).click()

Locating an element by XPath

Let us first understand what XPath is. XPath is a language for traversing the structure of the DOM (document object model) of the web page. It is used to locate a web element based on its XML path. As HTML can be an implementation of XML (XHTML), we can use this powerful language to target elements in our web applications.

The fundamental behind locating elements using Xpath is the traversing between various elements across the entire page and thus enabling a user to find an element with the reference of another element.

One of the main reasons for using XPath is when we don’t have a suitable id or name attribute for the element we wish to locate. We can use XPath to either locate the element in absolute terms or relative to an element that does have an id or name attribute.

Now coming to understanding how to locate the elements using this Locator. Follow the below steps for the same:

  1. Download and install ‘Xpath Checker’ and ‘Firepath’ add-ons of the firefox browser.
  2. Restart your browser and navigate to ‘Facebook.com’
  3. When the page opens up, just like earlier, click the bug icon of Firebug and inspect the login text box of the website.

XPath4. You will notice that an additional field names ‘XPath’ is displayed and there is value displayed for the element you inspected on the webpage. That value is known as the XPath.

driver.find_element_by_xpath(“//*[@id=’email’]”)

Locating an element by CSS

CSS is ‘Cascading Style Sheets’ and is defined to display HTML in a structured and colorful way. CSS is much faster and simpler than the Xpath.

Syntax: css=tag[attribute=value]

where ‘tag’ means the HTML tag of the element you tend to inspect.Attribute means the attribute of the element such as name or Id

This is not a fixed syntax for css Locator. We may also take help of other attributes to find the css Locator of an element.

To understand this practically, we will study the HTML code of the same element we inspected in our previous examples.

<input id=”email” class=”inputtext” type=”email” tabindex=”1″ value=”” name=”email”>

The CSS locator for this element will be:

css=input[id=email]

Another way of writing the css will be:

css=input.inputtext[tabindex=1]

Hope this article would have helped you understand the basics of common Locators and would help you at some point at Automation using Selenium. Keep visiting the site for other related articles.

Save

Save

Leave a Reply

Your email address will not be published. Required fields are marked *