Home

Awesome

mirror-mirror Build Status npm version Dependency Status

Greenkeeper badge

Magic mirror in my hand, tell me if my website will look ugly in production before deploying to production.

img

This is a wrapper around the wonderful Nightmare.js for:

Most important features:

Requirements

Build status: Unix:

Install it

$ npm install mirror-mirror

Use it

var mirror = require('mirror-mirror');

var runner = mirror();

runner.setup({
  urls: {
    home: 'https://www.amazon.com'
  },

  selector: '#nav-search',
  transform: () => {
    // Replace Amazon search with Google widget. Because it is funny.
    return '<form name="cse" id="searchbox_demo" action="https://www.google.com/cse">' +
            '<input type="hidden" name="cref" value="" />' +
            '<input type="hidden" name="ie" value="utf-8" />' +
            '<input type="hidden" name="hl" value="" />' +
            '<input name="q" type="text" size="40" />' +
            '<input type="submit" name="sa" value="Search" />' +
            '</form>' +
            '<script type="text/javascript" src="https%3A%2F%2Fcse.google.com%2Fcse/tools/onthefly?form=searchbox_demo&lang="></script>';
  },
  screenshotsPath: './screenshots'
});

runner.run((err, result) => {
  console.log(result);
  /*
  {
    home: {
      after: '/Users/mfigus/Documents/os/mirror-mirror/screenshots/home-after.png',
      before: '/Users/mfigus/Documents/os/mirror-mirror/screenshots/home-before.png',
      diff: '/Users/mfigus/Documents/os/mirror-mirror/screenshots/home-diff.png',
      isDifferent: true,
      equality: 99.82844939446368
    }
  }
  */
});

API

  1. Set up an instance
  2. Configure the runner
  1. Start the runner

Set up an instance

var mirror = Mirror([NighmareOptions]);

Look at Nighmare.js options.

Configure the runner

mirror.setup(mirrorOptions);

This is an object with the following structure:

nametypemandatorydescription
afterarray of functionsnoAn array of nightmareJs actions to perform after the transformation and before the second screenshots. Look at the example below
beforearray of functionsnoAn array of nightmareJs actions to perform before the first screenshots. Look at the example below
concurrencynumbernoDefault 3, is the concurrency of tests
cookiesobjectnoAllows to specify cookies to be used for each request
debugbooleannoWhen true, shows stuff in the console
headersobjectnoAllows to specify headers to be used for each request
retriesnumbernoDefault 3, number of retries after a failing session
screenshotsPathstringyesThe path where to save the screenshots
selectorstringyesThe css selector for the DOM tree you want to transform. It can be anything document.querySelector can understand
timeoutnumbernoDefault 20000, when the sessions is going to be restarted
transformstring or functionyesThe transformation to apply to the selector. If string, element will be replaced with the markup provided in the string. When function, it needs to transform a string to be replaced in the selected DOM tree. The function will have an element as parameter - the result of previous selection
urlsobjectyesThe urls to test. Key is used to generate screenshots file name so keep it simple and without spaces and stuff
viewportsarray of arraysnoDefault [[800, 600]], is an array containing all the viewport resolutions for executing the tests

Nightmare actions example

This example shows how to make a screenshot with a menu opened, assuming the transformation replaces the menu and then needs to run another javascript initialisation and then wait to complete before performing the same action again.

mirror.setup({
  ...
  before: [
    // Assuming jQuery is in the page
    nightmare => nightmare.evaluate(() => $('navbar-button').click())
  ],
  after: [
    (nightmare) => {
      return nightmare.evaluate(() => {
        window.menusReady = false;
        window.menus.initialise(() => {
          window.menusReady = true;
        });
      });
    },
    nightmare => nightmare.wait(() => window.menusReady === true),
    nightmare => nightmare.evaluate(() => $('navbar-button').click())
  ]
});

Start the runner

mirror.run(callback);

Where callback is going to have an error and/or a response with the results. If any of the requests fails, the callback will include both an error + the response with succeeding screenshot links.

Contributing

Yes please. Open an issue first.

License

MIT