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
Above you can see how the application helps you to identify and evaluate visual changes in your application.
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
- Download and extract the latest release or build it and run from source.
- Reconfigure any settings in config.edn (optional)
- Open your browser at http://localhost:7000 (or the port you configured in config.edn) to see if everything is working. It should list an empty project list.
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:
Copyright © 2015 Xebia
Distributed under the Apache License 2.0.