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
moduleexports = // full repository name for your project: projectRepo: 'my-org/my-project-repo' // this example assumes Environment Variables listed below exist on your system: apiKey: processenvSCREENER_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'