when taking screenshots with a mac, the images are incorrect
psbanka opened this issue · comments
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: 
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 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.
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
Having the same issue. The generated screenshot has the correct size, but all dom elements are twice as big.
Adding a comment to be notified, I haven't found a solution yet
We're having this problem in our team too. Older mac screenshots do not compare successfully to newer (retina) macs
👍
Also having this issue :)
+1
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.
I was trying to scale up element size to retina size but screens unfortunately still are cut.
@TheSavior Yes, scaling by window.devicePixelRatio now works just fine as the screens are no longer cut since #116. Thanks for the advice!
Has there been any movement on this in the meantime?
@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 : )