Examples

Configuration is easy. To begin you only need to establish a basic set of information. If you want to get a little more detailed, skip ahead.

There are a couple of gotchas when using stranger. Make sure you’re familiar with them before beginning.

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

Using a different Browser

Supported browsers include firefox, chrome, opera, safari, and IE.

It’s important to note that firefox is the only browser that will take a full page screenshot.

Additionally, the use of browsers aside from firefox require the webdriver. Check brew for the chrome driver, selenium drivers for the safari driver, and opera releases for the opera driver.

{
"baseDir": "./test/img/master",
"compareDir": "./test/img/branch",
"diffDir": "./test/img/diff",
"browser": "chrome",
"tests": [
  {
    "url": "./test/centered.html",
    "local": true,
    "name": "Centered"
  },
  {
    "url": "http://localhost:3000/home",
    "name": "Home"
  }
]
}

Configuring the viewport

You can set the width and height of the browser when screenshots are taken by adding browserOptions.

{
"baseDir": "./test/img/master",
"compareDir": "./test/img/branch",
"diffDir": "./test/img/diff",
"browser": "chrome",
"browserOptions": {
  width: 320,
  height: 568
},
"tests": [
  {
    "url": "./test/centered.html",
    "local": true,
    "name": "Centered"
  },
  {
    "url": "http://localhost:3000/home",
    "name": "Home"
  }
]
}

Browser specific options

You can pass in browser specific options for chrome, firefox, ie, opera, and safari.

{
"baseDir": "./test/img/master",
"compareDir": "./test/img/branch",
"diffDir": "./test/img/diff",
"browser": "chrome",
"browserOptions": {
  width: 320,
  height: 568
},
"chromeOptions": {},
"firefoxOptions": {},
"ieOptions": {},
"operaOptions": {},
"safariOptions": {},
"tests": [
  {
    "url": "./test/centered.html",
    "local": true,
    "name": "Centered"
  },
  {
    "url": "http://localhost:3000/home",
    "name": "Home"
  }
]
}