Huxley, an app that helps fight CSS and UI regression(github.com)
github.com
Huxley, an app that helps fight CSS and UI regression
https://github.com/facebook/huxley
11 comments
Nifty project. It'd be nice to add in automated analysis and make it a full Web Consistency Testing tool (disclaimer: a project I work on a lot): http://webconsistencytesting.com/
The three major problems with screenshot based tools are: 1) hard to adapt to acceptable levels of element shifting; 2) hard to extract semantic understanding of what broke; and 3) if it's not automated and you test a lot of pages in a lot of browsers, they simply won't get compared. But adapting this shouldn't be too hard.
The three major problems with screenshot based tools are: 1) hard to adapt to acceptable levels of element shifting; 2) hard to extract semantic understanding of what broke; and 3) if it's not automated and you test a lot of pages in a lot of browsers, they simply won't get compared. But adapting this shouldn't be too hard.
Why Resemble.js instead of http://pdiff.sourceforge.net/ ? Here's a presentation from a Google team using pdiff for front-end continuous deployment: http://www.youtube.com/watch?v=UMnZiTL0tUc
The project for that is here:
https://github.com/bslatkin/dpxdt
[deleted]
Looks quite awesome! It would be helpful to include some installation instructions for those of us unfamiliar with python libraries... do I use pip? do I use easy_install? do I git clone and then do something with setup.py?
I fixed this and actually put it on PyPI :) pip install huxley should do the trick.
Would anyone pay for this as a service? i.e. you enter a bunch of urls and screen sizes, then get sent nice emails with request stats, screenshots and pdiffs with easy integration into your deployment workflow.
You could try to address "non-dev people" with this kind of tool.
"Alerts when your shop breaks" Basically CI but on the live system (with a testuser) and daily report emails and instant alerts.
"Alerts when your shop breaks" Basically CI but on the live system (with a testuser) and daily report emails and instant alerts.
I'd just integrate it into travis.
Totally thought this would be named after Aldous Huxley, the author of Brave New World, but the answer was quite cool anyways:
So we named it after the guy who coined the term "agnostic", Thomas Henry Huxley.
So we named it after the guy who coined the term "agnostic", Thomas Henry Huxley.
Pretty awesome. I could definitely see myself using this.
Here is a project that gathers all available solutions around CSS testing: http://csste.st
Is there a way to test responsive designs with this? Can you set the device metrics?
Like window size? You can from the Python API, I just didn't include the option in the Huxleyfile. I've opened an issue here https://github.com/facebook/huxley/issues/2
Pixel ratio, I'm afraid, would be quite difficult.
Pixel ratio, I'm afraid, would be quite difficult.
Is there a visual output? I'm not sure i understand this project
It writes a .huxley dir that contains screenshots and a log of user actions. It can replay these user actions programmatically and if the screen shots have changed it will save new ones to disk. You can use a tool like Kaleidoscope to compare the old ones with the new ones (we use git to keep the old ones around).
When you commit, the tests will be updated and the new screenshots will be part of the code review.
Additionally, you can run it in continuous integration mode which will break the build if screenshots are out of date.
When you commit, the tests will be updated and the new screenshots will be part of the code review.
Additionally, you can run it in continuous integration mode which will break the build if screenshots are out of date.
Just to clarify, if I want to run this as part of travis then I should have the screenshots under source control and when I intentionally change the UI I should run it locally and push the new screenshot as part of the commit but when I don't intend to change the UI it will fail the build if something changes.
Yep!
That's quite amazing! Thanks for the write up! Will look into it
We've had PhantomCSS running on a living style-guide/style tile on check in and can even fail the build on TeamCity. It's resemble.js under the hood to do the pixel-by-pixel comparison and will spit out a percentage difference, fail screenshots etc.
EDIT: Link added https://github.com/Huddle/PhantomCSS