Difference in image quality between 'TakeScreenshot' and 'TakeElementScreenshot'

[Dean Miller]

Hi all,

I am having an issue with taking screenshots. 

Context

Per the Selenium documentation there are two endpoints (hope I am using correct terminology here) for taking screenshots:

1. TakeScreenshot  -- this takes a screenshot of the entire window. 

2. TakeElementScreenshot -- this takes a screenshot of a specific HTML element.

Issue

TakeElementScreenshot takes a lower quality screenshot than TakeScreenshot. I.e. it's pixelated. 

Please see attached examples. 

I have scoured the internet and can't find any explanation for this. 

Is this something I am doing wrong or is this expected behavior?

Thank you,

Dean

[Sir Jo]

what type of element you need to take screenshot ??

an image ??

and how you take the screenshot of the element ??
(please show me the line code)

[Dean Miller]

I don't believe there is any limit to the type of element you can take a screenshot of using TakeElementScreenshot.. for code examples, check out the documentation.. there are examples in Python, C#, Java etc: https://www.selenium.dev/documentation/webdriver/interactions/windows/#takescreenshot

[Sir Jo]

I know the documentation and the examples, and for me it works very well, if I capture the entire window or a single element, the result is the same, no problem

[Dean Miller]

Hi, thanks for your reply. I misunderstood what you were asking.

The site in question is behind a password so I've done the same for google.com and again there is a difference in image quality. The google logo for TakeElementScreenshot is pixelated compared to the screenshot of the entire page. Why does it not take them both at face value and simply screenshot the element as it appears?

See attachments.

Here is the code:

from selenium import webdriver
from selenium.webdriver.support.ui import Select
from PIL import Image

option = webdriver.ChromeOptions()
option.add_argument('--no-sandbox')
option.add_argument('--disable-dev-sh-usage')


driver = webdriver.Chrome(executable_path='/Users/dean/Programming/chromedriver', options=option)
url = 'https://www.google.com/'


driver.get(url) # Getting page HTML through request
time.sleep(3)

a = driver.find_element_by_css_selector('img.lnXdpd')
a.screenshot('TakeElementScreenshot google.png')
time.sleep(1)
driver.save_screenshot('TakeScreenshot google.png')

driver.quit()

Thank you,

Dean

[Sir Jo]

Your code is correct and your result is correct.

Run Chrome browser, navigate to http://www.google.com , move the mouse over "Google" image,
click right button on mouse and select "save image as..."
Now if you open two files "TakeElementScreenshot google.png" and "googlelogo_color_272x92dp.png" and zoom it, you will see that the two image are the same.

[Dean Miller]

I did what you suggested and the results are very different, per below with both images zoomed in twice. The bottom is clearly pixelated. 

In any case, this is beside the point -- the point being that the results from 'TakeScreenshot' and 'TakeElementScreenshot' are not the same in image quality. 

Can anyone else weigh in on this? Sir Jo I appreciate your input. 

[Dean Miller]

I have solved the issue... using Firefox instead, TakeElementScreenshot works perfectly. The problem was specific to Chrome. For whatever reason, using that method in Chrome resulted in pixelated images. Weird...