Test Automation with Cypress, CircleCI, and Mochawesome

Run Cypress Automation Tests on CircleCI

Primary goal: Being a part of a small startup, the amount of time we put to solve the problems could be saved for other upcoming startups.

Overview

What we cover:

1. Scheduling Cypress jobs on CircleCI
2. Adding Fingerprints for authorizing CircleCI to push back mochawesome reports
3. Run Cypress tests on CircleCI
4. Generate Mochawesome Report on CircleCI
5. Pushing Back to Git

Initial Setup:

1. Created GitHub repository
2. Activated CI builds for the repository on CircleCI

If you haven’t done this, see the CircleCI documentation Getting Started.

3. SSH Authentication for Read and Write access to the GIT repo

Add below config.yml file in your git repo under project root folder

let us see each section in config.yml

Nightly:

By default, a workflow is triggered on every git push. To trigger a workflow on a schedule, add the triggers key to the workflow and specify a schedule.

Refer to the Schedule workflow job on CircleCI for more info

In the above example, the nightly workflow is configured to run every day at 12:00 am UTC.

nightly:     
  triggers:     
      - schedule:           
          cron: "0 0 * * *"           
             filters:
                branches:               
                      only:                 
                        - master

The value of the cron key must be a valid crontab entry.

Docker Image:

We are using a single Docker container with Node 10 and Cypress dependencies, pointing at the Docker image `cypress/base:10` tag.

jobs:  
  build:    
    docker:      
        - image: cypress/base:10

Add the fingerprints to configuration file

After adding the private key to CircleCI in step 3, you will see it displays a fingerprint for the key.

You will need to add this key to the configuration file .circleci/config.yml in your repository using the step add_ssh_keys. Copy-paste the fingerprint into a add_ssh_keys step as shown below:

steps:
  - checkout
      - add_ssh_keys:
          fingerprints:
            - "b7:35:a6:4e:9b:0d:6d:d4:78:1e:9a:97:2a:66:6b:be"    

Each run command has name which is self explanatory

Run Cypress tests on docker

Below piece of code in config.yml helps to run the cypress tests on CircleCI

- run:          
   name: Execute Cypress Tests          
   command: npm run cypress:run     
   when: always

cypress: run custom command is defined in package .json as shown below

Package.json is present the project root directory which defines all packages required for the current project

Cypress Run command executes cypress tests that are typescript/javaScript files and generate a .json file for each typescript/javaScript file and saves them in cypress/results/JSON folder is the default.

when: always

Which tells CircleCI to run the current command even though the previous run command fails.

Generate Mochawesome Report

- run:          
   name: Generate Mochawesome Report        
   command: npm run cypress:report    
   when: always

cypress: report custom command is defined in package .json as shown above.

From generated .json files, this npm command generates a mochawesome report with the name index.html and saves it in the cypress/reports/html location, which is the default.

Pushing Back to GIT

- run:          
   name: Commit New files        
   command: git commit -m "[skip ci] test result"  
   when: always

Eliminates the loopback builds. commit -> build -> commit. [skip ci] is the point to note

- run:          
   name: Push to git       
   command: git push
   when: always

this command pushes mochawesome report back to Git Repo

Reference : https://medium.com/thinkspecial/circleci-selenium-netlify-gopi-k-kancharla-1959737f87c