Taking Full page screenshot of Web page using Selenium Webdriver

While executing a testcase, if the testcase fails, then we need to take a screenshot of the page for error reporting. This can also be done by using Selenium Webdriver.
We can use the following syntax  for capturing and saving full page screenshot.
File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);

Then it can be stored in our local drive using the following syntax
FileUtils.copyFile(screenshot, new File(“D:\\screenshot.png”));

Now, here is the small example of webdriver script by which we can capture the full page screenshot.

package Screenshot;
import java.io.File;
import java.util.concurrent.TimeUnit;

import org.apache.commons.io.FileUtils;
import org.openqa.selenium.By;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class FullPage_Screenshot {

    public static void main(String[] args) throws Exception {

        WebDriver driver = new FirefoxDriver(); 
         
        try{
            driver.get("http://google.co.in"); 
            driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
            driver.manage().window().maximize();
            
            //driver.findElement(By.xpath("//input[@id='gbqfq']")).sendKeys("test");
            driver.findElement(By.xpath("//input[@id='gbqfq1']")).sendKeys("test");
            System.out.println("Entered data in textfield");    
        }   
        catch (Exception e) 
        {  
            File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);  
            FileUtils.copyFile(scrFile, new File("D:\\screenShot1.png"));
            System.out.println("Screenshot is captured for failed testcase");
        }  
    }  
}

// driver.findElement(By.xpath(“//input[@id=’gbqfq’]”)).sendKeys(“test”);

If we execute this statement, then we can enter data into the text field and the testcase will pass. So, it will not take the screenshot.

So, I  have commented out the correct statement so that the testcase will fail and screenshot will be captured.

Hope this will help you 🙂

Perform Drag and Drop of Elements using Selenium Webdriver

In this post, i will give a simple example of script which will perform drag and drop operation of elements

Lets take an example of the site ‘http://jqueryui.com/droppable’
Here we can see 2 elements. One is draggable which is called the Source element. It will be dragged from one location and dropped in another location which is called Target.

There are different ways to write the script for drag and drop. I will describe few ways i have tried.

1st way:
act.dragAndDrop(Source, Target).build().perform();

2nd way:
act.clickAndHold(From).build().perform();
act.moveToElement(To).build().perform();
act.release(To).build().perform();

3rd way:
act.dragAndDropBy(Source, xoffset, yoffset).perform();

Write the following code into Eclipse IDE and then run the script.

package JqueryPackage;
import java.io.IOException;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;

public class JqueryElements {

    public static void main(String[] args) {

    WebDriver driver = new FirefoxDriver();
    driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
    driver.get(“http://jqueryui.com/droppable/#default”);
    driver.manage().window().maximize();

    Actions act = new Actions(driver);

    // Script for dragging an element and dropping it in another place
    WebElement iFrame = driver.findElement(By.tagName(“iframe”));
    System.out.println(iFrame.getSize());
    driver.switchTo().frame(iFrame);

    WebElement From = driver.findElement(By.id(“draggable”));
    System.out.println(From.getLocation());

    WebElement To = driver.findElement(By.id(“droppable”));
    System.out.println(To.getLocation());

    act.dragAndDrop(From, To).build().perform();

    }
}

We can replace the last line by any one of the following codes to perform the drag and drop.

act.clickAndHold(From).build().perform();
act.moveToElement(To).build().perform();
act.release(To).build().perform();

OR

act.dragAndDropBy(From, 140, 18).perform();

Here 140 and 8 are the x and y offset of the target element.
We can find the location of the element by using the getLocation() method

Hope this will help 🙂

Types of Locators to identify the WebElements

A web page consists of set of different web elements. We need to know what are the different elements on a web page and then how to locate the web elements.

Here are some common web elements we encounter most of the time while automating the web page.
Text box
Drop-down List
Checkbox
Radio button
Hyperlink
TextArea
Image
Button
Window

An element locator is simply a method for finding an element on the web page.
We can use the following locators based on priority to identify the elements on the web page.
– Locating By Id
– Locating By Name
– Locating By Class
– Locating Hyperlinks by LinkText
– Locating By Xpath
– Locating By CSS

Steps to find the element locator for the web element:
-> Search for the locator which will find the element by ID or proceed to the next step.
-> Search for the locator which will find the element by Name or proceed to the next step.
-> Search for the locator which will find the element by Class or proceed to the next step.
-> Search for the locator which will find the element by LinkText or proceed to the next step.
-> Search for the locator which will find the element by XPath or proceed to the next step.
-> Search for the locator which will find the element by CSS or proceed to the next step.

While following the above steps to locate elements, a question may come to our mind that why there are so many types of locators instead of any one to identify the elements.

Element Locator is a way of finding the HTML element on the web page. Every HTML element on the page we are testing with Selenium will have a unique Name or ID that we can always refer to. But, usually we are doing black box testing and have no access to the developer’s code and there is difficulty in finding the correct elements due to absence of unique identifier like Name or ID. Also, there are some web applications which recreates the element ID each time dynamically when the application is run. In this case, it is very difficult to handle if we depend on only one type of locator.

Some basic syntax for different locators:
1. By ID:
driver.findElement(By.id(“element id”))

2. By NAME:
driver.findElement(By.name(“element name”))

3. By CLASS:
driver.findElement(By.className(“element class”))

4. By Link:
driver.findElement(By.link(“link text”))

5. By XPath:
driver.findElement(By.xpath(“xpath expression”))

6. By CSS Selector:
driver.findElement(By.cssSelector(“css selector”))

These locators can be identified by using Firebug and Firepath plugins in Firefox Browser

Create and Execute your first Webdriver script using Eclipse

I have already posted in my last blog how to install and Configure Webdriver using Eclipse and Java. Now, its time to write the Java code for your testcase of the web application. I will give one simple example of creating a webdriver script with explanation in the form of comments.

For this, we need to write the following code into Eclipse.

package MyPackage;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class MyClass {

    public static void main(String[] args) {
        WebDriver driver = new FirefoxDriver();  //Create a new instance of Firefox Browser
        driver.get("https://www.google.co.in/"); //Open the URL in firefox browser
        driver.manage().window().maximize(); //Maximize the Browser window
        String str = driver.getCurrentUrl(); //Get the current page URL and store the value in variable 'str'
        System.out.println("The current URL is " + str); //Print the value of variable in the console
    }
}

Now, click on the Run Menu of the Eclipse window to execute the script.

As an output, It will open the firefox browser , maximize the browser window, get the current page URL and print the value in the Console.