Integration Between Cypress, GitHub, Circle CI and Slack

To increase test productivity and reduce wasted time, you can integrate your Cypress test scripts on GitHub into Circle CI and sent the notification to Slack.

Here is the simple step to integrate Cypress, GitHub, Circle CI and Slack:

1. Login Circle CI using your GitHub account

Circle CI login form

2. Setup Project

After login, you can see your GitHub repository list. Click Setup Project. then setting your config.yml like below and click Add Config.

version: 2.1
orbs:
 cypress: cypress-io/cypress@1
workflows:
 build:
 jobs:
 — cypress/run:
 yarn: true
 cache-key: ‘yarn-packages-{{ arch }}-{{ checksum “yarn.lock” }}’

Builds run automatically. Check your Build status in Pipelines menu.

Circle CI Pipelines

The status is Success, but if we open it, there is some error in cache part.

Circle CI pipelines status

For fixing this error, you need to add yarn.lock and package-lock.json files to your GitHub repository. To generate yarn.lock file, you need:

a. Install yarn

Open command prompt in your local computer and type yarn

yarn

b. Install cypress, type yarn add cypress

yarn add cypress

yarn add cypress command execution on command prompt

c. yarn.lock file will be generated. Copy yarn.lock and package-lock.json from your local to your GitHub repository.

d. After you commit and push the files to GitHub, the Circle CI pipelines will run and the result will be as shown below.

Pipelines status success

3. Integrate Circle CI and Slack

a. Open your Slack then add Circle CI app.

Add CircleCI app to Slack

b. Open your Circle CI then choose Project Settings. Choose Slack Integration and Add Webhook URL.

Project Settings > Slack Integrations > Add Slack Webhook URL

c. Update config.yml file to add Slack Orb.

version: 2.1
orbs:
  cypress: cypress-io/cypress@1
  slack: circleci/slack@4.1.1
jobs:
  build-test-and-notify:
    executor:
      name: cypress/base-14
    steps:
      - checkout
      - slack/notify:
          color: "#42e2f4"
          mentions: "hola,"
          message: A custom message to notify the channel about the latest build
      - slack/status:
          fail_only: true
          mentions: "hola"
workflows:
  build-and-notify:
    jobs:
      - cypress/run:
          yarn: true
          cache-key: 'yarn-packages-{{ arch }}-{{ checksum "yarn.lock" }}'
          post-steps:
            - store_test_results:
                path: cypress/results
      - build-test-and-notify

d. Push the updated config.yml file to your GitHub repository.

Circle CI will run the build as shown below.

Circle CI Status, Build Pipeline Success

Slack Notification as shown below.

Slack notification after CircleCI Build Success

Thanks for reading.