New issue

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

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

when taking screenshots with a mac, the images are incorrect #52

Open
psbanka opened this Issue Jan 26, 2015 · 14 comments

Comments

Projects
None yet
@psbanka

psbanka commented Jan 26, 2015

Thanks for all your work on this library. I love webdrivercss! In fact, I am working on an effort to replace all our phantomcss tests with webdrivercss. In addition, I am planning to give a talk to our local JavaScript meetup about this great project!

One oddity I am finding is that if I run webdriverio with webdrivercss on our (Linux-based) continuous-integration system, the screen-capture works flawlessly. However, if I run the same suite of tests on a mac (with a retina display), I find that the images produced by webdrivercss are the correct size but are oddly scaled and inappropriate. (FWIW, I have often found that other screen-capture with a retina display can produce similar oddly-scaled images for other applications).

Is there a work-around for this problem? I'd be happy to provide a pull-request if you might point me toward where in the code the issue might lay?

Thanks!

On linux: appsdropdown appspopover regression
on a mac: appsdropdown appspopover baseline

on linux: navbar dialogbody regression
on a mac: navbar dialogbody baseline

@psbanka

This comment has been minimized.

Show comment
Hide comment
@psbanka

psbanka Jan 27, 2015

I have confirmed that this is related to the retina display only. If I use (only) an external display on a Macbook pro, screenshots come out the same as they do on any other platform.

psbanka commented Jan 27, 2015

I have confirmed that this is related to the retina display only. If I use (only) an external display on a Macbook pro, screenshots come out the same as they do on any other platform.

@christian-bromann

This comment has been minimized.

Show comment
Hide comment
@christian-bromann

christian-bromann Jan 27, 2015

Contributor

@psbanka thank you so much for your kind words!

Selenium seems to create a way bigger image on retina displays than on normal screens. I had similar problems when working on mobile support (iPhone/iPad). Still haven't figured out what's the best way to tackle that problem. I probably need to resize the image down to the actual document size but then I loose valuable information of the screenshot. Other way would be to scale up the element boundaries. Both ways need to get tested and evaluated.

Contributor

christian-bromann commented Jan 27, 2015

@psbanka thank you so much for your kind words!

Selenium seems to create a way bigger image on retina displays than on normal screens. I had similar problems when working on mobile support (iPhone/iPad). Still haven't figured out what's the best way to tackle that problem. I probably need to resize the image down to the actual document size but then I loose valuable information of the screenshot. Other way would be to scale up the element boundaries. Both ways need to get tested and evaluated.

@TheSavior

This comment has been minimized.

Show comment
Hide comment
@TheSavior

TheSavior Jan 28, 2015

Contributor

Does window.devicePixelRatio help? Figuring out the size and location of an element by scaling up like this: element.offsetWidth * window.devicePixelRatio. https://developer.mozilla.org/en-US/docs/Web/API/Window.devicePixelRatio

Contributor

TheSavior commented Jan 28, 2015

Does window.devicePixelRatio help? Figuring out the size and location of an element by scaling up like this: element.offsetWidth * window.devicePixelRatio. https://developer.mozilla.org/en-US/docs/Web/API/Window.devicePixelRatio

@jhnns

This comment has been minimized.

Show comment
Hide comment
@jhnns

jhnns Mar 4, 2015

Having the same issue. The generated screenshot has the correct size, but all dom elements are twice as big.

jhnns commented Mar 4, 2015

Having the same issue. The generated screenshot has the correct size, but all dom elements are twice as big.

@obsidianart

This comment has been minimized.

Show comment
Hide comment
@obsidianart

obsidianart Apr 19, 2015

Adding a comment to be notified, I haven't found a solution yet

obsidianart commented Apr 19, 2015

Adding a comment to be notified, I haven't found a solution yet

@glesperance

This comment has been minimized.

Show comment
Hide comment
@glesperance

glesperance Apr 21, 2015

We're having this problem in our team too. Older mac screenshots do not compare successfully to newer (retina) macs

glesperance commented Apr 21, 2015

We're having this problem in our team too. Older mac screenshots do not compare successfully to newer (retina) macs

@spaceribs

This comment has been minimized.

Show comment
Hide comment
@spaceribs

spaceribs commented Jul 31, 2015

👍

@scottyeck

This comment has been minimized.

Show comment
Hide comment
@scottyeck

scottyeck Aug 28, 2015

Also having this issue :)

scottyeck commented Aug 28, 2015

Also having this issue :)

@acvetkov

This comment has been minimized.

Show comment
Hide comment
@acvetkov

acvetkov commented Sep 4, 2015

+1

@TheSavior

This comment has been minimized.

Show comment
Hide comment
@TheSavior

TheSavior Sep 4, 2015

Contributor

Someone should really try experimenting by scaling the crop rectangle by window.devicePixelRatio and see if that just solves this outright. I'm guessing it will.

Contributor

TheSavior commented Sep 4, 2015

Someone should really try experimenting by scaling the crop rectangle by window.devicePixelRatio and see if that just solves this outright. I'm guessing it will.

@levkivskii

This comment has been minimized.

Show comment
Hide comment
@levkivskii

levkivskii Sep 8, 2015

I was trying to scale up element size to retina size but screens unfortunately still are cut.

levkivskii commented Sep 8, 2015

I was trying to scale up element size to retina size but screens unfortunately still are cut.

@KevinGreene

This comment has been minimized.

Show comment
Hide comment
@KevinGreene

KevinGreene Mar 30, 2016

@TheSavior Yes, scaling by window.devicePixelRatio now works just fine as the screens are no longer cut since #116. Thanks for the advice!

KevinGreene commented Mar 30, 2016

@TheSavior Yes, scaling by window.devicePixelRatio now works just fine as the screens are no longer cut since #116. Thanks for the advice!

@rasenplanscher

This comment has been minimized.

Show comment
Hide comment
@rasenplanscher

rasenplanscher Apr 21, 2017

Has there been any movement on this in the meantime?

rasenplanscher commented Apr 21, 2017

Has there been any movement on this in the meantime?

@Airc0n

This comment has been minimized.

Show comment
Hide comment
@Airc0n

Airc0n Feb 8, 2018

@TheSavior thanks , I find out the solution from your tip.
In my code, I use selenium screenshot full page for chrome and firefox.
I Use the stitch way fulfill my requirement, and the results are incorrect like you mention.
And I resize the screenshot by divide my device ratio. it works perfectly.
thanks : )

Airc0n commented Feb 8, 2018

@TheSavior thanks , I find out the solution from your tip.
In my code, I use selenium screenshot full page for chrome and firefox.
I Use the stitch way fulfill my requirement, and the results are incorrect like you mention.
And I resize the screenshot by divide my device ratio. it works perfectly.
thanks : )

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