oh-see v2.0.0

oh-see

So that you can see how OC components look in production before publishing them to production.

Oh-see is a wrapper for mirror-mirror which is a wrapper for Nightmare.js. Oh-see is been built for:

• Opening a matrix of urls and viewports with Chrome
• Optionally specify a set of operations to perform
• Take a screenshot
• Replace a component's baseUrl and re-render it
• Optionally specify another set of operations to perform
• Take another screenshot
• Compare the screenshots and save a diff file with the highlighted differences

Most important features:

• Crazy quick compare to Selenium with Phantom
• Able to hide/show Browser
• Works with any OS
• Able to use DevTools and do debugging with Chrome

Requirements:

• Node version: min: 6
• <oc-component> container needs to be present in rendered components to make oh-see work.

Install

npm install oh-see

Usage example

const OhSee = require('oh-see');

const oh = OhSee({
  // Nightmare.js options
  openDevTools: true,
  show: false
});

oh.setup({
  concurrency: 5,
  timeout: 20000,
  debug: true,
  componentName: 'a-component',

  urls: {
    com_home: 'http://www.mywebsite.com',
    com_search: 'http://www.mywebsite.com/?s=something',
    com_product: 'https://www.mywebsite.com/item'
  },

  transformation: {
    type: 'replaceBaseUrl',
    newUrl: 'http://localhost:3030/',
    oldUrl: 'https://oc-registry.mywebsite.com/'
  },

  screenshotsPath: './screenshots'
});

oh.run((err, result) => {
  console.log(arguments);
  process.exit(0);
});

API

1. Set up an instance
2. Configure the runner

• action examples
• transformation types

3. Start the runner

Set up an instance

var ohSee = new OhSee([NighmareOptions]);

Look at Nighmare.js options.

Configure the runner

ohSee.setup(ohSeeOptions);

This is an object with the following structure:

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.

ohSee.setup({
  ...
  preRender: [
    (nightmare) => nightmare.evaluate(() => $('#navbar-button').click()
  ],
  postRender: [
    (nightmare) => nightmare.evaluate(() => {
      window.menusReady = false;
      window.menus.initialise(() => window.menusReady = true);
    }),

    (nightmare) => nightmare.wait(() => window.menusReady === true),

    (nightmare) => nightmare.evaluate(() => $('#navbar-button').click())
  ]
});

Transformation types

Base url replacement

Replaces the components' base url to another one. Useful for comparing a local one with the production one.

const transformation = {
  type: 'replaceBaseUrl',
  oldUrl: 'https://my-registry.my-company.com',
  newUrl: 'http://localhost:3000/'
};
...

Start the runner

ohSee.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