search

chenglou / node-huxley

Codeless front-end testing.
MIT License
361 stars 29 forks source link

Screenshot dimensions differ in Chrome & Firefox #42

Closed georgecrawford closed 10 years ago

georgecrawford commented 10 years ago

Hi,

Firstly, thanks for this Node port - I'm very excited about building Huxley into our workflow.

I've noticed that, in 0.6.1 and master alike, Firefox and Chrome do quite different things with screenshot dimensions:

Screensize 300x300 Chrome: 400x228, Firefox: 477x2665

Screensize 1000x600 Chrome: 1000x528, Firefox: 985x2584

Screensize 10000x10000 Chrome: 10000x898 (but image is 100% black), Firefox: 1665x1950

So, it seems that Chrome gets close to the specified dimensions. But it doesn't crop the image to the height of the content as I've seen suggested in other issues. Firefox, however, always seems to include the entire page and crops to the height of the content, ignoring the specified height, but getting kinda close on width.

I'm aware of this issue - https://github.com/facebook/huxley/issues/34 - in fact, i'm not bothered about the dimensions being a little off. However, it'd be really nice if the two browsers gave at least similar results, and if there was a way to grab the entire page in Chrome.

I've seen https://github.com/chenglou/node-huxley/issues/36, but I would certainly like to retain an option for recording the whole page. Perhaps a wildcard or other specifier in the screenSize array?

chenglou commented 10 years ago

Hi!

Selenium's screen capturing system is a mess. It accounts for the browser chrome, which differs in FF and Chrome. I've been meaning to work on this for a while now. What I'll do is to simply measure the exact amount of pixels FF and Chrome take, add those back to screenSize internally and use those values to set the browser size. Sounds good? =)

As a site note: one caveat is that for some reasons browser size can still varie ~5 pixels across different monitors. This pisses me off because it'll just invalidate the whole screenshot. But that's not too much of a problem if you use the same machine each time, e.g. with the remote recording option.

The fact that Chrome doesn't capture the whole screen is is a known issue. I think Selenium's moving toward full-screen capture (IIRC FF used to have viewport screenshot taking capabilities but it got removed?). But currently, retaining an option for whole page recording, which doesn't work in Chrome, will just create additional mess, plus, I don't want to expose #36. Fortunately, scrolling is now recorded and played back correctly, so this will no longer be a problem.

So based on that, I think the only logical solution is to always crop the screenshot to the viewport:

Tell me what you think! Btw I really dislike Selenium, but that's the only non-headless automatable solution I've found.

georgecrawford commented 10 years ago

I understand what you've written, and whilst I'd prefer a full screen capture option, if it can't be consistently provided, it's better to crop. If think you should first aim for a similar experience cross-browser. I wouldn't get too distracted by the exact pixel sizes, as users should never be comparing screenshots between browser, I wouldn't think.

Agree about Selenium, btw!

chenglou commented 10 years ago

Boom! 0.7.0 in.

Now the screenshots are all coherent. There shouldn't be any mismatch between your screenSize and the image size, for Chrome and Firefox. Went better than expected.

Closing this issue and leaving #36 open, just in case.

chenglou commented 10 years ago

Eh, just wanna notify you that 0.7.2 is out and fixes diff outputting bug. Please do upgrade!