Continuous Integration (CI) and Test Reports (Cypress Dashboard Service)

Almost all software projects are done in teams with multiple people. Engineers contribute code and tests to a common code base. Its very important to keep this common repository stable always.

Continuous Integration (CI) is a development practice that integrtes code into a shared repository. After each checkin, an automated build and test happens on the CI machine. This allows to detect build and test issues as soon as each commit happens.

Some of the advantages of Continuous Integration process are

• Maintains a shared repository
• Automates the build
• Runs the unit tests
• Runs the end-to-end tests
• Everyone can see the status of the latest builds/tests
• Alerts the team if any step fails

There are several CI/CD platforms like CircleCI, TravisCI, Gitlab etc. Lets create a Cypress project on Github and integrate it with CircleCI.

Once this is setup, each time I make a change in the Github repository, I will see CircleCI checking out the code, building and testing the code.

mkdir continuousintegration1
cd continuousintegration1
npm init
git init
npm install cypress --save-dev

Adding sample cypress tests to project

Open the continuousintegration1 project in visual studio code When it prompt you to create .gitignore file, say yes. (This creates a .gitignore file and puts the line “nodemodules” inside it). This prevents the contents of the nodemodules folder from being checked into Github.

npx cypress open

Add the sample cypress tests when prompted

Adding the Cypress ProjectId to cypress.json to see results on the Cypress Dashboard

I will enable the Cypress dashboard recording also. With this, I can see the status of all test runs on the Dashboard.

The steps above automatically modifies the cypress.json and updates the projectId.

Copy the record key and keep it …I will put this key value in CircleCI later.

Create .circleci folder and cirlce.yml file

• mkdir .circleci (under the continuousintegration1 folder)

• create a file config.yml inside the .circleci folder

• copy this content to the config.yml

  version: 2.1
  orbs:
  cypress: cypress-io/cypress@1
  workflows:
  build:
  jobs:
    #- cypress/run # "run" job comes from "cypress" orb
  
    - cypress/run:
        record: true
        

### Commit and push the project to Github
login to github.com
create a repository  continuousintegration1

```bash
git remote add origin https://github.com/swiftparrot/continousintegration1.git 
git status
git add .
git commit -m "first checkin"
git push -u origin

Configure CircleCI

Login to circleci.com with your github credentials Follow the project continuousintegration1 Click ‘Start Build’

Commit and Push more changes to repository

Now make a change to any file in your project and commit and push the changes to Github. You will see that this trigger the CircleCI build and tests. You can see the CircleCI results on CircleCI dashboard. Since we also enabled Cypress dashboard recording, you can see the results on the Cypress dashboard.