Capture screen shot of partial web page using selenium webdriver

As we generally takes screen shot of entire web page when script fails but some times web pages are too big and it may be difficult to track that particular web element due to which error occurred, here I am going to show you that how to capture screen shot of partial web page where the error is occurred and how to highlight the web element in the screen shot due to which script failed.

Capture screen shot of partial web page :

Scenario :

1) Launch http://automate-apps.com/how-to-select-an-option-from-a-drop-down-using-selenium-web-driver/
2) Capture the screen shot of partial web page and only covers the area around “Month” drop down in a web page.
3) High light the “Month” drop down by Red color in screen shot. (It makes your screen shot more impressive).
4) Close browser

Program

import java.awt.Rectangle;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.concurrent.TimeUnit;
import javax.imageio.ImageIO;
import org.apache.commons.io.FileUtils;
import org.junit.*;
import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.Point;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;

public class TakeScreenShotOfPartialWebPage {
     WebDriver driver;
     WebElement element ;

     @Before
     public void setUp() {
         driver = new FirefoxDriver();
         driver.get("http://automate-apps.com/how-to-select-an-option-from-a-drop-down-using-selenium-web-driver/");
         driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
         driver.manage().window().maximize();
     }
    @Test
    public void testApp() throws InterruptedException, IOException {

        //Search for drop down
        element = driver.findElement(By.id("month"));

        //highlight drop down element by red color
        ((JavascriptExecutor)driver).executeScript("arguments[0].style.border='3px solid red'", element);

        // Take screen shot of whole web page
        File screenShot = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);

        // Calculate the width and height of the drop down element
        Point p = element.getLocation();
        int width = element.getSize().getWidth();
        int height = element.getSize().getHeight();

        // Create Rectangle
        Rectangle rect = new Rectangle(width + 600, height + 600);

        BufferedImage img = null;
        img = ImageIO.read(screenShot);

        //Crop Image of partial web page which includes the "Month" drop down web element
        BufferedImage dest = img.getSubimage(p.getX()-300, p.getY()-300, rect.width, rect.height);

        // write cropped image into File Object
        ImageIO.write(dest, "png", screenShot);

        //Copy Image into particular directory
        FileUtils.copyFile(screenShot,
                new File("D:/Recordings/partialWebPage.png"));
    }
     
    @After
    public void tearDown() {
        driver.quit();
    }


}

Screen shot would be look like :

Mouse-Hover



If you really like the information provided above, please don’t forget to like us on Facebook, you can also leave the comment.

Leave a Reply

Your email address will not be published. Required fields are marked *