Skip to content
A Slack reporter to integrate with CircleCI
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
cypress CLI Opts & CI Tests (#13) Apr 10, 2019
samples Slack mocker (#40) May 3, 2019
src Slack mock type script (#52) May 6, 2019
.gitignore
.npmignore Slack mock type script (#52) May 6, 2019
LICENSE squashed commit after refactor and CLI runner Apr 9, 2019
Makefile Tests (#45) May 5, 2019
README.md Tests (#45) May 5, 2019
config.env.test Slack mock type script (#52) May 6, 2019
cypress.json squashed commit after refactor and CLI runner Apr 9, 2019
jest.config.js Tests (#45) May 5, 2019
package.json
renovate.json squashed commit after refactor and CLI runner Apr 9, 2019
reporterOpts.json squashed commit after refactor and CLI runner Apr 9, 2019
tsconfig.json Slack mock type script (#52) May 6, 2019
tslint.json Tests (#45) May 5, 2019
untyped.d.ts Slack mocker (#40) May 3, 2019
webpack.config.js squashed commit after refactor and CLI runner Apr 9, 2019
yarn.lock Update dependency webpack to v4.32.2 (#68) May 23, 2019

README.md

cypress-slack-reporter

npm version CircleCI

A Slack Reporting tool built for Cypress but should work with any mocha based framework that is using mochawesome

  • Slack reporter with integration with CircleCI
    • Reports Github/BitBucket Triggering Commit Details
    • Reports CirleCI Build Logs / Status / Artefacts
    • Reports Test Status & Provides Report Links
  • Takes the output of Mochawesome JSON output to determine test result & corresponding slack message
  • Provides a URL link to the Test Artefacts (Mochawesome HTML Test Report / Cypress Video & Screenshots)

For users who are not using CircleCi, you can get a simple report

  • pass --ci-provider none provider flag to provide a simple slack message based on the mochawesome report status

Reporting Features

It provides the following distinct message types

  • Build Failure / Cypress error
  • Test Failure
  • Test Success

It provides the following information

  • CircleCI Build Status
  • Test Stats (Total Tests / Passes / Failures)
  • Author with link to Github commit
  • Branch name
  • Pull Request number and link to PR (only if PR)

And the following build/test artefacts

  • CircleCI Build Log button
  • HTML Test report button (only on build success)
  • Videos of test runs (one link per test)
  • Screenshots of failed tests (one link per failing test)

Screenshots showing Slack Alert Format

Alert Samples

Installation

Note Please see the pre-requisites folder to current neccessary pre-requisites

  1. Install the app

    $ yarn add cypress-slack-reporter --dev

    or

    $ npm install cypress-slack-reporter --save-dev

  2. Create a Slack app & create an incoming webhook

Set the following environment variables in your localhost or CI configuration.

  • $SLACK_WEBHOOK_URL - The full URL you created in the last step

    $ export SLACK_WEBHOOK_URL=yourWebhookUrlHere

Execution

$ npx cypress-slack-reporter --help

  Usage: index.js [options]
  Options:
    -v, --version            output the version number
    --vcs-provider [type]    VCS Provider [github|bitbucket] (default: "github")
    --ci-provider [type]     CI Provider [circleci|none] (default: "circleci")
    --report-dir [type]      mochawesome html test report directory, relative to your package.json (default: "./mochareports")
    --screenshot-dir [type]  cypress screenshot directory, relative to your package.json (default: "./cypress/screenshots")
    --videos-dir [type]      cypress video directory, relative to your package.json (default: "./cypress/videos")
    -h, --help               output usage information

Pre-Requisites

Yarn installation Instructions

    yarn add mochawesome --dev
    yarn add mochawesome-merge --dev
    yarn add mochawesome-report-generator --dev
    yarn add mocha-multi-reporters --dev

NPM installation Instructions

    npm install mochawesome --save-dev
    npm install mochawesome-merge --save-dev
    npm install mochawesome-report-generator --save-dev
    npm install mocha-multi-reporters --save-dev
  • Add the following in the base of your project

cypress.json

{
  ...
  "reporter": "mocha-multi-reporters",
  "reporterOptions": {
    "configFile": "reporterOpts.json"
  }
}

reporterOpts.json

{
  "reporterEnabled": "mochawesome",
  "mochawesomeReporterOptions": {
    "reportDir": "cypress/reports/mocha",
    "quiet": true,
    "overwrite": false,
    "html": false,
    "json": true
  }
}

CircleCI

This project is building in CircleCI and can be viewed at the following link

CircleCI Build

See the .circleci folder

  • config.yml - Contains the CircleCI build configuration

The following env vars are read for CircleCI users.

  • CIRCLE_SHA1 - The SHA1 hash of the last commit of the current build
  • CIRCLE_BRANCH - The name of the Git branch currently being built.
  • CIRCLE_USERNAME - The GitHub or Bitbucket username of the user who triggered the build.
  • CIRCLE_BUILD_URL - The URL for the current build.
  • CIRCLE_BUILD_NUM - The number of the CircleCI build.
  • CIRCLE_PULL_REQUEST - Comma-separated list of URLs of the current build’s associated pull requests.
  • CIRCLE_PROJECT_REPONAME - The name of the repository of the current project.
  • CIRCLE_PROJECT_USERNAME - The GitHub or Bitbucket username of the current project.
  • CI_URL="https://circleci.com/api/v1.1/project"

If you wish to use another CI provider, you can pass any name other than circleci into the CLI flag --ci-provider, which will allow you to enter your own environment variables for CI.

  • CI_URL
  • CI_SHA1,
  • CI_BRANCH,
  • CI_USERNAME,
  • CI_BUILD_URL,
  • CI_BUILD_NUM,
  • CI_PULL_REQUEST,
  • CI_PROJECT_REPONAME
  • CI_PROJECT_USERNAME

TODO

  • provide user ability to provide own CI artefact paths
  • typescript s3 uploader scripts and add to CLI
  • retrieve s3 links for test report/artefacts and inject into the slack report
You can’t perform that action at this time.