Locating WebElements Continuation.

5.    By.Tagname method:

Tag name method used when trying to find out list of web Elements  in a page, For example all the links in a web page or list of buttons or list of text boxes in a page.

 By.Tagname results more then one web element so it is correct  to use findElements() method instead of findElement() method.

For now we remember FindElements method to find out list of webelements in a page but  later we go in details difference between findElement() and findElements() as it is very import to know.

Let's see how the code looks like to find out the number of buttons present on a Google Search page.

 public class GoogleSearchPageByTagName{
 public static void main(String[] args){
 IWebDriver driver = null;      
driver = new FirefoxDriver();      
driver.Navigate().GoToUrl("http://www.google.com");     
IList<IWebElement> buttons = driver.FindElements(By.TagName("button"));     
 Console.WriteLine("the numbeers of buttons in google page"+buttons.Count());      
driver.Quit();
}
}

The above code prints a list of all the buttons available on the page that is 3 in this case.

6.    By.Class name method:

 
The className() method is used to identify the web element when html code contains an class name like below.



In the above code we can identify the WebElement by using Name or Id or Class Name
Here take Class name " gsfi".

let's try this on our Google search page. We will try to make WebDriver identify the Google Search box using its class name and search for 123selenium.blogspot.in  . To see the html code of that Search text box right click on that google search text box and select Inspect Element option and you can see the html code.

Below is the Sample code to search 123selenium.blogspot.in in Google.

public class GoogleSearchPageByClassName{
public static void main(String[] args){
IWebDriver driver = null;  
           driver = new FirefoxDriver();
           driver.Navigate().GoToUrl("https://www.google.com");
           IWebElement searchTextbox = driver.FindElement(By.ClassName("gsfi"));
           searchTextbox.SendKeys("123selenium.blogspot.in");
           driver.Quit();
}
}

7.    By. CSS Selectors method:

We can also use CSS selectors to identify a web element in web page below are the different CSS Selectors.

•  Tag and ID
•  Tag and class
•  Tag and attribute
•  Tag, class, and attribute
•  Inner text

1. Tag and ID :

In this method we  use tag name and Id of the web element in html code , For example when we have blow html code we can see the tag name and ID of Google search box.

The Syntax is: css=tag#id

In Above html code below are the Tag and Id values.

Tag =input

Id =lst-ib

So the CSS selector to use is input#Email

let's try this on our Google search page. We will try to make WebDriver identify the Google Search box using its CSS Selector Tag and Id and search for 123selenium.blogspot.in

public class GoogleSearchPageCssSelectorName{
public static void main(String[] args){
IWebDriver driver = null; 
           driver = new FirefoxDriver();
           driver.Navigate().GoToUrl("https://www.google.com");
           IWebElement SearchTextbox = driver.FindElement(By.CssSelector("input#lst-ib"));
           SearchTextbox.SendKeys("123selenium.blogspot.in");
           driver.Quit();
}
}

2. Tag and class

In this method use tag name and class name of the web element to identify a web element, For example when we have below html code you can see Tag and Class name for bing search text box .

The Syntax is : css=tag.class

In Above html code below are the Tag and Class names values.

Tag name =a

Class name =b_searchbox

So the CSS selector to use is a.need-help

let's try this on our Bling search page. We will try to make WebDriver identify the Bling Search box using its CSS Selector Tag and Class name and search for 123selenium.blogspot.in

public class GoogleSearchPageByCssSelector1{
IWebDriver driver = null; 
 driver  = new ChromeDriver(@"C:\ChromDriverSelenium");
 driver.Navigate().GoToUrl("http://www.bing.com");
 IWebElement SearchTextbox = driver.FindElement(By.CssSelector("input.b_searchbox"));
 SearchTextbox.SendKeys("123selenium.blogspot.in");
 IWebElement SearchButton = driver.FindElement(By.CssSelector("input.b_searchboxSubmit"));
 SearchButton.Click();
 driver.Quit();
}
}

3. Tag and attribute

In this method use tag name and selected attribute value of the web element to identify a web element for example when we have below html code.

        The Syntax is css=tag[attribute=value]

In Above html code below are the Tag and Class names values.

Tag name =input

Attribute name = name

Attribute value =q

So the CSS selector to use is input[name=”q”]

let's try this on our Bling search page. We will try to make WebDriver identify the Bling Search box using its CSS Selector Tag and Attribute name and search for 123selenium.blogspot.in

 public class GoogleSearchPageByCssSelector2{
 public static void main(String[] args){
 IWebDriver driver = null; 
 driver = new FirefoxDriver();
 driver.Navigate().GoToUrl("http://www.bing.com");
  IWebElement SearchTextbox = driver.FindElement(By.CssSelector("input[name=q]"));
  SearchTextbox.SendKeys("123selenium.blogspot.in");
  driver.Quit();
}
}

4.  Tag, class, and attribute

In this method use tag name,Class Name and selected attribute value of the web element to identify a web element for example when we have below html code.

The Syntax is css=tag.class[attribute=value]

In Above html code below are the Tag and Class names values.

Tag =input

Class =gsfi

Attribute name = name

Attribute value =q

So the CSS selector to use input.gsfi[name='q']

The above is html code for google search text  box after identifying the web element we enter some text to search as shown in below.

 public class GoogleSearchPageByCssSelector3{
 public static void main(String[] args){
 IWebDriver driver = null; 
 driver = new FirefoxDriver();
 driver.Navigate().GoToUrl("https://www.google.com");
 IWebElement SearchTextbox = driver.FindElement(By.CssSelector("input.gsfi[name='q']"));
 SearchTextbox.SendKeys("123selenium.blogspot.in");
 driver.Quit();
}
}

5.  Inner text

In this method use tag name and inner text of web element. 

 The Syntax is css=tag:contains("inner text")

8.    By. Xpath method:

 Before going to see the Xpath of an web element we install the firefox add –on Firebug and it’s extension Firepath.

Search google for Firebug and install it

Once installed restart the browser

When open the firefox browser after restart you can see the icon on the top right corner

Now click on that icon    to launch the Firebug which will open like below.

Now you can right click on any web element and select the option Inspect Element with Firebug will shows the html code of the element.

For example: To see the Google Search button in Google page right click on the button and select option Inspect Element with Firebug will show the below code.

 

For Google Search button we can write the Xpath as: //input[@name="btnK"]

When you write the above xpath in the Firepath it locates the html code of Google Search button as shown below.

When to use Xpath?

When html code does not have name,class name or ID to identify the web element we use Xpath. It is the complex method to identify the elements but you can identify the elements uniquely.

The only disadvantage it is cost to in terms of time as it takes more time to go inside the entire html code of the page and find the web element. 

To find out all the input tag elements try //input which shows the input type web elements

To find the button tags try:                         //button

To find out the links in page :                      //*/a

To find out the links in a div:                        //div/a

To find out the links in second div:           //div/div/a

Below is the example to find the xpath of Google search text box and search button.

            IWebDriver driver = null;  
            driver = new FirefoxDriver();
            driver.Navigate().GoToUrl("https://www.google.com");
            IWebElement SearchTextbox = driver.FindElement(By.XPath("//input[@id='lst-ib']"));
            SearchTextbox.SendKeys("123selenium.blogspot.in");
            IWebElement SearchButton = driver.FindElement(By.XPath("//button[@name='btnG']"));
            SearchButton.Click();