Major refactoring to support Puppeteer package (#35)

* Major refactoring to support Puppeteer package

* Fix test

* Update tests

* Update tests

* Rename config to defaultConfigs

* Update compareImage tests

* Update tests

Author: NimaSoroush

.nvmrc

@@ -1 +1 @@
-6.9.5
+8.5.0

API.md

@@ -2,9 +2,9 @@
 
 |Method|Arguments|description|
 |------|---------|-----------|
-|`update`|[TestOptions](https://github.com/NimaSoroush/differencify#testoptions)|Creates reference screenshots|
-|`test`|[TestOptions](https://github.com/NimaSoroush/differencify#testoptions)|Validate your changes by testing against reference screenshots|
-|`cleanup`|no argument|Closes all leftover browser instances|
+|`launchBrowser`|no argument|Launches a browser instance with [GlobalOptions](https://github.com/NimaSoroush/differencify#globaloptions). The browser will be closed when the parent node.js process is closed|
+|`init`|[TestOptions](https://github.com/NimaSoroush/differencify#testoptions)|Launches a browser instance if there is no instance already been launched or launches new browser window if `newWindow:true`|
+|`cleanup`|no argument|Closes browser instance if it is not closed already|
 
 ### Steps Methods
 
@@ -14,27 +14,36 @@
 |`wait`|`string`, `integer` or `func`|waiting time in millisecond `or` waiting for a selector `or` waiting until the function you supplied is evaluated as true|
 |`execute`|`func` or `string`|execute an expression in the browser context|
 |`freezeImage`|`string`|Selector name of a <img> tag containing animated image to be freezed before taking screenshot|
-|`capture`|`string`|`undefiend`, `document` or selector name|
-
-#### Steps example
-
-```
-{
-  ...
-  steps: [
-    { name: 'goto', value: 'http://www.example.com' },
-    { name: 'wait', value: 5000 },
-    { name: 'freezeImage', value: '#myImage' },
-    { name: 'execute', value: () => { alert("Hello! I am an alert box!!") } },
-    { name: 'capture', value: 'document' },
-  ],
-  ...
-}
-```
-
-##### Coming steps
+|`capture`|`object`|[screenshot options](https://github.com/NimaSoroush/differencify/blob/master/API.md#screenshot-options)|
+|`resize`|`object`|[viewport](https://github.com/NimaSoroush/differencify/blob/master/API.md#viewport)|
+
+
+#### screenshot options
+- `options` <[Object]> Options object which might have the following properties:
+    - `path` <[string]> The file path to save the image to. The screenshot type will be inferred from file extension. If `path` is a relative path, then it is resolved relative to [current working directory](https://nodejs.org/api/process.html#process_process_cwd). If no path is provided, the image won't be saved to the disk.
+    - `type` <[string]> Specify screenshot type, can be either `jpeg` or `png`. Defaults to 'png'.
+    - `quality` <[number]> The quality of the image, between 0-100. Not applicable to `png` images.
+    - `fullPage` <[boolean]> When true, takes a screenshot of the full scrollable page. Defaults to `false`.
+    - `clip` <[Object]> An object which specifies clipping region of the page. Should have the following fields:
+        - `x` <[number]> x-coordinate of top-left corner of clip area
+        - `y` <[number]> y-coordinate of top-left corner of clip area
+        - `width` <[number]> width of clipping area
+        - `height` <[number]> height of clipping area
+    - `omitBackground` <[boolean]> Hides default white background and allows capturing screenshots with transparency. Defaults to `false`.
+
+#### viewport
+- `viewport` <[Object]>
+  - `width` <[number]> page width in pixels.
+  - `height` <[number]> page height in pixels.
+  - `deviceScaleFactor` <[number]> Specify device scale factor (can be thought of as dpr). Defaults to `1`.
+  - `isMobile` <[boolean]> Whether the `meta viewport` tag is taken into account. Defaults to `false`.
+  - `hasTouch`<[boolean]> Specifies if viewport supports touch events. Defaults to `false`
+  - `isLandscape` <[boolean]> Specifies if viewport is in landscape mode. Defaults to `false`.
+
+
+##### Coming methods
 - click
 - setCookie
 - deleteCookie
-- clearCookies
 - emulate (Emulates phone)
+- ...

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [1.0.0] - 2017-10-10
+### Changed
+- Replacing chromy with puppeteer as backend
+- Add functionality to chain differencify methods
+- Add resize functionality
+- Removed dependency to config files
+- Better logging
+- Bug fixes
+
 ## [0.0.18] - 2017-08-14
 ### Added
 - Fixing issue with freezing image

Dockerfile

@@ -1,29 +1,33 @@
-FROM debian:sid
+FROM node:8-slim
 
-# Install deps + add Chrome Stable + purge all the things
-RUN apt-get update && apt-get install -y --force-yes \
-  apt-transport-https \
-  ca-certificates \
-  curl \
-  gnupg \
-  --no-install-recommends
-RUN curl -sSL https://dl.google.com/linux/linux_signing_key.pub | apt-key add -
-RUN echo "deb [arch=amd64] https://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google-chrome.list
-RUN apt-get update && apt-get install -y \
-	google-chrome-stable \
-	--no-install-recommends
-# RUN apt-get -f purge --auto-remove -y --force-yes curl gnupg
-RUN apt-get -f -y --force-yes remove --purge curl
-# RUN apt-get -f -y --force-yes remove --purge gnupg
-RUN rm -rf /var/lib/apt/lists/*
+# Install latest chrome dev package.
+# Note: this installs the necessary libs to make the bundled version of Chromium that Pupppeteer
+# installs, work.
+RUN apt-get update && apt-get install -y wget --no-install-recommends \
+    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
+    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
+    && apt-get update \
+    && apt-get install -y google-chrome-unstable \
+      --no-install-recommends \
+    && rm -rf /var/lib/apt/lists/* \
+    && apt-get purge --auto-remove -y curl \
+    && rm -rf /src/*.deb
 
-# Add Chrome as a user
-RUN groupadd -r chrome && useradd -r -g chrome -G audio,video chrome \
-    && mkdir -p /home/chrome && chown -R chrome:chrome /home/chrome
+# Uncomment to skip the chromium download when installing puppeteer. If you do,
+# you'll need to launch puppeteer with:
+#     browser.launch({executablePath: 'google-chrome-unstable'})
+# ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true
 
-EXPOSE 9222
+# Install puppeteer so it's available in the container.
+RUN yarn add puppeteer
 
-# Autorun chrome headless with no GPU
-ENTRYPOINT [ "google-chrome-stable" ]
+# Add pptr user.
+RUN groupadd -r pptruser && useradd -r -g pptruser -G audio,video pptruser \
+    && mkdir -p /home/pptruser/Downloads \
+    && chown -R pptruser:pptruser /home/pptruser \
+    && chown -R pptruser:pptruser /node_modules
 
-CMD [ "--headless", "--disable-gpu", "--remote-debugging-address=0.0.0.0", "--remote-debugging-port=9222" ]
+# Run user as non privileged.
+USER pptruser
+
+CMD ["google-chrome-unstable"]

README.md

@@ -9,15 +9,15 @@ Regression Testing suite!
 Status: [![CircleCI](https://circleci.com/gh/NimaSoroush/differencify/tree/master.svg?style=svg)](https://circleci.com/gh/NimaSoroush/differencify/tree/master)
 
 ## About
-Differencify is a library for visual regression testing by comparing your local changes with reference screenshots of your website.
+Differencify is a library for visual regression testing by comparing your local changes with reference screenshots of your website. It is built on top of chrome headless using [Puppeteer](https://github.com/GoogleChrome/puppeteer)
 
 |Reference|Local changes|
 |---------|-------------|
 |<img alt="Differencify" src="images/reference_screenshot.png" width="400">|<img alt="Differencify" src="images/differencified_screenshot.png" width="400">|
 
 
 ## Requirements
-- Node > 6
+- Node > 7.6.0
 - Chrome > 59 or [Chrome Canary](https://www.google.co.uk/chrome/browser/canary.html)
 
 ## Installation
@@ -30,28 +30,42 @@ npm install differencify
 import Differencify from 'differencify';
 const differencify = new Differencify(GlobalOptions);
 ```
-### Create reference screenshots
-```js
-async () => {
-  const result = await differencify.update(TestOptions);
-  console.log(result); //true if update succeeded
-}
-```
-<p align="center">
-<img src="images/update.gif" width="500">
-</p>
 
 ### Validate your changes
 ```js
-async () => {
-  const result = await differencify.test(TestOptions);
-  console.log(result); //true if test pass
-}
+(async () => {
+  const result = await differencify
+    .init()
+    .resize({ width: 1600, height: 1200 })
+    .goto('http://www.google.com')
+    .wait(3000)
+    .capture()
+    .close()
+    .end();
+  
+  // or unchained
+
+  const page = await differencify.init({ chain: false });
+  await page.resize({ width: 1600, height: 1200 });
+  await page.goto('http://www.msn.com');
+  await page.wait(3000);
+  await page.capture();
+  const result = await page.close();
+
+  console.log(result); // Prints true or false
+})();
 ```
 <p align="center">
 <img src="images/test.gif" width="500">
 </p>
 
+### Create/Update reference screenshots
+Simply set environment variable `update=true` and run the same code.
+
+<p align="center">
+<img src="images/update.gif" width="500">
+</p>
+
 ### API
 
 See [API.md](API.md) for full list of API calls
@@ -60,45 +74,42 @@ See [API.md](API.md) for full list of API calls
 
 |Parameter|type|required|description|default|
 |---------|----|--------|-----------|-------|
-|`visible`|`bool`|no|Browser is launched in visible mode|false|
-|`debug`|`bool`|no|Enables console output|false|
-|`timeout`|`integer` (ms)|no|Global test timeout|30000|
+|`headless`|`boolean`|no|Browser is launched in visible mode|true|
+|`debug`|`boolean`|no|Enables console output|false|
+|`timeout`|`integer` (ms)|no|Maximum time in milliseconds to wait for the Chrome instance to start|30000|
 |`screenshots`|`string`|no|Stores reference screenshots in this directory|./screenshots|
-|`testReportPath`|`string`|no|Stores test screenshots in this directory|./differencify_report|
-|`saveDifferencifiedImage`|`bool`|no|Save differencified image to testReportPath in case of mistmach|true|
-|`mismatchThreshold`|`integer`|no|Difference tolerance between referenced/testsed image|0.01|
+|`testReports`|`string`|no|Stores test screenshots in this directory|./differencify_report|
+|`saveDifferencifiedImage`|`boolean`|no|Save differencified image to testReportPath in case of mismatch|true|
+|`mismatchThreshold`|`integer`|no|Difference tolerance between reference/test image|0.01|
+|`ignoreHTTPSErrors`|`boolean`|no|Whether to ignore HTTPS errors during navigation|false|
+|`slowMo`|`integer`|no|Slows down browser operations by the specified amount of milliseconds|0|
+|`browserArgs`|`Array`|no|Additional arguments to pass to the browser instance. List of Chromium flags can be found [here](http://peter.sh/experiments/chromium-command-line-switches/)|[]|
+|`dumpio`|`boolean`|no|Whether to pipe browser process stdout and stderr into process.stdout and process.stderr|false|
 
 ### TestOptions
 
 |Parameter|type|required|description|default|
 |---------|----|--------|-----------|-------|
-|`name`|`string`|yes|Unique name for your test case|default|
-|`resolution`|`object`|no|Browser width and height|800 * 600|
-|`steps`|`object`|yes|Steps before capturing screenshot|null|
+|`testName`|`string`|yes|Unique name for your test case|test|
+|`newWindow`|`boolean`|no|Whether to open test execution on new browser window or not. By default it opens on new tab|false|
+|`chain`|`boolean`|yes|Whether to chain differencify commands or not. More details on [examples](examples)|null|
 
 ### Steps API
 
 See [API.md](API.md) for full list of Steps API calls
 
-### TestOptions example
-
-```
-{
-  name: 'default',
-  resolution: {
-    width: 800,
-    height: 600,
-  },
-  steps: [
-    { name: 'goto', value: 'http://www.example.com' },
-    { name: 'capture', value: 'document' },
-  ],
-}
-```
 
 ### Interested on Docker image!
 
-A [Dockerfile](Dockerfile) with chrome-headless is availale for local and CI usage
+A [Dockerfile](Dockerfile) with chrome-headless is available for local and CI usage
+
+Build the container:
+
+```docker build -t puppeteer-chrome-linux .```
+
+Run the container by passing node -e "<yourscript.js content as a string> as the command:
+
+```docker run -i --rm --name puppeteer-chrome puppeteer-chrome-linux node -e "`cat yourscript.js`"```
 
 
 ### Links

examples/configs/global-config.js

@@ -1,15 +1,36 @@
-import Differencify from 'differencify';
-import globalConfig from './configs/global-config';
-import testConfig from './configs/test-config';
+const Differencify = require('differencify');
 
-const differencify = new Differencify(globalConfig.default);
+const differencify = new Differencify();
 
-describe('My website', () => {
-  afterAll(() => {
-    differencify.cleanup();
+describe('tests', () => {
+  beforeAll(async () => {
+    await differencify.launchBrowser();
   });
-  it('validate visual regression test', async () => {
-    const result = await differencify.test(testConfig.default);
+  afterAll(async () => {
+    await differencify.cleanup();
+  });
+  it('google', async () => {
+    const result = await differencify
+      .init()
+      .resize({ width: 1600, height: 1200 })
+      .goto('http://www.google.com')
+      .wait(3000)
+      .capture()
+      .close()
+      .end();
+
     expect(result).toEqual(true);
-  }, 30000);
+  }, 20000);
+  it('github', async () => {
+    await differencify
+      .init()
+      .goto('http://www.github.com')
+      .close()
+      .end();
+  }, 7000);
+  it('msn', async () => {
+    const page = await differencify.init({ chain: false });
+    await page.goto('http://www.msn.com');
+    await page.close();
+  }, 7000);
 });