Skip to main content

Integrate Visual Component Testing Into Your CI

Get continuous visual test automation by integrating Visual Component tests directly into your continuous integration (CI) build.

Screener will automatically run tests, and pass or fail your builds depending on visual regressions found.

Setup Steps​

  1. After Screener is installed into your project, add the following command to your CI pipeline script:
npm run test-storybook
  1. Set the baseBranch option in your screener.config.js file to the name of your base branch (learn why):
// screener.config.js
module.exports = {
  ...

  baseBranch: 'master'
}

Additional Options​

  • Integrate into your GitHub PR workflow.
  • We recommend securing your API Key by storing it as an environment variable (i.e., store it in an environment variable called SCREENER_API_KEY, then reference it in your screener.config.js file with process.env.SCREENER_API_KEY).

Examples​

Screener will automatically pull the build number and branch name from the following CI tools:

  • Jenkins
  • CircleCI
  • Travis CI
  • GitHub Actions
  • Bitbucket Pipelines
  • Buildkite
  • Visual Studio Team Services
  • Codeship
  • GitLab CI
  • Drone
  • Semaphore

.circleci/config.yml

version: 2
jobs:
build:
steps:
- checkout
- run: npm install
# Run Screener visual component tests
- run: npm run test-storybook

If you need help integrating Screener into your CI, or would like to see an example not listed here, contact our Support Team.