Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Visual Regression Testing with Huxley

Visual Regression Testing with Huxley

Huxley is a tool crated by Pete Hunt at Instagram (@floydophone).

Nathan Birrell

February 11, 2014
Tweet

Other Decks in Technology

Transcript

  1. Visual Regression Testing with Huxley Problem Testing the user interface

    can be slow and fragile.
 Unit testing does not test the browser- rendered UI.
 ◦ A style change for one component can have unforeseen repercussions.
  2. Visual Regression Testing with Huxley Huxley ! ! ! !

    Record your actions Take screenshots Action playback Update screenshots with changes
  3. Visual Regression Testing with Huxley How it Works Selenium Server

    Selenium WebDriver (browser-specific plugin) A server (Middleman) Huxleyfile
  4. Visual Regression Testing with Huxley Huxleyfile [Test01] url=http://0.0.0.0:4567/PageToTest1.html ! [Test02]

    url=http://0.0.0.0:4567/PageToTest2.html screensize=1024x768 sleepfactor=0.5 browser=firefox ! ... Name URL Screen size (for responsive testing) Browser selection (currently unreliable) Speed
  5. Visual Regression Testing with Huxley Workflows Default: 2. Make normal

    code changes 3. Run Huxley [Screenshots overwritten to show visual changes] 4. Commit changes to git 5. Compare screenshots to previous commits (using an image comparison app) 1. Record all tests Screenshots and click events registered to the millisecond Alternative: 2. Make normal code changes in separate branches 3. Keep a master branch for a base to test from 4. Run Huxley on the base branch, then on the working branch for a pixel-perfect comparison.
  6. Visual Regression Testing with Huxley Workflows Default: 2. Make normal

    code changes 3. Run Huxley [Screenshots overwritten to show visual changes] 4. Commit changes to git 5. Compare screenshots to previous commits (using an image comparison app) 1. Record all tests Screenshots and click events registered to the millisecond Alternative: 2. Make normal code changes in separate branches 3. Keep a master branch for a base to test from 4. Run Huxley on the base branch, then on the working branch for a pixel-perfect comparison.
  7. Visual Regression Testing with Huxley Limitations Time Recordings take a

    while to get through on large projects. ☼ Browsers Browser selection is supported, but seems a little complicated. Animation Sometimes .gif spinners and JS movements throw errors.