Power of Cypress & Azure DevOps – Simple Integration

DevOps is one of key area where many organisations are transforming towards delivering their product much faster to their customers. QA plays an important role to this faster delivery process.

In this article, I am going to show you how to integrate Cypress tests with Azure DevOps in simple steps.

So, this is how it’g going to happen. We are going to auto-trigger the pipeline immediately after a push to the GitHub repo where we reside our Cypress tests from local VS Code.

Let’s follow these simple steps to achieve our goal –

Cypress Test Project Configurations

Step 1: Install the below packages to your Cypress tests –

    "cypress-multi-reporters": "^1.4.0",
    "mocha-junit-reporter": "^2.0.0"

Step 2: Once done, open Cypress.json file and add the below Reporter code –

{
    "reporter": "mocha-junit-reporter",
    "reporterOptions": {
        "mochaFile": "cypress/reports/junit/test-results.[hash].xml",
         "testsuitesTitle": false
    }
}

Step 3: Add the below code in packages.json file –

"scripts": {
    "scripts": "cypress run",
    "test": "npm run scripts"  
  }

Azure DevOps Pipeline Configurations

Step 1: I assume you have some set of Cypress tests ready or for this tutorial purpose, you can make use of default tests from Cypress like me.

Step 2: Create a new GitHub repo and push your initial code into it.

Step 3: Login into Azure DevOps portal. (You can signup for a free version with limited functionalities)

Step 4: Once created, navigate to “Pipelines” from side navigation pane

Step 5: In the Pipelines page, create a “New Pipeline” by clicking the button,

Step 6: In the repository configuration, select GitHub and then select the repository –

Step 7: Select “Node.js” as runtime

Step 8: In the YAML file configuration add 2 tasks –

a. To run the tests, copy the below task code and add it at the end of file –

- task: Npm@1
  inputs:
    command: 'custom'
    customCommand: 'run test'
  continueOnError: true

b. To publish the test results in JUnit format –

- task: PublishTestResults@2
  inputs:
    testResultsFormat: 'JUnit'
    testResultsFiles: '*.xml'
    searchFolder: '$(System.DefaultWorkingDirectory)/cypress/reports/junit'
    mergeTestResults: true
    testRunTitle: 'Publish Test Results'

Let’s Run

Now, there are two ways in which the tests can be triggered – Manual & Automatic

Manual way is something in which you can just click Run new button.

Automatic way is something that is interesting. This is the way I like a lot because the pipeline is integrated continuously with my GitHub. So, when I make some change and commit to the repo, the build will be auto-triggered.

Once the pipeline run is done, you will be able to get the reports as given below.

So, enjoy you time with Cypress & Azure Devops!

References

Vector Image Credits – product kind png from pngtree.com