How to screenshot a specified WebElement in Selenium using Python

Question

I want to screenshot an element in Selenium, according to the document, each WebElement has a function:

screenshot(filename)

Saves a screenshot of the current element to a PNG image file. Returns False if there is any IOError, else returns True. Use full paths in your filename.

Args: filename: The full path you wish to save your screenshot to. This should end with a .png extension

Usage: element.screenshot(‘/Screenshots/foo.png’)

However, when I use this function in my program:

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from time import sleep


url='http://www.google.com'
browser = webdriver.Chrome()  
browser.get(url)
content = browser.find_element_by_id('searchform')
content.screenshot('/home/ding/Pictures/shot.png')

It raise error like this:

Traceback (most recent call last):

  File "<ipython-input-8-309cb404878d>", line 11, in <module>
    content.screenshot('/home/ding/Pictures/shot.png')

  File "/home/ding/anaconda3/lib/python3.6/site-packages/selenium/webdriver/remote/webelement.py", line 453, in screenshot
    png = self.screenshot_as_png

  File "/home/ding/anaconda3/lib/python3.6/site-packages/selenium/webdriver/remote/webelement.py", line 435, in screenshot_as_png
    return base64.b64decode(self.screenshot_as_base64.encode('ascii'))

  File "/home/ding/anaconda3/lib/python3.6/site-packages/selenium/webdriver/remote/webelement.py", line 425, in screenshot_as_base64
    return self._execute(Command.ELEMENT_SCREENSHOT)['value']

  File "/home/ding/anaconda3/lib/python3.6/site-packages/selenium/webdriver/remote/webelement.py", line 501, in _execute
    return self._parent.execute(command, params)

  File "/home/ding/anaconda3/lib/python3.6/site-packages/selenium/webdriver/remote/webdriver.py", line 308, in execute
    self.error_handler.check_response(response)

  File "/home/ding/anaconda3/lib/python3.6/site-packages/selenium/webdriver/remote/errorhandler.py", line 165, in check_response
    raise exception_class(value)

WebDriverException: unknown command: session/efbca24571c5332230f4d032ae04787c/element/0.7487814861441955-1/screenshot

How can I solve this and take a screenshot of an element using Selenium in Python?

Answer 1

This Code works perfectly for taking screenshot of a particular element in Firefox browser.

from selenium import webdriver
import io
from PIL import Image

fox = webdriver.Firefox()
fox.get('http://stackoverflow.com/')
image = fox.find_element_by_id('hlogo').screenshot_as_png
imageStream = io.BytesIO(image)
im = Image.open(imageStream)
im.save(image_path)

Answer 2

You need to replace the screenshot with save_screenshot method. So

Instead of :

content.screenshot('/home/ding/Pictures/shot.png')

Use :

content.save_screenshot('/home/ding/Pictures/shot.png')

Answer 3

Importing additional libraries to write a file seems silly to me...

Use the built-in open:

button_element = self._driver.find_element_by_class_name("a-button-input")
with open("element.png", "wb") as elem_file:
    elem_file.write(button_element.screenshot_as_png)

Amazon Element Output:

Answer 4

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from time import sleep


url="http://www.google.com"
browser = webdriver.Chrome("c:\chrome\chromedriver.exe")
browser.get(url)
browser.find_element_by_id('searchform')
browser.save_screenshot("C://Demo//shot.png")