1489191 - "WebDriver:TakeScreenshot" for element doesn't take scroll position into account

Status: NEW

(Remote Protocol :: Marionette, defect, P3)

Description

[matt]

Attachment: imagebug.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

Steps to reproduce:

Firefox Version: 62.0 (64bit)
Platform: Windows 10 64bit
Gecko Driver: v0.21.0

Using geckodriver navigate to the "imagebug.html" page. Then using the screenshot element command, screenshot the two image elements on the page and save them to a file somewhere.

NOTE: The images were scrolled into view.

From what I have seen, the image size, or image itself doesn't affect this. It seems to do with what divs or elements are around the image when trying to screenshot it.


Actual results:

You should get a yellow square in each of the images saved instead of the images on the page.


Expected results:

What should have happened is you should have gotten a screenshot of the images, not the yellow square. If you remove the first div in the html page, the one that is the yellow square and then try again, you will get a screenshot of the images. So interesting that this happens. I've looked through the capture js code in Marionette but I didn't see anything obvious.

Thanks.

Comment 1

[u554753]

Setting component as Testing: Marionette. Please correct if this is not the right component. Thanks.

Comment 2

[Andreas Tolfsen ❲:ato❳]

Can you please provide a geckodriver trace-level log?
https://firefox-source-docs.mozilla.org/testing/geckodriver/geckodriver/TraceLogs.html

Comment 3

[matt]

(In reply to Andreas Tolfsen ❲:ato❳ from comment #2)
> Can you please provide a geckodriver trace-level log?
> https://firefox-source-docs.mozilla.org/testing/geckodriver/geckodriver/
> TraceLogs.html

Sure thing, here is the gecko driver trace log. Note: I used JS to scroll the element into view, I find that if I don't do this screenshots tend to not work. That might be another bug to look at, not sure.

1536765189287   geckodriver     INFO    geckodriver 0.21.0
1536765189292   webdriver::httpapi      DEBUG   Creating routes
1536765189315   geckodriver     INFO    Listening on 127.0.0.1:54959
1536765192244   webdriver::server       DEBUG   -> POST /session {"capabilities": {
                    "alwaysMatch": {
                        "acceptInsecureCerts": false,"moz:firefoxOptions":{"prefs":{}}}}}
1536765192259   mozrunner::runner       INFO    Running command: "C:\\Program Files\\Mozilla Firefox\\firefox.exe" "-marionette" "-foreground" "-no-remote" "-profile" "C:\\Users\\Matt\\AppData\\Local\\Temp\\rust_mozprofile.sgJi5BV97Qe4"
1536765192264   geckodriver::marionette DEBUG   Waiting 60s to connect to browser on 127.0.0.1:50299
1536765194367   geckodriver::marionette DEBUG   Connected to Marionette on 127.0.0.1:50299
1536765194405   webdriver::server       DEBUG   <- 200 OK {"value": {"sessionId":"52690c9f-63d6-4e5f-a480-f12684c2658b","capabilities":{"acceptInsecureCerts":false,"browserName":"firefox","browserVersion":"62.0","moz:accessibilityChecks":false,"moz:headless":false,"moz:processID":19992,"moz:profile":"C:\\Users\\Matt\\AppData\\Local\\Temp\\rust_mozprofile.sgJi5BV97Qe4","moz:useNonSpecCompliantPointerOrigin":false,"moz:webdriverClick":true,"pageLoadStrategy":"normal","platformName":"windows_nt","platformVersion":"10.0","rotatable":false,"timeouts":{"implicit":0,"pageLoad":300000,"script":30000}}}}
1536765195466   webdriver::server       DEBUG   -> POST /session/52690c9f-63d6-4e5f-a480-f12684c2658b/url {"url": "http:\/\/localhost\/firefox\/imagebug.html"}
1536765195736   webdriver::server       DEBUG   <- 200 OK {"value": null}
1536765195737   webdriver::server       DEBUG   -> POST /session/52690c9f-63d6-4e5f-a480-f12684c2658b/element {"using":"tag name","value": "img"}
1536765195748   webdriver::server       DEBUG   <- 200 OK {"value":{"element-6066-11e4-a52e-4f735466cecf":"d65526de-8bfd-4aa4-81ff-b642e41b2597"}}
1536765195751   webdriver::server       DEBUG   -> GET /session/52690c9f-63d6-4e5f-a480-f12684c2658b/element/d65526de-8bfd-4aa4-81ff-b642e41b2597/name
1536765195755   webdriver::server       DEBUG   <- 200 OK {"value":"img"}
1536765195756   webdriver::server       DEBUG   -> POST /session/52690c9f-63d6-4e5f-a480-f12684c2658b/execute/sync
            {
                "script": "arguments[0].scrollIntoView(true)",
                "args":
                        [{
                            "ELEMENT": "d65526de-8bfd-4aa4-81ff-b642e41b2597"
                        }]
            }

1536765195773   webdriver::server       DEBUG   <- 200 OK {"value":null}
1536765195774   webdriver::server       DEBUG   -> GET /session/52690c9f-63d6-4e5f-a480-f12684c2658b/element/d65526de-8bfd-4aa4-81ff-b642e41b2597/screenshot
1536765195821   webdriver::server       DEBUG   <- 200 OK {"value":"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"}

Comment 4

[Henrik Skupin [:whimboo][⌚️UTC+1]]

Please note that the dimensions of the screenshot match those from the target element, but the position doesn't take the current scroll position of the window into account. The yellow box has a height of 2048px but the rect we screenshot is:

> rect.left: 33
> rect.top: 617
> rect.width: 256
> rect.height: 256

The fix is to add `win.pageXOffset` and `win.pageYOffset` to:
https://dxr.mozilla.org/mozilla-central/rev/2a59b432d2bd9b15ceec6b9435f60c785a820ef2/testing/marionette/capture.js#53-54