Selenium take element screenshot - Google Chrome

Question

I'm trying to take screenshot of a <canvas> tag element from google chrome using selenium web driver and python.

I tried using the below code,

driver.find_element_by_css('#canvas-xyz').save_screenshot('canvas.png')

It returned

AttributeError: 'WebElement' object has no attribute 'save_screenshot'

I also tried this in dev tools,

document.querySelector('#canvas-xyz').toDataURL()

It returned the following DATA URI, which is empty.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABq8AAAAhCAYAAABHnTGeAAAEQ0lEQVR4Xu3ZMREAAAwCseLfdG38kCrgUjZ2jgABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBEYJEcYhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBA445USECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIZASMV5lXCEKAAAECBAgQIECAAAECBAgQIECAAAECBAgQIGC80gECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIGMgPEq8wpBCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEjFc6QIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgkBEwXmVeIQgBAgQIECBAgAABAgQIECBAgAABAgQIECBAgIDxSgcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQyAsarzCsEIUCAAAECBAgQIECAAAECBAgQIECAAAECBAgQMF7pAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQEbAeJV5hSAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQLGKx0gQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBDICBivMq8QhAABAgQIECBAgAABAgQIECBAgAABAgQIECBAwHilAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAhkB41XmFYIQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgYr3SAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEAgI2C8yrxCEAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAeOVDhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECGQEjFeZVwhCgAABAgQIECBAgAABAgQIECBAgAABAgQIECBgvNIBAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBjIDxKvMKQQgQIECAAAECBAgQIECAAAECBAgQIECAAAECBIxXOkCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIJARMF5lXiEIAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICA8UoHCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEMgLGq8wrBCFAgAABAgQIECBAgAABAgQIECBAgAABAgQIEDBe6QABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBGwHiVeYUgBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECxisdIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQyAgYrzKvEIQAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMB4pQMECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIZAeNV5hWCECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIGK90gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICPwDiwAIhIPZYcAAAAASUVORK5CYII=

Is it possible to take screenshot of an element using chromedriver and selenium in python. I am aware that chrome dev tools allows us to take screenshot of a particular element. Even if it is a JavaScript method also i can get the data URI using driver.execute_script() command.

score 4 · Accepted Answer · answered Jun 30 '19 at 07:19

4

WebElement doesn't have save_screenshot. You can use screenshot_as_png (property) and save it

element = driver.find_element_by_css('#canvas-xyz')
scrrenshot = element.screenshot_as_png
with open('canvas.png', 'wb') as f:
    f.write(scrrenshot)

answered Jun 30 '19 at 07:19

Guy

46,488
10
44
88

Is there any reason why `element.save_screenshot('file.png')` doesn't work on chrome ? – CodeIt Jun 30 '19 at 13:35
1

@CodeIt `WebElement` doesn't have `save_screenshot()` – Guy Jun 30 '19 at 13:40
if I use find_element_by_class_name, element.screenshot_as_png doesn't work? – Self-Motivated Wu Jun 08 '21 at 08:22

score 0 · Answer 2 · answered Jun 14 '21 at 07:14

Use WebElement.screenshot()method:

def screenshot(self, 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')
    """

So, in your example, that would be:

driver.find_element_by_css('#canvas-xyz').screenshot('canvas.png')

Selenium take element screenshot - Google Chrome

2 Answers2