Selenium WebDriver WebElement Selectors

Hello friends.. 

This would be very basic topic for experienced people, but may help WebDriver new bees.

Basically whenever we interacting with Browser Application through WebDriver, we always need to identify the web-elements like Text-Box, Buttons, List, Dropdown, Menu, Link, Checkbox.. etc.

We use FindWebElement / FindWebElements method to locate/find Web-Elements, with different selector

But I will also like to mention here that as a Web-Application Tester, we should have basic knowledge of HTML & CSS, which definitely help us to take judgement on selectors to find the Web-Elements. 

go through below links to learn HTML / CSS

Below is the list of selectors provided by WebDriver.

  • By.className
  • By.cssSelector
  • By.id
  • By.linkText
  • By.name
  • By.partialLinkText
  • By.tagName
  • By.xpath

Today i am going to explain some of the listed selectors.

By.className

This Method takes Class Name as String and Finds elements based on the value of the “class” attribute of the web element.

If an element has many classes then this will match against each of them.

For example if the value is “one two onone”, then the following “className”  will match: “one” and “two”

Have a look at below html snippet which may present on any Web Page

	<div class="displaydiv">
		<div class="boldText">My List Items</div>
		<ul>
			<li>
				<div class="boldText listItem">First Item</div>
			</li>
			<li>
				<div class="boldText listItem">Second Item</div>
			</li>
			<li>
				<div class="boldText listItem">Third Item</div>
			</li>
			<li>
				<div class="boldText listItem">Fourth Item</div>
			</li>
			<li>
				<div class="boldText listItem">Fifth Item</div>
			</li>
		</ul>
	</div> 
	

If we want to select all list items from the list, by using ByClassName Selector, we should use class “listItem” because “bolderText” class is also applied to List header.

So in this case our WebDriver selector statement will look as follow 

		List listItems = driver.findElements(By.className("listItem"));
	

By.cssSelector

While using CssSelector we should know basics of Cascaded Style Sheets.

go through below links to learn HTML / CSS

Let’s have some basics on the css.

  •     .(dot) is used for selecting the elemnts having the specified css class
  •     #(hash) is used for selecting the element having specified Id
  •     we can directly add Tag Name to select all the specified tags in the web page.

so for above given example we are selecting element by class name so our selector statement will be

		List listItems = driver.findElements(By.cssSelector(".listItem"));
	

we can also use below syntax if we have the single list in whole web page

		List listItems = driver.findElements(By.cssSelector("li div"));
	

here selector finds div whch are chield of li directly by tag name of web element


By.id &By.name

These two selectors are quite simple and straight forward as they are.By.id selector selects the element having specified id and similarly By.name selectors selects the web element having specified name.


By.linkText

This Selector used to select the anchors(Links) from the web-page.

It selects the link on the basis of the text contains by the link. consider below HTML snippet

	<div>
		<a id='myLink' href='http://www.google.com'> Link to Google</a><br/>
		<a id='myLink' href='http://www.yahoo.com'> Link to Yahoo</a><br/>
		<a id='myLink' href='http://www.rediff.com'> Link to Rediff</a>
	</div>
	

above code will render on web-page like below

Now to click the link of http://www.yahoo.com with linkText selector below statement needed

		driver.findElement(By.linkText("Link to Yahoo")).click();
	

By.partialLinkText

As selector name it self suggests, it can select the Anchors(Links) by it’s partial text.

lets consider previous HTML snippet, if i want to select any link with partialLinkText selector, I need to give partial text of the link, check below snippet which will select the http://www.google.com link

		driver.findElement(By.partialLinkText("Google")).click();
	

if I write below statement.

		driver.findElement(By.partialLinkText("Link")).click();
	

it will point to all links, as all links are having text “Link”, but as we are using .findWebElement  so it will point to first link in DOM, that is link to http://www.google.com


By.tagName

continued….

Advertisements

Generate Logs with Event Firing WebDriver

Hello Friends
While coding, it is very tedious task to create Log for each statement, although it is very helpful while digging the failures.
Logs are also very helpful for detailed investigation of failures and Exceptions. Recently, someone asked how to have Selenium Web-driver create Log if an exception is thrown. Here is how you do it
Normally you use following code to initializing Web-Driver

WebDriver driver;
driver= new InternetExplorerDriver();

You need to Slightly Modify your Code as below

WebDriver driver;
WebDriverEventListner eventListner = new MyEventListner();
driver = new EventFiringWebDriver(new InternetExplorerDriver()).register(eventListner);

And you need to add MyEventListener Class in your project and below is the the code of MyEventListener.java

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.events.WebDriverEventListener;

public class MyEventListener implements WebDriverEventListener {
  public void beforeNavigateTo(String url, WebDriver driver) {
     // TODO Auto-generated method stub
  }
  public void afterNavigateTo(String url, WebDriver driver) {
    // TODO Auto-generated method stub
  }
  public void beforeNavigateBack(WebDriver driver) {
       // TODO Auto-generated method stub
  }
  public void afterNavigateBack(WebDriver driver) {
       // TODO Auto-generated method stub
  }
  public void beforeNavigateForward(WebDriver driver) {
       // TODO Auto-generated method stub
  }
  public void afterNavigateForward(WebDriver driver) {
       // TODO Auto-generated method stub
  }
  public void beforeFindBy(By by, WebElement element, WebDriver driver) {
       // TODO Auto-generated method stub
  }
  public void afterFindBy(By by, WebElement element, WebDriver driver) {
       // TODO Auto-generated method stub
  }
  public void beforeClickOn(WebElement element, WebDriver driver) {
       // TODO Auto-generated method stub
  }
  public void afterClickOn(WebElement element, WebDriver driver) {
       // TODO Auto-generated method stub
  }
  public void beforeChangeValueOf(WebElement element, WebDriver driver) {
       // TODO Auto-generated method stub
  }
  public void afterChangeValueOf(WebElement element, WebDriver driver) {
       // TODO Auto-generated method stub
  }
  public void beforeScript(String script, WebDriver driver) {
       // TODO Auto-generated method stub
  }
  public void afterScript(String script, WebDriver driver) {
       // TODO Auto-generated method stub
  }
  public void onException(Throwable throwable, WebDriver driver) {
       // TODO Auto-generated method stub
  }
}

This is it….. now just add the code for logging for events which you want to…. and will create the log automatically

And to take Screen shot on Each Exception you can add your screen shot code in Method onException();

Be happy… Keep Automating….