Locators in Selenium WebDriver to identify WebElements in a Webpage

In this Article we will see how we can identify a web element in a Web page and today we will discuss some of the locators in selenium webdriver.

Locators in Selenium:

When automating a web application the first thing to do is identify the web elements in the web page.

Web element can be identified by it is name ,id, class name, link text, partial link text and so on.

To understand more clearly we will see a simple program to open Google and search a keyword 'Selenium'

namespace SeleniumCsharp

{

    class GoogleSearch

    {

        static void Main(string[] args)

        {

            IWebDriver driver = new FirefoxDriver();

            driver.Navigate().GoToUrl(http://www.google.com);

            driver.FindElement(by.name("q")).sendkeys("Selenium"));

            driver.Quit();

        }

    }

}

In the above program we can see line 

driver.FindElement(by.name(“q”)).sendkeys(“selenium”));

Here FindElement() is webdriver interface method which is used to Locate elements using ‘by’ , We have one more method FindElements() which is  also used to locate elements we discuss differences between FindElement() and FindElements()  later but now we will concentrate more on different types of locators.

There are 8 different ways we can identify a web element in a html page.

1. ·         Name
2. ·         Id
3. ·         Link Text
4. ·         Partial Link text
5. ·         Tag name
6. ·         Class name
7. ·         CSS
8. ·         XPath (XML path)

        Now we will discuss in depth of each locator

1.   By.name() method:

This is the easiest method locates elements by using the “name" attribute of web Element.

For example facebook login page has the Email or Phone text box and when you see the html code for this text box  by right click on Email or Phone text box and select ‘Inspect Element’ option as shown in below picture in IE browser version 10 or above.

Now you can see the below Dom explorer with element attributes and values.

In the above input html tags there is an attribute called name with the value ‘email’ so we can use this locator to identify the Email or Phone text as follows.

WebElement Username =driver.FindElement(by.name(“email”);

Now we will see detailed descriptions of each word in the above Statement.

WebElement = Type of element is WebElement

Username = name which we are giving to username text box (Enter your Email textbox)

driver = object of FirefoxDriver class

FindElement = method to locate web element

By.name= method passed to FindElement

“email”=name attribute value of text box “Email or Phone”.

Example:

namespace SeleniumCsharp

{

    class FacebookByname

    {

        static void Main(string[] args)

        {

            IWebDriver driver = new FirefoxDriver();

            driver.Navigate().GoToUrl(http://www.facebook.com);

            WebElement Username =driver.FindElement(by.name(“email”);

            Username.SendKeays(“myusername”);

            driver.Quit();

        }

    }

}

2.      By.Id() method:

This is the commonly used locater since ID's are unique for each element.

We will use same facebook login page to understand the By.id() locator , consider we have "Email or Phone" text box with another attribut called 'id' as showin in the below html code of the facebook page, To see this right click on Email or Phone text box and select ‘Inspect Element’ option in IE browser version 10 or above.

We can write the locator as   WebElement Username =driver.FindElement(by.id(“email”);

Example:

namespace SeleniumCsharp

{

    class FacebookByid

    {

        static void Main(string[] args)

        {

            IWebDriver driver = new FirefoxDriver();

            driver.Navigate().GoToUrl(http://www.facebook.com);

            WebElement Username =driver.FindElement(by.id(“email”);

            Username.SendKeays(“myusername”);

            driver.Quit();

        }

    }

}

               

3.  By.linkText() method

This locator uses the link text of HTML links in a web page to identify the links and as it’s name suggest it can only be used to identify the HTML links.

The HTML link elements are represented on a web page using the <a> anchor tag,

<a href="/intl/en/about.html">About Google</a> 

Here, href is the link to a different page where your web browser will take you when clicked on the link.

This ‘About Google’ is the link text and to locate this web element we can use By.linkText

The sample code for this would look like this and Here the By.linkText locater is used to identify the About Google link.

namespace SeleniumCsharp

{

    class FacebookByid

    {

        static void Main(string[] args)

        {

            IWebDriver driver = new FirefoxDriver();

            driver.Navigate().GoToUrl("http://www.google.com");

           WebElement aboutLink = driver.findElement(By.linkText("About Google"));

           aboutLink.click();

            driver.Quit();

        }

    }

}

4.    The By.partialLinkText() method

The By.partialLinkText locating mechanism is an extension to the previous one. When you are not sure of the entire link text or want to use only part of the link text, you can use this locator to identify the link element, now we will use sample program with the new locator with the partial link text as ‘About’ instead of ‘About Google’.

namespace SeleniumCsharp

{

    class FacebookByid

    {

        static void Main(string[] args)

        {

            IWebDriver driver = new FirefoxDriver();

            driver.Navigate().GoToUrl("http://www.google.com");

           WebElement aboutLink = driver.findElement((By. partialLinkText("About"));

           aboutLink.click();

            driver.Quit();

        }

    }

}

Here we only used partial link text ‘about’  to click on the ‘About Google’ link , This how we can use By.partialLinkText() locator and we will see other locators in the next article.