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 makeoh-see
work.
Install
npm install oh-see
Usage example
const OhSee = ; const oh = ; oh; oh;
API
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:
name | type | mandatory | description |
---|---|---|---|
componentName | string |
yes | The component name |
concurrency | number |
no | Default 3, is the concurrency of tests |
cookies | object |
no | Allows to specify cookies to be used for each request |
debug | boolean |
no | When true, shows stuff in the console |
headers | object |
no | Allows to specify headers to be used for each request |
preRendering | array of functions |
no | An array of nightmareJs actions to perform before the first screenshots. Look at the example below |
postRendering | array of functions |
no | An array of nightmareJs actions to perform after the transformation and before the second screenshots. Look at the example below |
retries | number |
no | Default 3, number of retries after a failing session |
screenshotsPath | string |
yes | The path where to save the screenshots |
timeout | number |
no | Default 20000, when the session is going to be restarted |
transformation | object |
yes | The transformation to apply to the component. Look at the Transformation types below |
tryAppendLang | boolean |
no | Default false , when true appends to the component's href the __ocAcceptLanguage parameter, inheriting the value from html DOM element's lang attribute. This is required when re-rendering a server-side rendered component that depends on Accept-Language attribute for being rendered in the correct language |
urls | object |
yes | The urls to test. Key is used to generate screenshots file name so keep it simple and without spaces and stuff |
viewports | array of arrays |
no | Default [[800, 600]] , the viewports 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.
ohSee
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