Git Product home page Git Product logo

xebia-visualreview's Introduction

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

  • Download and extract the latest release.
  • Reconfigure any settings in config.edn (optional)
  • Run ./start.sh
  • 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:

License

Copyright © 2015 Xebia

Distributed under the Apache License 2.0.

xebia-visualreview's People

Contributors

rrmoelker avatar finkingma avatar skwakman avatar gitter-badger avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.