Test your UI by comparing old and new screenshots.
You made some change to your app and you want to know if you broke the UI. You could either:
- Manually put up some test pages.
- Click and type around and check if everything looks normal (was that padding always there? Did the input box always behave this way? Did the unit test assert on this style?).
- Try to remember whether the new behavior was identical to the one before your change.
Or you could let Huxley automate this for you.
npm install -g huxley
The whole demo lives here.
Create some UI
Here's a small app component. Source code here. We're going to use Huxley to make sure the component works every time we make a change to our code. (In reality, you'd set up a test page and bring in your UI script & css.)
Say what you want to do
We're going to type some text into that input field and toggle the button. Create a
Huxleyfile.json alongside the component file you just made:
A huxleyfile contains an array of tasks, each of which has a
url and browser
screenSize (optional, defaults to 1200x795).
Record your interactions
Start a local server. Try
python -m SimpleHTTPServer (if you're on Python 3.x:
python -m http.server) or use this package (at port 8000). Then, start selenium (just type
selenium in the command line if you got the node wrapper already).
hux --record to start the recording. By now, a browser window should have popped up. Every time you press
enter, Huxley records a screenshot of the current browser screen.
- In the command line, press
enteronce to take the initial view of the component.
- Go to the browser, type some text in the input field.
- Back to command line, press
q, followed by
enter, to quit the recording session.
You just finished recording your first task! For the second one, take a screenshot, click the button, take a second screenshot, click the button again, then take a final screenshot, followed by
There should be a
Huxleyfolder created beside your
Huxleyfile.json. All your browser and command line interactions are recorded there. Check them into version control.
Let's intentionally introduce some error. In
Here's where the magic happens: try
hux in the command line =).
Advanced usage, API & FAQ
All your questions answered in the wiki.