How to get the screenshot of a particular element in the page in Selenium with python?

We can get the screenshot of a particular element in a page in Selenium. While executing any test cases, we might encounter failures for a particular. To pinpoint the failure of a specific element we try to capture a screenshot where the error exists.

In an element, there may be errors for reasons listed below −

• If the assertion does not pass.
• If there are sync issues between our application and Selenium.
• If there are timeout issues.
• If an alert appears in between.
• If the element cannot be identified with the locators.
• If the actual and final results are not matching.

For capturing the screenshot, save_screenshot() method is available. This method takes the full page screenshot.

There is no in built method to capture an element. To achieve this we have to crop the image of the full page to the particular size of the element.

Syntax

driver.save_screenshot('screenshot_t.png')

In the arguments, we have to provide the screenshot file name along with the extension of .png. If anything else is used as extension, a warning message will be thrown and the image cannot be viewed.

The screenshot gets saved in the same path of the program.

Here we need to crop the image with the help of location and size methods in Webdriver. For doing so we need to import a PIL imaging library. It may or may not be a part of the standard libraries. However if it is unavailable, it can be installed with pip install Pillow command.

Every element has a unique location measured by the (x, y) co-ordinates. The location method gives two values – x and y coordinates of the element.

Every element has a dimension defined by its height and width. These values are obtained by size method, which gives two values - height and width of the element.

Now for cropping the image.

# to get the axes
ax = location['x'];
ay = location['y'];
width = location['x']+size['width'];
height = location['y']+size['height'];
# to compute the cropped image dimension
cropImage = Image.open('screenshot_t.png')
cropImage = cropImage.crop((int(ax), int(ay), int(width), int(height)))
cropImage.save('cropImage.png')

Example

Code Implementation for capturing a particular element screenshot.

from selenium import webdriver
from PIL import Image
#browser exposes an executable file
#Through Selenium test we will invoke the executable file which will then
#invoke actual browser
driver = webdriver.Chrome(executable_path="C:\chromedriver.exe")
# to maximize the browser window
driver.maximize_window()
#get method to launch the URL
driver.get("https://www.tutorialspoint.com/index.htm")
#to refresh the browser
driver.refresh()
# identifying the element to capture the screenshot
s= driver.find_element_by_xpath("//input[@class='gsc-input']")
# to get the element location
location = s.location
# to get the dimension the element
size = s.size
#to get the screenshot of complete page
driver.save_screenshot("screenshot_tutorialspoint.png")
#to get the x axis
x = location['x']
#to get the y axis
y = location['y']
# to get the length the element
height = location['y']+size['height']
# to get the width the element
width = location['x']+size['width']
# to open the captured image
imgOpen = Image.open("screenshot_tutorialspoint.png")
# to crop the captured image to size of that element
imgOpen = imgOpen.crop((int(x), int(y), int(width), int(height)))
# to save the cropped image
imgOpen.save("screenshot_tutorialspoint.png")
#to close the browser
driver.close()