Skip to content

Cypress test framework

Cypress.io is a front end testing tool that runs on the browser itself.

Installation

Exporting to Calliope

You could use the JUnit Reporter for Mocha, but this will end in a lot of data loss for your reports.

Soon you will be able to use Mochawesome screenshots to regain more result information and we will support screenshot soon as well.

To configure Cypress.io in Calliope you will need to install mochawesome-screenshots reporter in your package.json file:

{
"dependencies": {
    "cypress": "^3.1.5",
    "mochawesome-screenshots": "^1.6.0",
  }
}

Then update your cypress.json file:

{
  "reporter": "mochawesome-screenshots",
  "screenshotsFolder": "./myReport/screenshots",
  "reporterOptions": {
    "reportDir": "myReport",
    "reportName": "myTestProfile",
    "reportTitle": "myReportTitle",
    "reportPageTitle": "myReportPageTitle",
    "takePassedScreenshot": false,
    "clearOldScreenshots": true,
    "shortScrFileNames": false,
    "jsonReport": true,
    "multiReport": false
  }
}

Now then you run:

 npm install
 $(npm bin)/cypress run

Once your test has completed, this will create a file ./myReport/myTestProfile.json. You can manually import this to Calliope.

Implementing in gitlab

Put the following code in your gitlab-ci.yml

# first, install Cypress
image: cypress/base:10

# Set some variables 
variables:
  CALLIOPE_API_KEY: <YOUR_CALLIOPE_API_KEY>
  CALLIOPE_PROFILE_ID: <TARGET_PROFILE_ID>
  # Used for caching
  npm_config_cache: "$CI_PROJECT_DIR/.npm"
  CYPRESS_CACHE_FOLDER: "$CI_PROJECT_DIR/cache/Cypress"

# cache installation files per branch
cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - .npm
    - cache/Cypress
    - node_modules

# Install the stuff on the container
before_script:
  - npm ci
  - $(npm bin)/cypress cache path
  # show all installed versions of Cypress binary
  - $(npm bin)/cypress cache list
  - $(npm bin)/cypress verify
  - apt-get install -y zip

# This is set to manual, of course your can create a whole automatic pipeline per deploy, but in this case it's a simple play button to click when you want to run the test.
run-test:
  when: manual
  script:
    - $(npm bin)/cypress run
    - zip -r ./myReport/screenshots.zip ./myReport/screenshots
  artifacts:
    expire_in: 1 week
    when: always
    paths:
      - ./myReport

# After the job has run, import all the data to calliope.
after_script:
  - curl -X POST
    --header "Content-Type:application/json"
    --header "x-api-key:${API_KEY}"
    --form "file[]=@myReport/myTestProfile.json"
    --form "attachment[]=@myReport/myTestProfile.html"
    --form "attachment[]=@myReport/screenshots.zip"
    "https://app.calliope.pro/api/v2/profile/"${PROFILE_ID}"/report/import/?os=RSpec&platform=$CI_COMMIT_REF_SLUG&build=$REVISION"