when taking screenshots with a mac, the images are incorrect

[psbanka]

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: on a mac:

on linux: on a mac:

[psbanka]

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]

@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.

[elicwhite]

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]

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

[obsidianart]

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

[glesperance]

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

[spaceribs]

:+1:

[scottyeck]

Also having this issue :)

[acvetkov]

+1

[elicwhite]

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]

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

[KevinGreene]

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

[c-vetter]

Has there been any movement on this in the meantime?

[aircon-chen]

@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 : )