VisualReview, a human-friendly tool for testing and reviewing visual regressions.
Clojure JavaScript HTML CSS Java PLpgSQL
Latest commit da9fcc8 Jan 11, 2017 Erik Swets Release v0.1.5

README.md

VisualReview logo

Build Status Join the chat at https://gitter.im/xebia/VisualReview

VisualReview's goal is to provide a productive and human-friendly workflow for testing and reviewing your web application's layout for any regressions.

VisualReview functions as a server which accepts screenshots of your web application, sent for example, from your selenium or protractor scripts. These shots are then compared to screenshots you uploaded and reviewed earlier. VisualReview will display and highlight any differences between the two and allows you to either accept or reject these changes.

Currently VisualReview provides a Protractor plug-in to easily upload screenshots from your protractor tests. However, the VisualReview server has a simple API which allows compatibility with other testing frameworks. We are working on other plug-ins and hope to release them soon.

See it in action

VisualReview visual regression tool in action

Above you can see how the application helps you to identify and evaluate visual changes in your application.

Getting started

For a quick demo try the protractor example.

To use VisualReview we'll start the VisualReview app itself. After that, we'll run tests that send screenshots to the server.

Configuring and starting the VisualReview server

Running your first test

  • Send screenshots during a test to VisualReview. We currently provide a Protractor plug-in to do this. See the protractor-plugin's README for details on how to configure Protractor to send screenshots to VisualReview.

Reviewing the results

  • Go back to the VisualReview page on http://localhost:7000 (or the port you configured in config.edn).
  • Navigate to your project and suite name. Here you see all the times you ran a test script against this project and suite combination.
  • Click on the run to review all screenshots and differences. If this is the first time you created a run in this suite, there will be no differences yet.
  • To approve or reject a screenshot, use the top-right menu or hit the 'a' or 'x' key on your keyboard.
    • When you accept a screenshot, it will be added to this suite's so-called 'baseline'. Every future screenshot with that name inside the suite will be compared to this baseline. All screenshots you accept in future runs will overwrite this baseline. The baseline will therefore contain all latest accepted screenshots of a suite to which all new screenshots will be compared against.
    • When you reject a screenshot, the baseline will not be updated.
    • After you either accepted or rejected a screenshot, you can always revert this decision by selecting the 'pending' option in the top right menu.

Integration with other tools

An updated list of currently available integrations with other tools can be found here

How to contribute

VisualReview provides a REST API for easy integration with your own toolset. See the API documentation for more details.

To run or build the VisualReview project itself from source, see this wiki page.

Features in development

For our current- and future development focus, see the wiki.

Original authors and maintainers

We'd like to acknowledge the original authors of this project, from before version 0.1 and beyond:

License

Copyright © 2015 Xebia

Distributed under the Apache License 2.0.