Skip to content

Cypress test framework

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

Installation

Exporting to Calliope

Configuring

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:multipart/form-data"
    --H "x-api-key:${API_KEY}"
    --F "file[]=@myReport/myTestProfile.json"
    --F "attachment[]=@myReport/myTestProfile.html"
    --F "attachment[]=@myReport/screenshots.zip"
    "https://app.calliope.pro/api/v2/profile/"${PROFILE_ID}"/import/?os=RSpec&platform=$CI_COMMIT_REF_SLUG&build=$REVISION"