https://github.com/zordius/visual-reporter
Generate Visual Changes Report
https://github.com/zordius/visual-reporter
Last synced: 5 months ago
JSON representation
Generate Visual Changes Report
- Host: GitHub
- URL: https://github.com/zordius/visual-reporter
- Owner: zordius
- License: mit
- Created: 2019-07-31T02:52:06.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T20:40:31.000Z (over 3 years ago)
- Last Synced: 2025-11-27T12:08:41.175Z (7 months ago)
- Language: HTML
- Size: 10.7 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
- License: LICENSE
Awesome Lists containing this project
README
visual-reporter
===============
[](https://travis-ci.org/zordius/visual-reporter) 
[](LICENSE)
Generate Visual Changes Report, here is a life DEMO:
Features:
* One command line tool to generate visual report as static HTML.
* View visual difference as overlap changes or different images.
* Options to customize the report.
* Grouping images by seperator in file names.
Usage
-----
```
$ npm install visual-reporter -g
$ visual-reporter --help
Usage: visual-reporter [options] [command]
Options:
-V, --version output the version number
-b --baseline baseline directory, default is "."
-c --compare compare directory, default is "./compare"
-r --report report directory, default is "./report"
-s --seperator group seperator, default is "."
-w --writeInfo generate a brief infomation file "info.txt", default is false
-k --keepUnchanged keep unchanged diff image, default is false
-g --groups group names, default is "groups"
-m --customStyle add custom css into report
-t --threshold <0...1> matching threshold, default is 0.1
-i --includeAA do not detecting anti-aliased pixels, default is false
-a --alpha <0...1> alpha of unchanged pixels, default is 0.1
-h, --help output usage information
Commands:
generate|gen Generate visual report
```
Usecases
--------
* Put your old visual files into a directory as `baseline`.
* Run your visual automation testing.
* New generated visual files are placed in another directory as `compare`.
* Generate your visual report:
```
$ visual-reporter gen --baseline path/to/baseline --compare path/to/compare
```
* When you named your image files as [browser]_[testCase].png, you can enable grouping by:
```
files:
chrome_login.png
chrome_logout.png
iphone_login.png
iphone_logout.png
$ visual-reporter gen --baseline baseline --compare compare --seperator '_' --groups browser,testcase
```
* By default, the image description is the file name. You can customize the image description in the report by placing *.txt files besides the *.png files:
```
images:
chrome_login.png
chrome_logout.png
iphone_login.png
iphone_logout.png
descriptions:
chrome_login.txt
iphone_login.txt
```
* If you want to customize style for your description, you can use this:
```
$ visual-reporter gen --baseline baseline --compare compare --customStyle ".card-content { ...}"
```
* The image comparison is done by pixelmatch, you can pass more options to it.
```
$ visual-reporter gen --baseline foo --compare bar --seperator --alpha 0.3 --threshold 0.3 --includeAA
```
Error Codes
-----------
The error code will be sum of detected change types:
| Change Type | Exit Code |
|------------------------------|-----------|
| No any chnages are detected | 0 |
| new image files are detected | 1 |
| old image files are missing | 2 |
| image size is changed | 4 |
| image content is changed | 8 |