GithubHelp home page GithubHelp logo

review's Introduction

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           Make PhatomJS use this cookie-object                      [default: "{}"]
  --cut              Cut snapshots to exact screen size                        [default: false]
  --help, -h         Print usage instructions                                

or

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)

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)

PhatomJS will use this cookie when requesting all pages.

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

You need to have phantomjs (>=1.7 if you want to use cookies) installed, get it via

$ brew install phantomjs

or check phantomjs.org

Then

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

Contibutors

License

(MIT)

Copyright (c) 2012 Julian Gruber <[email protected]>

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's People

Contributors

alappe avatar denispeplin avatar juliangruber avatar

Watchers

 avatar  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.