Stranger

Catch CSS mistakes before they hit production.

What is stranger?

stranger is a tool to help you identify visual regressions caused by adding, changing, or removing CSS. It can be used with node.js or with the command line.

stranger works initially by taking a bunch of screenshots of your webpages when you know that things are looking good. After you make your CSS changes, stranger will then take new screenshots and compare them to the old screenshots it taken earlier.

stranger works by using multiple configuration files when taking screenshots. This lets you define configurations for mobile, tablet, and desktop sizes as well as a number of different browsers.

Get started

First, you want to make sure you have imagemagick installed. If you're on os x, you can do this with homebrew. You should also check out the gotchas which can be frustrating if you are unaware of them.

npm install -g stranger

In order to test your pages you'll need to create a configuration file.

{
"baseDir": "./test/img/master",
"compareDir": "./test/img/branch",
"diffDir": "./test/img/diff"
"tests": [
  {
    "url": "./test/centered.html",
    "local": true,
    "name": "Centered"
  }
]
}

Then, generate the initial set of base images. These are what future tests with stranger will be tested against.

stranger --generate --config ./test/config.json

Later, when you're ready to test your changes run the command again without the --generate flag.

stranger --config ./test/config.json

You can expect a nice message to be printed to your terminal once the tests have finished. It will let you know which tests have passed, which haven't, and which don't have a matching base images to compare to.

If you would like to run this programmatically, checkout the api page.

Found an issue? Want to contribute?

If you've found an issue head on over to github and log the defect with as many details as you can.

If you'd like to contribute something to the project, simply make a fork and submit a pull request!