Want to take your software engineering career to the next level? Join the mailing list for career tips & advice Click here

review

Visual regression testing tool for responsive websites

Subscribe to updates I use review


Statistics on review

Number of watchers on Github 904
Number of open issues 4
Average time to close an issue 12 days
Main language JavaScript
Average time to merge a PR about 12 hours
Open pull requests 2+
Closed pull requests 1+
Last commit over 2 years ago
Repo Created over 7 years ago
Repo Last Updated over 2 years ago
Size 64 KB
Organization / Authorjuliangruber
Contributors4
Page Updated
Do you use review? Leave a review!
View open issues (4)
View review activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Software engineers: It's time to get promoted. Starting NOW! Subscribe to my mailing list and I will equip you with tools, tips and actionable advice to grow in your career.
Evaluating review for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

review

Get screenshots of all your running sites in different resolutions!

Updating large and possibly responsively designed sites can be a hassle. You never know whether your change breakes anything on the other end of your sitemap, or in a certain resolution, except if have a look at every individual page...in every resolution you care about.

The idea of review is not to test everything (and visual testing is hard) but rather use the human mind's excellent ability to quickly scan information and filter out what you need, i.e. what is broken.

preview

This screenshot is from review-host, which hosts multiple reviews in one server.

Usage

$ npm install -g review

$ review --sites='{"google":"http://google.com","facebook":"http://facebook.com"}' \
  --resolutions='["1280x1024", "1900x1600", "800x600"]'
$ open http://localhost:4000/

$ # and check
$ review --usage
Host review
Usage: review [options]

Examples: review --sites='{"google":"http://google.com"}' --cache=100

Options:
  --port, -p         Port to listen on                                         [default: 4000]
  --title, -t        Title of the review                                       [default: "Review"]
  --sites, -s        Sites as JSON Object of strings                           [required]
  --resolutions, -r  Resolutions as JSON Array of strings                      [default: "[\"1200x800\"]"]
  --wait, -w         Time to give the page to finish loading, in milliseconds  [default: 0]
  --cache, -c        Cache snapshots for x milliseconds                        [default: false]
  --cookie           Add a cookie to PhatomJS
  --cut              Cut snapshots to exact screen size                        [default: false]
  --help, -h         Print usage instructions

or create a review programmatically:

var review = require('review')

review()
  .title('My Review')
  .sites({ google : 'http://google.com/' })
  .resolutions(['1280x1024', '1900x1600', '800x600'])
  .cache({
    dir : __dirname + '/cache/',
    expires : 60
  })
  .cookie({
    name : 'cookie monster',
    value : 'i eat them!',
    domain : 'google.com'
  })
  .listen(4000)

For Windows users: Windows doesn't like single quote marks (thanks @jdarling for pointing this out) so you can only use double quotes:

review --sites="{\"google\":\"http://google.com\",\"facebook\":\"http://facebook.com\"}" --resolutions="[\"1280x1024\", \"1900x1600\", \"800x600\"]"

API

review()

Returns an http / express request handler.

review#title(title)

Display title in the review. Defaults to Review.

review#sites(sites | fn)

Either pass an object with titles as keys and urls as values, or a Function that fetches the sites to be displayed. This way, on every page load that list is refreshed and you can e.g. display all sites present in your sitemap.

review.sites(function (cb) {
  request('http://my.si/temap', function (err, res) {
    if (err) return cb(err)
    cb(null, format(res))
  })
})

See example/sites

review#resolutions([WxH, WxH, ...])

Configure the resolutions to use for screenshots. Defaults to ["1200x800"]

review#wait(x)

PhantomJS will wait for x milliseconds after loading the page before it takes the screenshot, so you can make sure your page is completely loaded. Defaults to 0.

review#cache({ dir : 'directory', expires : 60 })

Cache rendered snapshots for expires seconds in dir.

review#cookie(cookie)

Add a cookie for PhantomJS to use. Can be called multiple times, to set multiple cookies.

The cookie format is:

{
  name : 'valid-cookie-name',             // required
  value : 'valid-cookie-value',           // required
  domain : 'the-domain.com',              // required
  path : '/',
  httponly : true,
  secure : false,
  expires : (new Date()).getTime() + 3600 // expires in 1 hour
}

review#cut(bool)

If bool is true then screenshots will be cut to the exact dimensions that you specified. Without this pages can be longer than your specified height.

review#listen(port)

Start the review server on port port.

Installation

There is no need to have phantomjs installed, it will be fetched together with review.

$ npm install -g review # for cli
$ npm install review    # for library

Contibutors

Sponsors

This module is proudly supported by my Sponsors!

Do you want to support modules like this to improve their quality, stability and weigh in on new features? Then please consider donating to my Patreon. Not sure how much of my modules you're using? Try feross/thanks!

License

(MIT)

Copyright (c) 2012 Julian Gruber <julian@juliangruber.com>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the Software), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED AS IS, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

review open issues Ask a question     (View All Issues)
  • almost 4 years Getting error
  • over 6 years Improve performance
review open pull requests (View All Pulls)
  • Update dependencies to enable Greenkeeper 🌴
  • feature: adds plugin interface, webdriver support
review questions on Stackoverflow (View All Questions)
  • Setting ROOT_URL for Review Apps
  • Google said that i had malware in my site, but after cleanning the code and asking a review a coundnt solve it.
  • Code Review : What are your remarks?
  • how do I mark up a topic on stack overflow,then I could review it from the mark list?
  • Xamarin.Forms iOS Simulator Build for Facebook Review
  • Automated + human code-review process
  • Could not submit app to iTunesConnect review
  • Configuring the workflow using git and bluemix so we can review changes before a merge
  • Rich snippet aggregate review for homepage (not products). OK with google?
  • Is there anyway to contact instagram API review team?
  • The user write their review/rate my app from a popup within my app
  • Facebook App Review For Basic Access for my Console Application
  • How to move Woocommerce Description tab below review tab
  • How do I make the star ratings retain the value when I edit a review?
  • Voting Up/Down swarm review using curl command
  • Security source code review for Appian, Sharepoint and MySQL code
  • Magento : one customer give only one review to product
  • How to add a project to the gerrit code review tool?
  • How to share files between different stream for code review purpose in clearcase
  • What do the colours mean in the list of review board dashboard?
  • Magento product review form not submitting
  • How to review and filter response in Grails after action is processed?
  • issue with 'arc land' command in Phabricator code review tool
  • Gerrit Code review tool
  • Questions regarding the review process for my code using Facebook API
  • tool for vsts code review toast notifier
  • How to undo uploading files in code collab code review?
  • Fisheye - select package (or multiple files at once) for review
  • Product and Review Schema data
  • Why aren't my rating/review Google rich snippets working?
review list of languages used
Other projects in JavaScript