Screener-Shots

Sync Screenshots for Visual Testing with Screener.io.

Installation

$ npm install --save-dev screener-shots

Then add a script to your package.json:

"scripts": {
  "test-screener": "screener-shots --conf screener.config.js"
}

Then add a configuration file to your project root. Here is an example:

screener.config.js

module.exports = {
  // full repository name for your project:
  projectRepo: 'my-org/my-project-repo',

  // this example assumes Environment Variables listed below exist on your system:
  apiKey: process.env.SCREENER_API_KEY,

  // set base branch to pull baseline from:
  baseBranch: 'master',

  // array of shots groups that contain application screenshots for a particular platform/resolution.
  // `shotsDir` is a local directory that will be traversed for PNG screenshots.
  shots: [
    {
      name: 'Windows 10',
      resolution: '1280x1024',
      shotsDir: '/path/to/windows-10/screenshots'
    },
    {
      name: 'iPhone 8',
      resolution: '375x667',
      shotsDir: '/path/to/iphone-8/screenshots'
    }
  ]
};

Sample Directory Structure

screenshots/
├── TextFieldComponent/
│   ├── default.png
│   ├── disabled.png
│   ├── error.png
│   ├── placeholder.png
│   └── Multiline/
│   	├── default.png
│   	└── error.png
└── CalendarComponent/
    ├── default.png
    ├── with day picker.png
    └── multiple day selection.png

Run

Run the following command:

$ npm run test-screener

Additional Configuration Options

Note: Screener will automatically set build, branch, and commit options if you are using one of the following CI tools: Jenkins, CircleCI, Travis CI, Visual Studio Team Services, Codeship, GitLab CI, Drone, Bitbucket Pipelines, Semaphore, Buildkite.

• build: Build number from your CI tool (see note above). Screener will auto-generate a Build number if not provided.
• branch: Branch name being built (see note above).
• commit: Commit hash of the build (see note above).
• baseBranch: Optional branch name of your project's base branch (e.g. master). Set this option when developing using feature branches to:
  • automatically compare and accept changes when merging a feature branch into the base branch, or when rebasing a feature branch.
  • automatically pull the initial baseline of UI states for a feature branch from this base branch.
• includeRules: Optional array of strings or RegExp expressions to filter states by. Rules are matched against state name. All matching states will be kept.
  • Example:

  includeRules: [
    'State name',
    /^Component/
  ]

• excludeRules: Optional array of strings or RegExp expressions to filter states by. Rules are matched against state name. All matching states will be removed.
  • Example:

  excludeRules: [
    'State name',
    /^Component/
  ]

• failOnNewStates: Option to set build to failure when new states are found.
• failureExitCode: The exit code to use on failure. Defaults to 1, which will fail a CI build.
  • To NOT fail a CI build on Screener failure, set to 0. Example:

  failureExitCode: 0

• vsts: Optional configuration for integrating with Visual Studio Team Services.
  • Example:

  vsts: {
    instance: 'myproject.visualstudio.com'
  }