Take screenshot - and mark an element

In this post , let's see how to take screenshot of an entire page and mark a particular field , with a rectangular blue mark.

import java.awt.BasicStroke;

import java.awt.Color;

import java.awt.Graphics2D;

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.openqa.selenium.By;

import org.openqa.selenium.Dimension;

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 MarkScreenshotDemo {

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

WebDriver driver = new FirefoxDriver();

driver.get("http://www.babyoye.com/c/Cribs-&-Cradles");

driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);

File scrFile = ((TakesScreenshot) driver)

.getScreenshotAs(OutputType.FILE);

BufferedImage image = ImageIO.read(scrFile);

Graphics2D graphics = image.createGraphics();

  //This is the search box on top

WebElement we = driver.findElement(By.name("q"));

  //To get the position and dimension of the element

int x = we.getLocation().getX();

int y = we.getLocation().getY();

int width = we.getSize().getWidth();

int height = we.getSize().getHeight();

System.out.println("Drawing rectangle at " + x + ", " + y + ", "

+ width + ", " + height);

  //The colour for the rectangle which is to be drawn around the element

graphics.setColor(Color.BLUE);

  //Thickness of each side of the rectangle

graphics.setStroke(new BasicStroke(10.0f));

  //To draw the rectangle around the element

graphics.drawRect(x, y, width, height);

  //Path to save the screenshot

ImageIO.write(image, "png", new File(System.getProperty("user.dir"),

"\\Screenshot\\" + "babyoye.png"));

System.out.println("Screenshot taken");

driver.quit();

}

}

This is the screenshot taken :

In this screenshot,the search box on top has been marked with a rectangle as per the colour and thickness mentioned in the program.

Pay It Forward

DR