Add support to visual comparison

[thiagodp]

Visual testing helps to verify if:

• the user interface is appearing correctly for your users
• elements of the user interface appear in the correct position and with the correct size
• elements change appropriately

Currently a lof of tools do visual regression testing. The same applies to CodeceptJS, which now integrates with Resemble.js. So, it's an interesting improvement for the Concordia language to support visual testing comparison.

Here it is a proposal for such support:

Language

Currently, the following sentence is already supported:

I save a screenshot "MyFeature.png"

This sentence makes a testing framework to take a picture of the screen.

So the new feature would be to introduce a sentence like

I see a visual difference considering "MyFeature.png"

Let's see some examples.

Full screen comparison

   I save a screenshot "MyFeature.png"
   and I see a visual difference considering "MyFeature.png"

or

   I save a screenshot "MyFeature.png"
   and I see a visual difference of 20% considering "MyFeature.png"

When no percentage is given, it is assumed 10%.

Element comparison

   I save a screenshot "MyFeature.png"
   and I see a visual difference for the element <#someElement> considering "MyFeature.png"

or

   I save a screenshot "MyFeature.png"
   and I see a visual difference of 20% for the element <#someElement> on "MyFeature.png"

When no percentage is given, it is assumed 10%.

Behavior

A plug-in must compare the visual difference between a previously-save image with the current screen or part of the screen. This difference must consider some tolerance value (e.g., misMatchPercentage in Resemble.js).

Plug-ins

The plugin for CodeceptJS with WebDriverIO can support this feature using the Resemble Helper. The is no support yet for CodeceptJS with Appium.