How to Setup and run Cypress Test cases In Azure DevOps Pipeline

Blog cover about front-end testing with Cypress and its integration with Azure DevOps and GitHub.

Pre-request

1. Cypress code already pushed in Github repository
2. Azure free account should be set up already
3. User already logged in in Azure DevOps

Azure DevOps Pipeline

Azure Pipelines automatically builds and tests code projects to make them available to others. It works with just about any language or project type. Azure Pipelines combines continuous integration (CI) and continuous delivery (CD) to test and build your code and ship it to any target.

Steps by Step on how to set up and run Cypress Test cases in Azure DevOps pipeline

Step 1

Click on Pipelines from the left navigation and then click on New Pipeline

After clicking on the New pipeline below page open

Step 2

Click on Use the classic editor to create a pipeline without YAML.

Step 3

Select a source in my case I have selected Github

Step 4

Select repository and default branch and click on continue

Step 5

Select a template (In this case Select ‘Empty Job’)

As we select the Empty job below page is open.

On the left side: we can see the Get Source path and Agent job 1

On the right side

1. Enter the Name of the pipeline e.g Cypress Project
2. In Agent pool: Select ‘Azure Pipelines’ from the drop-down
3. In Agent Specification: Select OS ‘window-latest’ (Test cases are run in this OS)

Step 6

Click on Agent Job1 From the Left Side and Choose the Options.

On the Right side enter /select the below data

1. Enter the Name of the pipeline e.g Cypress Project
2. In Agent pool: Select ‘Azure Pipelines’ from the drop-down
3. In Agent Specification: Select Agent ‘window-latest’ (Test cases are run in this agent)

Step 7

Now Click on (+) icon against the Cypress Project then search for “npm” and click on Add button

Now click on npm install from the left Side (See below screen shot) .On the Right side enter /select the below data to install cypress and other dependencies.

1. Enter the Display name e.g npm install
2. In Command: Enter ‘install’
3. In Control Options: Select Check Box ‘Enabled’ and select Check Box ‘Continue on error’

Step 8

Now Click on (+) icon against the ‘Cypress Project’ then search for “npm” again and click on Add button

Click on npm install from the left Side (See below screen shot) .On the Right side enter /select the below data to install cypress and other dependencies.

1. Enter the Display name e.g Run Cypress Test
2. In Command: Enter ‘custom’
3. In Command and arguments: Enter run cy:report

Above command run cy:report is from package.json (See package.json below)

Select Check Box ‘Enabled’ and select Check Box ‘Continue on error’

Step 9

Now Click on ‘Save & queue’ and enter the required data and finally click Save and run

Step 10

As user click on Save and run, job start running below the steps that will execute one by one

1. Code is checkout from GitLab
2. Command `npm install` will install all dependencies
3. In the last Cypress test cases are run using command run cy:report

Cypress Test Results in Azure DevOps pipeline

Once job completed we can see Cypress Test Results in Azure DevOps

Reference

https://azure.microsoft.com/en-us/services/devops/

Use Azure Pipelines - Azure Pipelines

Channel

https://www.youtube.com/channel/UCrRPMnWk2slXl4xFOVXfTmQ?sub_confirmation=1