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
- 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();
}
}
- 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();
}
}
- 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();
}
}
- 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();
}
}
- 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();
