Introduction
While progressing with the automation testing I had a problem to take screenshots of a particular element in the web page. Selenium only allows you to take the screenshot of entire web page. But using some tweaks and c# techniques I made to take screen shot of a particular web element.
Background
This is (mostly) for those who are doing their automation testing parts using c# and selenium.
Using the code
First we need to take the screen shot of entire web page using the GetScreenShot method of selenium web driver as below.
Screenshot screenshot = ((ITakesScreenshot)this.driver).GetScreenshot();
screenshot.SaveAsFile(filename, System.Drawing.Imaging.ImageFormat.Jpeg);
Then create a rectangle from the location , height and width of the specified html element. (This has to be obtained using FindElement() method of selenium by providing id or class name).
Image img = Bitmap.FromFile(uniqueName);
Rectangle rect = new Rectangle();
if (element != null)
{
// Get the Width and Height of the WebElement using
int width = element.Size.Width;
int height = element.Size.Height;
// Get the Location of WebElement in a Point.
// This will provide X & Y co-ordinates of the WebElement
Point p = element.Location;
// Create a rectangle using Width, Height and element location
rect = new Rectangle(p.X, p.Y, width, height);
}
Using this we are going to crop the screenshot as below and the result will be the screenshot specific web element.
Bitmap bmpImage = new Bitmap(img);
var cropedImag = bmpImage.Clone(rect, bmpImage.PixelFormat);
Full code as a method below:
/// <summary> /// Captures the element screen shot. /// </summary> /// <param name="element">The element.</param> /// <param name="uniqueName">Name of the unique.</param> /// <returns>returns the screenshot image </returns> public Image CaptureElementScreenShot(HTMLElement element, string uniqueName) { Screenshot screenshot = ((ITakesScreenshot)this.driver).GetScreenshot(); screenshot.SaveAsFile(filename, System.Drawing.Imaging.ImageFormat.Jpeg); Image img = Bitmap.FromFile(uniqueName); Rectangle rect = new Rectangle(); if (element != null) { // Get the Width and Height of the WebElement using int width = element.Size.Width; int height = element.Size.Height; // Get the Location of WebElement in a Point. // This will provide X & Y co-ordinates of the WebElement Point p = element.Location; // Create a rectangle using Width, Height and element location rect = new Rectangle(p.X, p.Y, width, height); } // croping the image based on rect. Bitmap bmpImage = new Bitmap(img); var cropedImag = bmpImage.Clone(rect, bmpImage.PixelFormat); return cropedImag; }
Points of Interest
Based on your requirement you can extend the Image class and write Rotate (if you have a ny requirement to compare the images after rotation) and compare (if you want to compare two images) and use them on your automation scripts.