search

HuddleEng / PhantomCSS

Visual/CSS regression testing with PhantomJS
MIT License
4.72k stars 259 forks source link

PhantomCSS is moving the HTML elements around #189

Closed eugenefedoto closed 7 years ago

eugenefedoto commented 7 years ago

Edit: I discovered this issue is only happening with esfiddle.net.

First time doing visual regression testing.

Problem: when I use a visual regression testing tool such as PhantomCSS, the screenshots produced contain the website with dramatically moved HTML elements.

Problem image: Image of <nav> by PhantomCSS

How it should really look like:

Actual <nav>

Tools: PhantomCSS. The same problem happens with BackstopJS. URL: http://esfiddle.net/

What can I do to prevent the problem image?

jamescryer commented 7 years ago

Its because you're using the flex CSS property. Unfortunately PhantomJS doesn't support flex. Alternatives?, PhantomCSS with SlimerJS should work https://github.com/Huddle/PhantomCSS#slimerjs. I'm not sure if any VRT tooling is available for in Chrome headless yet, but worth a look. You could also try https://github.com/webdriverio/webdrivercss.