https://github.com/gbuomprisco/caravaggio
Caravaggio is a simple visual regression testing plugin for Protractor.
https://github.com/gbuomprisco/caravaggio
angular e2e e2e-tests protractor screenshots-comparison visual-regression
Last synced: 19 days ago
JSON representation
Caravaggio is a simple visual regression testing plugin for Protractor.
- Host: GitHub
- URL: https://github.com/gbuomprisco/caravaggio
- Owner: Gbuomprisco
- Created: 2016-12-18T11:13:54.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-16T10:39:56.000Z (about 9 years ago)
- Last Synced: 2024-10-09T10:02:21.426Z (over 1 year ago)
- Topics: angular, e2e, e2e-tests, protractor, screenshots-comparison, visual-regression
- Language: TypeScript
- Homepage:
- Size: 18.6 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Caravaggio
Caravaggio is a simple visual regression testing plugin for Protractor.
## Install
npm install caravaggio-protractor --save-dev
## Quick Start
### Add Caravaggio to the Protractor's configuration
```javascript
// protractor.conf
// if you use typescript
import { Caravaggio } from 'caravaggio-protractor';
// or if you use node
const Caravaggio = require('caravaggio-protractor').Caravaggio;
exports.config = {
// add caravaggio to the plugins array and define its options
plugins: [{
package: 'caravaggio-protractor',
screenshotsPath: '/path/to/my/screenshots', // please create the 'screenshots' folder if missing
}],
// add caravaggio to the params object
params: {
caravaggio: new Caravaggio()
},
// rest of the Protractor's configuration
};
```
### Take screenshots in your tests using Caravaggio
We need to retrieve Caravaggio using the Protractor's browser parameters, which we defined in the config.
In order to create a comparison, you can use `caravaggio.capture(name)` - and a new screenshot will be generated using the name provided.
```javascript
import { browser } from 'protractor';
const caravaggio = browser.params.caravaggio;
it('does something I expect in page "about"', () => {
caravaggio.capture('about');
clickOnButton().then(() => {
// target full page
caravaggio.capture('about-button-clicked');
// target a specific selector
caravaggio.capture('about-button-clicked--header', '.header');
});
});
```
Every time a screenshot is taken for the first time, Caravaggio adds it as a baseline image.
If you think that a change in your application needs to be the new standard instead, just delete the file in the folder `screenshotsPath/standard`.
Caravaggio fully integrates with Protractor: failures will be added to the reports at the end of the tests, and so will successful tests.
## API
Plugin configuration
```javascript
{
package: 'caravaggio-protractor', // name of the package (mandatory)
screenshotsPath: '/path/to/screenshots', // path to screenshots folder (default './screenshots')
tolerance: 0, // mismatch tolerance expressed in percentage (default 0)
onFailure: (Result) => any, // callback when a test fails
onSuccess: (Result) => any, // callback when a test passes
onComplete: () => any, // callback all tests complete
onNewImage: (fileName: string) => any, // callback when a baseline image is created
// image comparison function, you can overwrite it and use your own (or using a different library)
// as long as it returns a Result (see interface below)
imageComparisonFn: (fileName: string, tolerance: number) => Result
}
```
`Result` interface:
```javascript
interface Result {
hasPassed: boolean;
differences: number;
name: string;
}
```
### Add screenshots folder to your .gitignore
Add `${screenshotsPath}/actual` and `${screenshotsPath}/diff` as you do not want to have these images in your repository.
### Image comparison
The default comparison between screenshots is based on the library [PixelDiff](https://github.com/koola/pixel-diff), but you can write your own if you prefer.
### Support for other frameworks
Support for more frameworks may follow. I am planning to decouple Caravaggio from Protractor.