• Stars
    star
    365
  • Rank 116,851 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 11 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Codeless front-end testing.

Node-huxley

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.

Installation

npm install -g huxley

Selenium Server is used to automate the recorded browser actions. Don't have it yet? Try the node wrapper.

(Grunt/Gulp task, if you ever need it).

Walkthrough

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:

[
  {
    "name": "type",
    "screenSize": [750, 500],
    "url": "http://localhost:8000/test_page.html"
  },
  {
    "name": "toggle button",
    "url": "http://localhost:8000/test_page.html"
  }
]

A huxleyfile contains an array of tasks, each of which has a name, 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 enter once to take the initial view of the component.
  • Go to the browser, type some text in the input field.
  • Back to command line, press enter again.
  • 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 q enter.

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.

Done!

Let's intentionally introduce some error. In test_page.html, change $(this).toggleClass('btn-primary'); to $(this).toggleClass('bla').

Here's where the magic happens: try hux in the command line =).

Enjoy!

Advanced usage, API & FAQ

All your questions answered in the wiki.

More Repositories

1

react-motion

A spring that solves your animation problems.
JavaScript
21,680
star
2

react-tween-state

React animation.
JavaScript
1,742
star
3

react-treeview

Easy, light, flexible tree view made with React.
JavaScript
1,086
star
4

react-radio-group

Better radio buttons.
JavaScript
442
star
5

react-state-stream

React animation on steroid.
JavaScript
361
star
6

chenglou.github.io

HTML
338
star
7

RCSS

Turn your JavaScript objects into CSS classes.
JavaScript
286
star
8

intro-to-reason-compilation

Ready up!
Shell
269
star
9

react-spinner

Zero configuration loading spinner.
JavaScript
186
star
10

tween-functions

Robert Penner's easing functions, slightly modified
JavaScript
182
star
11

data-structures

Fast, light and hassle-free JavaScript data structures, written in CoffeeScript.
JavaScript
147
star
12

pure-css-shaders-art

At the intersection of art and bad performance
HTML
121
star
13

cards

Prototyping the UI of 2030
OCaml
109
star
14

jeason

The crappy js-to-reason converter anyone can contribute to!
OCaml
106
star
15

react-chosen

React wrapper for Chosen jQuery.
HTML
96
star
16

react-dash

React documentation source for [Dash](http://kapeli.com/dash)
JavaScript
90
star
17

require-polyfill

Make `require` work in browsers, at runtime. No code bundling needed!
JavaScript
42
star
18

reason-project-ideas

40
star
19

png-diff

Small PNG diff utility, written in pure JS for Node.
JavaScript
40
star
20

react-lights-out

Simple demo of the React framework's power and flexibility.
JavaScript
27
star
21

upgrade-reason-react

OCaml
27
star
22

png-crop

Small PNG cropping utility, written in pure JS for Node.
JavaScript
23
star
23

grunt-huxley

Grunt task for node-huxley.
JavaScript
21
star
24

jon-blow-video-outlines

Outlines for Jon Blow's YouTube videos on games, programming and more.
20
star
25

multitouch-line-art

JavaScript
17
star
26

code-snippets

Code Snippets, algorithms, etc.
CoffeeScript
13
star
27

flexbox-see

Flexbox visualizer.
JavaScript
10
star
28

react-placeholder-shim

Form placeholder for input and textarea in ie8 and 9.
JavaScript
9
star
29

huxley-example

Demo from node-huxley's README
7
star
30

shaderjoy

TypeScript
6
star
31

phone-parser

Parse the phone input into an output format of your choice. Good for formatting a user input.
JavaScript
6
star
32

flappy-2048-side-by-side

An experiment in time wasting.
CSS
5
star
33

sublime-config

My configurations for Sublime Text.
JavaScript
4
star
34

the-game

yada yada
JavaScript
3
star
35

valid-css-props

Check for the validity of a CSS property name.
JavaScript
3
star
36

flip-it.safariextension

Flipboard Safari extension for adding a stuff on the web to your personal magazine.
CoffeeScript
3
star
37

l-system

Fun experiment in pattern generation, with a visualizer.
JavaScript
3
star
38

ocaml-bench

OCaml
3
star
39

bootstrap-everywhere.safariextension

Safari extension for turning websites more Californian
JavaScript
2
star
40

elastic

Something something OCaml
OCaml
2
star
41

mememe

OCaml
1
star
42

super-spy

JavaScript
1
star
43

reasonable

JavaScript
1
star
44

chalk-time

JavaScript
1
star