Friday, April 17, 2015

Selenium – Web Element locators


Overview
When it comes to Web automation, one of the major keys to success is the way that the coder can identify and control the different web elements that involve in the procedure, otherwise, how can you run your required actions or validations…?.

The basic elements that you can find in every application is buttons, search fields, Titles Etc., each one of this element can be identified by a different set of locators (ID, Class Names Etc.) that I will review in this post. 

My suggestion to you, is to read, think and gain some practical experience before you start to write your automations, remember that finding web elements are different from finding elements efficiency. 

Note!
My examples are based on the Firefox “Firebug” extension that you should install, please refer to this link for additional information.

A Vocabulary that should help you
Web Element – open any web page, open your eyes and review the titles, buttons, Combo-Boxes and every other object that you the web page contains. Done? Great, now a web element is everyone from this items, and in simple words; web elements are every object that you see in a given web page.
 
Types of Web Elements – this list is very narrow and basic, but will do the work: 
Radio-Buttons, Search Fields, Combo-Box,
Drop-Box, Buttons, Images, Titles,
Links, Grid, Etc.

Locator - a locator is the parameter that helps to identify the element in a given web page.

Types of locators – Field Name, Id, Class Name, Link Text Etc.

Find Element Methods (C# code):
“driver.findElement ();” and “driver.findElements ();”

Note! 

I will add detailed information in future posts, for now all you need to know, is that this methods are used to find elements in the web page via locators that we are covering in this article.

Find Element by ID
In my opinion, the ID/unique identifier is the most basic locator that you can use to identify a web element, it’s clear, simple and in most cases unique (When enforced) in the tested webpage. 
But…
  • Very hard/impossible to work with it when the elements are not defined as static.
  • In some cases, the id’s uniqueness are not enforced by the developer.
  • In some cases, The Locator id may be used for other purposes.
  • Many Web Elements don’t include such parameter.
How do we find it? Let’s do it with a basic example: 

Target: we want to find the ID of the Wikipedia search field.

The algorithm: 

Step 1: Open the Wiki main page at:   https://en.wikipedia.org/wiki/Main_Page
Step 2: locate the “Search” field

 

Step 3: Right Click on the search field (where you write your search query...).
 
Step 4: in the menu list, select the option “Inspect element with Firebug”.


Step 5: Navigate to the new grid that open at the bottom

Step 6: As you can see, there is a marked HTML code that describes the web element (in our case the “Search” field).
 



Step 7: if you inspect this code, you can see that there is an ‘ID’ parameter called “id="searchInput"
 
Step 8: Use the ID that you gain in the previous step, to manipulate this search field in your code (Add syntax, Delete syntax, Copy content Etc.) 

Example: driver.findElement (By.id (“searchInput”));
 

Find Element by Name
The most logical thinking idea that you may have is a way not just to define an element by is name? Well, it’s an option that’s available for you, but is this efficient enough? We will review this question in future posts. 

Image result for Tag NameTarget: we want to find the Name of the Wikipedia search field.

The algorithm: 

Step 1: Follow the steps “1-5” in the “Find Element by ID”.

Step 2:  if you inspect this code, you can see that there is a ‘Name’ parameter called “name="search" "

Step 3: You can achieve the same results as described in the “ID” locator.

Example: driver.findElement (By.id (“search”));

Find Element by Class Name
Based on the previous examples you can get the sense that finding the element locators is always an easy task, but what happens if the element doesn’t contain such basic locators (Name/ID)? 
Well, there is always a new path that you can use, in our case we can use a new locator that helps us to define the element based on is “Class” Name.

Target: we want to find the class name locator of a web page title of my blog

The algorithm: 

Step 1: Open my blog main page at:  http://www.dtvisiontech.com/

Step 2: locate the Main title of this blog  

 

Step 3: Right Click on the title  

Step 4: in the menu list, select the option “Inspect element with Firebug”.

Step 5: As you can see, there is a marked HTML code that describes the web element (in our case the “Main” Title).
 


Step 6: if you inspect this code, you can see that there is a ‘Class’ parameter called “Class="title".
 
Step 7: Use the class name that you gain in the previous step, to validate this title in any assert command (I will demonstrate it on my next post).

Example: driver.findElement (By.ClassName (“title”));

Find Element by Tag Name
In some cases the simplified locators are simply not available, to overcome this issue, Selenium Web Driver can offer few other alternatives that we can use to identify an element, among those alternatives we can find the “Tag name” locator.  

Before I demonstrate an example, I really think that you got the point on how to identify the locators using Firebug, from now I will demonstrate my examples with more specific cases.

Example: This code is inspected from my blog main title, as you can see, the element resides under “h1” tag, and therefore the tag name is “h1”.

 


Example: driver.findElement (By.tagName (“h1”));

In addition, there are a few points that you need to remember when using this locator:

  • The first TAG with this name will be used when executing the code (In case of duplications).
  • When possible, make sure that the selected TAG is unique.
  • When the element is not found during the code execution, the method returns error type “NoSuchElementException”.

Find Element by Full/Part Link

Another great locator that you can use to identify a web element is to use is “Link” text, this simple example will demonstrate how to use it with full/part name. 

 
 
Code examples:

Full Link: driver.find_element_by_link_text (“http://www.dtvisiontech.com/.....-usability-testing”)

Partial Link: driver.find_element_by_link_text (“http://www.dtvisiontech.com/2015”)
In addition, there are a few points that you need to remember when using this locator:

  • The first Link with this name will be used when executing the code (In case of duplications).
  • When the element is not found during the code execution, the method returns error type “NoSuchElementException”.

Find Element by XPath
Sometimes you may find yourself in situations that you simply struggle to find an element locators, I know that if you are working with selenium you can think about one or two examples that you have from your own personal experience. 

To overcome such frustrations, you must be familiar with the “XPath” locator that for me is one of the most important element locators that selenium can support.

Now, there are two ways to locate the XPath locations, the first one is manually (That I don’t want to cover in this post) and the second one is by a specific tool (“Web Driver Element locator”) that simplify the process and increase the efficiency of the search procedure. 

Before you can use this Firefox add-on, you first need to install it, to do so, please follow these few basic steps: 

Step 1: Open Mozilla Web-Browser. 

Step 2: Download and install the “Web Driver Element locator” (Link).

 


Step 3: now, that you finished with the installation process, you will see that finding the XPath locator is one of the easiest tasks that you can do. Let’s demonstrate it.
Example:
  1. Open my blog address (Link)
  2. Right Click on my “About” headline.
  3. Select the “C#” language (you can use any other Lang but C# is my cup of tea...).
 


From the image above, you will see few different XPath’s that you can use as your element locator (When you press on one of the options, the syntax will automatically copy to your clipboard).

Result:

driver.FindElement(By.XPath("//a[contains(.,'About ')]"));

No comments:

Post a Comment

My Presentations