engineer diaries Logo

Types of Locators in Selenium Webdriver | EngineerDiaries

Jan 17, 2021, 1255 Views, 0

Contents

  • Types of locators in Selenium webdriver
  • Working with WebElement and FindElement
  • Working with CSS selectors in Selenium
  • Locating element using Id
  • Locating element using CSS classes
  • Summary
  • 1.Types of locators in Selenium webdriver

    To automate the browser testing process, selenium finds the elements on the web page using built-in classes called locators, so that output of the same element or container could be captured using screenshots and hence, compared for the UI/UX. Even locating elements can be done via multiple ways via class name, CSS selector, id, name, link text, partial link text, tag name, XPath. This blog is specifically dedicated to CSS selectors, id, and CSS class attributes.

    This blog is specifically designed for C#, but Selenium offers the same features in other languages like Java, Ruby, Python. Do check out the official tutorial for other languages here. Here in this example, we are using visual studio 2017. And adding Selenium webdriver libraries in MVC 2.2 dot net core web application project. Also, for testing we are using chromedriver, you can definitely use internet explorer, firefox driver, etc installed on the system. Hence, before moving on to the types of locators in selenium make sure to check out the previous tutorial here on the installation process.
    Types of Locators in Selenium Webdriver | EngineerDiaries

    2.Working with WebElement and FindElement


    FindElement is the method used to locate an element on the webpage. By default, the first element found is returned and an exception is raised when the element is not found. It offers many classes with as the attributes name through which you want to locate like it, via ID,className, Name, etc. Now, this provides a lot of scope for playing around also. As once you have located a node on the DOM as webElement you can find the next nodes via nesting as the driver here represents the browser but the element is a node. The below example examples more deeply where we are trying to locate the search bar on engineerdiaries.com site using id=’data’.

    Currently, we are playing around just finding the elements in the next article will focus on taking screenshots as well.


    
    
    using System;
    using System.Collections.Generic;
    using System.Diagnostics;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Mvc;
    using WebApplication1.Models;
    using OpenQA.Selenium;
    using OpenQA.Selenium.Chrome;
    using OpenQA.Selenium.Remote;
    using OpenQA.Selenium.Support.UI;

    namespace WebApplication1.Controllers
    {
        public class HomeController : Controller
        {
            public IActionResult Index()
            {

                  ChromeOptions options = new ChromeOptions();
                options.BinaryLocation="C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe";


                DesiredCapabilities capabilities = new DesiredCapabilities();
                capabilities.SetCapability(ChromeOptions.Capability, options);
                ChromeDriver driver = new ChromeDriver("C:\\WebDriver\\bin", options);
                driver.Navigate().GoToUrl(@"https://engineerdiaries.com/");

               IWebElement searchBox= driver.FindElement(By.Id("data"));
            }
        }
    }
    Types of Locators in Selenium Webdriver | EngineerDiaries

    3.Working with CSS selectors in Selenium


    CSS selector is unlike its name in fact. As one use is for element tag as<img><a> than CSS classes as for classes there is separate way className. Now by default, it would return the first matched element, but of course, if there are multiple elements then you can get the list via list tags. Also in the example below, we are using nesting of the tags so, as to filter down the nodes as <app-root> is a parent node on the page with <app-header> as a child node of the same. If the element is not found, the code would raise exceptions.


    
    
    using System;
    using System.Collections.Generic;
    using System.Diagnostics;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Mvc;
    using WebApplication1.Models;
    using OpenQA.Selenium;
    using OpenQA.Selenium.Chrome;
    using OpenQA.Selenium.Remote;
    using OpenQA.Selenium.Support.UI;

    namespace WebApplication1.Controllers
    {
        public class HomeController : Controller
        {
            public IActionResult Index()
            {

                  ChromeOptions options = new ChromeOptions();
                options.BinaryLocation="C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe";


                DesiredCapabilities capabilities = new DesiredCapabilities();
                capabilities.SetCapability(ChromeOptions.Capability, options);
                ChromeDriver driver = new ChromeDriver("C:\\WebDriver\\bin", options);
                driver.Navigate().GoToUrl(@"https://engineerdiaries.com/");

              IWebElement elementNesting = driver.FindElement(By.CssSelector("app-root app-header"));
            }
        }
    }
    Types of Locators in Selenium Webdriver | EngineerDiaries

    4. Locating element using Id


    One of the fastest and most convenient ways to locate an element on a webpage is via ID. Also, it is among good coding practices to give unique IDs to different elements on the webpage. Here for instance on engineerdiaries landing page, the search box has been given id=’data’ that can be found inspect element. Now, locating the search box using Id code is given below.


    
    
    using System;
    using System.Collections.Generic;
    using System.Diagnostics;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Mvc;
    using WebApplication1.Models;
    using OpenQA.Selenium;
    using OpenQA.Selenium.Chrome;
    using OpenQA.Selenium.Remote;
    using OpenQA.Selenium.Support.UI;

    namespace WebApplication1.Controllers
    {
        public class HomeController : Controller
        {
            public IActionResult Index()
            {

                  ChromeOptions options = new ChromeOptions();
                options.BinaryLocation="C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe";


                DesiredCapabilities capabilities = new DesiredCapabilities();
                capabilities.SetCapability(ChromeOptions.Capability, options);
                ChromeDriver driver = new ChromeDriver("C:\\WebDriver\\bin", options);
                driver.Navigate().GoToUrl(@"https://engineerdiaries.com/");

               IWebElement searchBox= driver.FindElement(By.Id("data"));
            }
        }
    }
    Types of Locators in Selenium Webdriver | EngineerDiaries

    5 Locating element using CSS classes

    Using CSS classes to get list of elements on the page is the best to validate if the response is similar across browsers. As say you have, images on a page and want to see if the visuals are correct across the screens. Here, in this example, as you can see on the landing page we have cards with class=”details-card”. Here we are inspecting this element as a list. 


    using System;
    using System.Collections.Generic;
    using System.Diagnostics;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Mvc;
    using WebApplication1.Models;
    using OpenQA.Selenium;
    using OpenQA.Selenium.Chrome;
    using OpenQA.Selenium.Remote;
    using OpenQA.Selenium.Support.UI;

    namespace WebApplication1.Controllers
    {
        public class HomeController : Controller
        {
            public IActionResult Index()
            {

                  ChromeOptions options = new ChromeOptions();
                options.BinaryLocation="C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe";


                DesiredCapabilities capabilities = new DesiredCapabilities();
                capabilities.SetCapability(ChromeOptions.Capability, options);
                ChromeDriver driver = new ChromeDriver("C:\\WebDriver\\bin", options);
                driver.Navigate().GoToUrl(@"https://engineerdiaries.com/");

                IWebElement element2 = element.FindElement(By.ClassName("details-card")); 
            }
        }
    }
    Types of Locators in Selenium Webdriver | EngineerDiaries

    6.Summary

    In the blog, we learnt how to locate elements on a webpage using selenium webdriver in c#. Also, we discover types of locators in selenium webdriver where more specifically we dealt with CSS Selector, Element by Id and CSS Classes. Apart from this there are other methods to it as well like xpath, partial link text, link text etc. In the coming article we will look into capturing screenshots in more detail. If there are some queries left do ask them in comment section below:)

    Comments Section: