Integrate Screener into your CI

Get continuous visual test automation by integrating Screener into your Continuous Integration (CI) process.


Setup

After Screener is installed into your project, simply add the following command to your CI pipeline script:

npm run test-storybook

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


Recommendation
Store API Key as an environment variable

Secure your API Key by storing it as an environment variable. For example, store it in an environment variable called SCREENER_API_KEY, and 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
  • Bitbucket Pipelines
  • Buildkite
  • Codeship
  • GitLab CI
  • Drone
  • Semaphore


CircleCI Example

circle.yml
dependencies:
  override:
     - npm install
 
test:
  override:
    - npm test
    # Run Screener visual component tests
    - npm run test-storybook

Travis CI Example

.travis.yml
install:
  - npm install
 
script:
  - npm test
  # Run Screener visual component tests
  - npm run test-storybook

Bitbucket Pipelines Example

bitbucket-pipelines.yml
pipelines:
  default:
    - step:
      script:
        - npm install
        - npm test
        # Run Screener visual component tests
        - npm run test-storybook

General Example

npm install
 
# Run Screener visual component tests
npm run test-storybook

Contact us if you need help integrating Screener into your CI, or if you would like an example that we do not have listed here.


Got Questions? Ask Us