Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Screenshot given by Selenium does not match actual viewport (Google Chrome) #2536

Closed
lukeis opened this Issue Mar 3, 2016 · 8 comments

Comments

Projects
None yet
1 participant
Owner

lukeis commented Mar 3, 2016

Originally reported on Google Code with ID 2536

What steps will reproduce the problem?

Basically, I use ChromeDriver to get a screenshot of page http://www.martin-burger.net/en/?showdebug.


1. Navigate to and take screenshot of http://www.martin-burger.net/en/?showdebug via
WebDriver, i.e. instance of class ChromeDriver.
2. Get all elements of class "subcl".
3. Get location and size of each element via corresponding methods in class WebElement.
4. Draw red rectangle around each element in screenshot; the coordinates (x, y, width,
height) are directly provided by WebElement.getLocation() and WebElement.getSize()
(see step 3).

The attached Java test driver "SeleniumDriver.java" demonstrates the problem in detail
and reproducibly. 

Note: The query string "?showdebug" causes (a) a blue background for all elements of
class "subcl", and (b) the page to use jQuery's offset() method to output the dimensions
for these elements.

What is the expected output? What do you see instead?

I expect a red rectangle exactly around each one of the blue boxes. Instead, the rectangles
(a) have an offset, and (b) have a wrong size. This happens whenever I use ChromeDriver
to take a screenshot via Google Chrome. Using FirefoxDriver, the rectangles perfectly
match the blue boxes.

The dimensions given by Selenium match the ones given by jQuery. These coordinates
are correct, I checked them in the actual viewport as shown to the user via the browser
window. However, the coordinates do not match the elements in the screenshot image.
Therefore, the red rectangles do not match the blue boxes.

I assume this is caused by the way how the screenshots are taken. In Firefox, it seems
that FirefoxDriver scrolls the page down to take a screenshot. In this way, the screenshot
is taken from the actual viewport. By contrast, it seems that ChromeDriver causes Google
to re-render the page using a smaller viewport; this may be caused by some scrollbar
issues.

The attached screenshots contain a detailed diagnosis.

Selenium version: Java client 2.7.0
OS: Mac OS X 10.6.8
Browser: Google Chrome
Brower version: 15.0.874.24 beta

Reported by mburger313 on 2011-09-25 17:48:01


- _Attachment: screenshot-firefox-selenium-orig.png
![screenshot-firefox-selenium-orig.png](https://storage.googleapis.com/google-code-attachments/selenium/issue-2536/comment-0/screenshot-firefox-selenium-orig.png)_ - _Attachment: screenshot-firefox-selenium-rectangles.png
![screenshot-firefox-selenium-rectangles.png](https://storage.googleapis.com/google-code-attachments/selenium/issue-2536/comment-0/screenshot-firefox-selenium-rectangles.png)_ - _Attachment: screenshot-googlechrome-manual-viewport-1024x696.png
![screenshot-googlechrome-manual-viewport-1024x696.png](https://storage.googleapis.com/google-code-attachments/selenium/issue-2536/comment-0/screenshot-googlechrome-manual-viewport-1024x696.png)_ - _Attachment: screenshot-googlechrome-selenium-orig.png
![screenshot-googlechrome-selenium-orig.png](https://storage.googleapis.com/google-code-attachments/selenium/issue-2536/comment-0/screenshot-googlechrome-selenium-orig.png)_ - _Attachment: screenshot-googlechrome-selenium-rectangles.png
![screenshot-googlechrome-selenium-rectangles.png](https://storage.googleapis.com/google-code-attachments/selenium/issue-2536/comment-0/screenshot-googlechrome-selenium-rectangles.png)_ - _Attachment: [SeleniumDriver.java](https://storage.googleapis.com/google-code-attachments/selenium/issue-2536/comment-0/SeleniumDriver.java)_
Owner

lukeis commented Mar 3, 2016

This occasion could be perfect to fix Issue #847 "Screenshot capture is entirely untested".

Reported by mburger313 on 2011-09-25 17:57:01

@lukeis lukeis self-assigned this Mar 3, 2016

Owner

lukeis commented Mar 3, 2016

I took a screenshot using "Screen Capture (by Google)" (https://chrome.google.com/webstore/detail/cpngackimfmofbokmjmljamhdncknpmg).
There, the boxes are correct, they are of width 322 and 310, respectively. Thus, in
some way it is possible to take a correct screenshot using Google Chrome. The screenshot
image is of width 1009, but does not contain a placeholder for the scrollbar, as the
ones taken via Selenium do.

You can find the file attached to this comment.

Reported by mburger313 on 2011-09-25 18:19:37


- _Attachment: screenshot-googlechrome-screen_capture.png
![screenshot-googlechrome-screen_capture.png](https://storage.googleapis.com/google-code-attachments/selenium/issue-2536/comment-2/screenshot-googlechrome-screen_capture.png)_
Owner

lukeis commented Mar 3, 2016

Reported by dawagner on 2011-09-25 22:41:21

Owner

lukeis commented Mar 3, 2016

Reported by barancev on 2011-10-13 09:11:42

  • Labels added: Component-WebDriver
Owner

lukeis commented Mar 3, 2016

This should be fixed in an upcoming release of ChromeDriver.

Reported by kkania@google.com on 2011-11-15 18:17:19

  • Status changed: Started
Owner

lukeis commented Mar 3, 2016

This should be fixed in the latest build of chromedriver and chrome 17+.

Reported by kkania@google.com on 2012-01-12 18:58:14

  • Status changed: Fixed
Owner

lukeis commented Mar 3, 2016

Issue 2525 has been merged into this issue.

Reported by barancev on 2012-12-08 20:27:15

Owner

lukeis commented Mar 3, 2016

Reported by luke.semerau on 2015-09-17 18:13:46

  • Labels added: Restrict-AddIssueComment-Commit

@lukeis lukeis closed this Mar 3, 2016

@lukeis lukeis locked and limited conversation to collaborators Mar 4, 2016

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.