Taking Screenshot of a Specific Web Element in Selenium

Introduction

While progressing with 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 an entire web page. However, by using some tweaks and C# techniques, I could take a 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 an 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);

The full code as a method has been given 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 any requirement to compare the images after rotation) and compare (if you want to compare two images) and use them on your automation scripts.