WebDriver Exploration Part-2(Locating WebElements)

In this lecture, we will learn how we can locate elements and perform an operation on them.
WebElement represents the HTML element with whom we interact during testing.
We will now look at how we can find elements and store them in IWebElement Interface

Inspecting Element in Chrome browser

Open Google home page and right-click on the element with you want to inspect and choose inspect from the popup menu and you can see all the HTML attributes for the element

Now we know how can one inspect an element, we will start with locating element and then we will create sample script to interact with an element

Locating by ID

We will open the google home page and inspect the image above the search text box and you will see that the image is in Div tag with ID as "hplogo".

We will create a script to find the div element and then click on the element which will open the search page as per the logo image

[TestMethod]
        public void Verify_Locating_By_ID()
        {
            InternetExplorerOptions options = new InternetExplorerOptions();
            options.IntroduceInstabilityByIgnoringProtectedModeSettings = true;
 
            IWebDriver driver = new InternetExplorerDriver(options);
            driver.Url = "https://www.google.com/";
 
            //Locate Element By ID
            IWebElement logoElement= driver.FindElement(By.Id("hplogo"));
 
            //Click on Logo ELement
            logoElement.Click();
 
            //Wait to see the results
            System.Threading.Thread.Sleep(5000);
 
            //Driver close first instance
            driver.Quit();
 
        }


Locating by Name

We will open google home page and find search textbox by name attribute and type 'test' string

[TestMethod]
       public void Verify_Locating_By_Name()
       {
           InternetExplorerOptions options = new InternetExplorerOptions();
           options.IntroduceInstabilityByIgnoringProtectedModeSettings = true;
           options.RequireWindowFocus = true;
 
           IWebDriver driver = new InternetExplorerDriver(options);
           driver.Url = "https://www.google.com/";
 
           //Locate Element By name
           IWebElement searchTxtbox = driver.FindElement(By.Name("q"));
 
           //Click on ELement
           searchTxtbox.SendKeys("test");
 
           //Wait to see the results
           System.Threading.Thread.Sleep(5000);
 
           //Driver close first instance
           driver.Quit();
 
       }

Locating By Class Name

We will open google home page and find google search page button by class name and then print the button text on the console

[TestMethod]
      public void Verify_Locating_By_Class_Name()
      {
          InternetExplorerOptions options = new InternetExplorerOptions();
          options.IntroduceInstabilityByIgnoringProtectedModeSettings = true;
          options.RequireWindowFocus = true;
 
          IWebDriver driver = new InternetExplorerDriver(options);
          driver.Url = "https://www.google.com/";
 
          //Locate Element By class name
          IWebElement searchTxtbox = driver.FindElement(By.ClassName("gNO89b"));
 
          //Get the Button text ie value attribute text
          string value=searchTxtbox.GetAttribute("value");
          Console.WriteLine("Button Text: " + value);
 
          //Wait to see the results
          System.Threading.Thread.Sleep(5000);
 
          //Driver close first instance
          driver.Quit();
 
      }


Output:-
Button Text: Google Search


Locating By Xpath

Here we will find and click on Gmail link on the header.
On inspecting header element we can see there is no ID or Name attributes using which we can directly locate the element. In such conditions, we can use XPath where we can find the parent element which has unique identification and then we can locate the element which has a tag as 'a' and text as 'Gmail'

[TestMethod]
       public void Verify_Locating_By_XPath()
       {
           InternetExplorerOptions options = new InternetExplorerOptions();
           options.IntroduceInstabilityByIgnoringProtectedModeSettings = true;
           options.RequireWindowFocus = true;
 
           IWebDriver driver = new InternetExplorerDriver(options);
           driver.Url = "https://www.google.com/";
 
           //Locate Element By ID
           IWebElement gmailLink = driver.FindElement(
                                 By.XPath("//div[@id='gb']//a[text()='Gmail']"));
 
           //Click gmail link
           gmailLink.Click();
 
           //Wait to see the results
           System.Threading.Thread.Sleep(5000);
 
           //Driver close first instance
           driver.Quit();
 
       }


Locating By CSS

Here we will do the same steps as done above in Xpath example, instead, we will use a CSS selector


[TestMethod]
       public void Verify_Locating_By_CSS()
       {
           InternetExplorerOptions options = new InternetExplorerOptions();
           options.IntroduceInstabilityByIgnoringProtectedModeSettings = true;
           options.RequireWindowFocus = true;
 
           IWebDriver driver = new InternetExplorerDriver(options);
           driver.Url = "https://www.google.com/";
 
           //Locate Element By ID
           IWebElement gmailLink = driver.FindElement(
               By.CssSelector("div#gb a"));
 
           //Click gmail link
           gmailLink.Click();
 
           //Wait to see the results
           System.Threading.Thread.Sleep(5000);
 
           //Driver close first instance
           driver.Quit();
 
       }


Here locator div#gb means div tag with 'gb' ID attribute value
Also, if you want to find by class name then use dot(.) keyword
for example, div.cl means div tag with class value as 'cl'


Locating By Link Text

We will find the Gmail link on google home page using the link text method
[TestMethod]
        public void Verify_Locating_By_LinkText()
        {
            InternetExplorerOptions options = new InternetExplorerOptions();
            options.IntroduceInstabilityByIgnoringProtectedModeSettings = true;
            options.RequireWindowFocus = true;
 
            IWebDriver driver = new InternetExplorerDriver(options);
            driver.Url = "https://www.google.com/";
 
            //Locate Element By link text
            IWebElement gmailLink = driver.FindElement(
                By.LinkText("Gmail"));
 
            //Click gmail link
            gmailLink.Click();
 
            //Wait to see the results
            System.Threading.Thread.Sleep(5000);
 
            //Driver close first instance
            driver.Quit();
 
        }


Locating by Partial Link Text

We will find the Gmail link on google home page using the partial link text method
[TestMethod]
      public void Verify_Locating_By_PartialLinkText()
      {
          InternetExplorerOptions options = new InternetExplorerOptions();
          options.IntroduceInstabilityByIgnoringProtectedModeSettings = true;
          options.RequireWindowFocus = true;
 
          IWebDriver driver = new InternetExplorerDriver(options);
          driver.Url = "https://www.google.com/";
 
          //Locate Element By partial link text
          IWebElement gmailLink = driver.FindElement(
              By.PartialLinkText("mail"));
 
          //Click gmail link
          gmailLink.Click();
 
          //Wait to see the results
          System.Threading.Thread.Sleep(5000);
 
          //Driver close first instance
          driver.Quit();
 
      }


That's all I have for this lecture 👱


Comments

Popular posts from this blog

Specflow -Part3(Working with tables using Specflow.Assist.Dynamic)

Specflow -Part4(Specflow Scenario Outline and Feature Background )

Specflow -Part6(Specflow Hooks)