search

webdriverio-boneyard / webdrivercss

Regression testing tool for WebdriverIO v4
http://webdriver.io
MIT License
616 stars 106 forks source link

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

Open psbanka opened 9 years ago

psbanka commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

@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 commented 9 years ago

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 commented 9 years ago

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

obsidianart commented 9 years ago

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

glesperance commented 9 years ago

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

spaceribs commented 9 years ago

:+1:

scottyeck commented 9 years ago

Also having this issue :)

acvetkov commented 9 years ago

+1

elicwhite commented 9 years ago

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 commented 9 years ago

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

KevinGreene commented 8 years ago

@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 commented 7 years ago

Has there been any movement on this in the meantime?

aircon-chen commented 6 years ago

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