Skip to content

Cypress test framework

Cypress is a next generation front end testing tool built for the modern web. Cypress team addresses the key pain points developers and QA engineers face when testing modern applications.

Learn by example

Check out our example Cypress repository.

Installation

  • Download and install NodeJS version 12 or 14 and above.
  • Follow the Cypress.io guide to set up a Cypress project.

Exporting to Calliope

Configuring

To configure Cypress.io in Calliope you will need to install any of the reporters above in your package.json file and add required scripts to create merged report:

{
  "scripts": {
    "create:reportsfolder": "mkdir myReport && mkdir myReport/merged && mkdir myReport/merged/report.json",
    "pretest": "npm run create:reportsfolder",
    "combine:reports": "npx mochawesome-merge myReport/*.json > myReport/merged/report.json",
    "generate:report": "marge myReport/merged/report.json -f report -o myReport/merged",
    "delete:reports": "rm myReport/* || true"
  },
  "dependencies": {
    "cypress": "^9.2.0",
    "mochawesome": "^7.0.1"
  }
}

Then update your cypress.json file:

{
  "reporter": "mochawesome",
  "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
 or
 npx cypress run

Once your test has completed, this will create files for each test file. 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
  - npm run pretest

# 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
      # aggregate reports
    - npm run combine:reports
      # generate html report
    - npm run generate:report
    - zip -r ./myReport.zip ./myReport
  artifacts:
    expire_in: 1 week
    when: always
    paths:
      - ./myReport

# After the job has run, combine the reports and 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/merged/report.json"
    --F "attachment[]=@./myReport.zip"
    "https://app.calliope.pro/api/v2/profile/"${PROFILE_ID}"/import/?tag[]=RSpec&tag[]=branch:$CI_COMMIT_REF_SLUG&tag[]=build:$REVISION"