Selenium WebDriver WebElement Selectors

Hello friends.. 

This would be very besic topic for experianced 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 selectors.

        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. 

Please go through below links to learn HTML / CSS

HTML Tutorials

CSS Tutorials

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 

1 List<WebElement> listItems = driver.findElements(By.className("listItem"));

---

By.cssSelector

While using CssSelector we should know basics of Cascaded Style Sheets.
Please go through below links to learn HTML / CSS

HTML Tutorials

CSS Tutorials


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
   

1 List<WebElement> listItems = driver.findElements(By.cssSelector(".listItem"));

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

1 List<WebElement> 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

Link to Google
Link to Yahoo
Link to Rediff

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

1 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 www.google.com link

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

if I write below statement.

1 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 www.google.com

---

By.tagName

continued....

Best way to produce Logs in Selenium 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....

How to Handle PROXY Settings in Selenium WebDriver.

Hello friends..
Most of the time when we create any webdriver automation code using public websites like Google, Facebook, Yahoo... etc, which works very well at our home pc but not at office.
This may have various reasons. One of the reason is PROXY at your office network.
A proxy or proxy server is basically another computer which serves as a hub through which internet requests are processed. By connecting through one of these servers, your computer sends your requests to the proxy server which then processes your request and returns what you were wanting.

In this way it serves as an intermediary between your home machine and the rest of the computers on the internet. Proxies are used for a number of reasons such as to filter web content, to go around restrictions such as parental blocks, to screen downloads and uploads and to provide anonymity when surfing the internet.
To work your browser under proxy you may need below settings.

Internet Explorer Proxy Settings

• Click Tools
• Click Internet Options
• Click the Connections Tab
• Click LAN settings
• Check the “Use a proxy server for your LAN” box
• Enter the IP Address of the Proxy Server and the Port Number
• Click OK

FireFox Proxy Settings

• Click the FireFox Button(The button in the upper left corner)
• Click Options
• Click Options in the new tab
• Click the Advanced Tab
• Click Settings
• Click Manual Proxy Settings
• In the HTTP Proxy Box enter the IP Address of the proxy server and the Port number
• Click OK

Google Chrome Proxy Settings

• Click the Customize and Control Button(Button with the wrench picture in upper right corner
• Click Under the Hood
• Click Change proxy settings
• Click LAN Settings
• Check the “Use a proxy server for your LAN” box
• Enter the IP Address of the Proxy Server and the Port Number
• Click OK

Safari Proxy Settings

• Click Safari
• Click Preferences
• Click Advanced
• Click Change Settings
• Check the Web Proxy(HTTP) box
• Enter the IP Address of the Proxy Server and the Port Number
• Click Apply Now

While launching Browser by Selenium WebDriver these settings are initialized or reset. we need to add some additional code to tell WebDriver about the Proxy setting.
below code snippet is Example of setting proxy server to localhost and port 8080 for InternetExpolrerDriver. This could be apply to any WebDriver.

String PROXY = "localhost:8080";

org.openqa.selenium.Proxy proxy = new org.openqa.selenium.Proxy();
proxy.setHttpProxy(PROXY)
     .setFtpProxy(PROXY)
     .setSslProxy(PROXY);
DesiredCapabilities cap = new DesiredCapabilities();
cap.setCapability(CapabilityType.PROXY, proxy);

WebDriver driver = new InternetExplorerDriver(cap);

Many times your Network allow to set Proxy to Auto Detect mode. Below code explains how you can set the WebDriver to Auto Detect Proxy

org.openqa.selenium.Proxy proxy = new org.openqa.selenium.Proxy();
proxy.setAutodetect(true);

DesiredCapabilities cap = new DesiredCapabilities();
cap.setCapability(CapabilityType.PROXY, proxy);
WebDriver driver = new FirefoxDriver(cap);

Keep Automating..........