How to Run Cypress Tests in Azure DevOps

Cypress is the most powerful and popular tryout mechanisation tool apply which you can write rich tests for our web covering running in the browser. Cypress can be used in CI/CD for a faster and efficient software delivery. For doing this, erst you have a significant number of examination written using Cypress, it is then crucial to integrate that with a CI/CD line using CI/CD tools like Azure, Jenkins, GitHub, GitLab etc.

In this article you will learn how to integrate the Cypress Tests to be run in the Azure DevOps as part of CI/CD Pipeline.

Why Run Cypress Tests in Azure Devops

Here are some of the core ground why you should run Cypress Tests in Azure DevOps:

1. Azure DevOps provides Continuous Integration and Continuous Deployment pipeline and release. And with assistant of Cypress we can build robust pipelines where the coating can be essay thoroughly before deploying the application to Environments
2. Azure Devops provides better scalability in term of using Cypress trial across assorted projects and running them in parallel across agents
3. Azure Devops provides centralized reportage for viewing Cypress tests reports which assist Developers and Testers to access reports in centralized spot
4. With Azure Devops and Cypress we can accomplish collaborative testing with integration Component tests and End to End tests in the grapevine

How to set up an Azure DevOps pipeline to run Cypress Tests?

Before you commence the process of setting up Azure DevOps pipeline to run Cypress Tests, here are some of the prerequisites that you need:

Prerequisites to set up Azure DevOps Pipeline

1. Create Azure Account
2. Source codification Added in Azure repository

Setting up the Azure DevOps Pipeline to run Cypress Tests

In this Section, you will learn how to set up a basic pipeline. To make grapevine you need to navigate toPipelines & gt; Click on New Pipelinebutton.You will be inquire to connect to our codification repository (Using Azure Repos Git in this article) .Once you choose the repository, you will be demo with useable repositories in Azure.Azure ply predefined constellation based on the type of your project or you can just click on Starter pipeline and publish your own configuration. Let ’ s pawl on the Starter pipeline.Azure creates very basic.yml file. You can cut it in the Review stage like below.

We do not cut this file now, as we will get to this later. For now, let ’ s click on Save and run.

This will create a new grapevine for us and executes like shown below.This line hasn ’ t run any tests yet, as we haven ’ t configured it to do so.

Configuring Azure pipeline to run Cypress Tests

Understanding the Project Structure in Azure DevOps Pipeline

Before you configure the grapevine to run test, cheque for the project pamphlet structure, as demo below.This is a mono repo, which contains application source codification as well as Functional Cypress Tests. The Cypress tests are placed under theFunctionalTestsfolder.Thepackage.jsonfile within theFunctionalTestsfolder appears as follows.In order to run the Cypress tests, we need to invoke test script, and our yarn command for this will be

yarn run tryout

Updating our pipeline to run test

In order to edit the pipeline, Navigate toPipelines & gt; Select the newly create pipeline and chink on Edit button

In order to run the Azure automation test you need to do the following:

1. Install dependencies
2. Execute test script, which will run our tests

Install Dependency to run Cypress Tests in Azure Pipeline

Before lam the tests, make sure to install the required dependencies for Cypress. You can install the habituation using either npm or yarn

Using npm we can execute below command in the command line

npm install

Using yarn we can accomplish below command in the command line

For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

Yarn install

This will create anode_modulesfolder under the root of our project and all the dependencies are downloaded inside that folder.

The sample pipeline yml script which looks like below, which we can find by voyage toPipelines & gt; Access the pipeline created and Click on Edit.

Delete the above script and paste the below script

induction: - superior pool: vmImage: ubuntu-latest steps: - task: geeklearningio.gl-vsts-tasks-yarn.yarn-task.Yarn @ 3 displayName: 'Yarn Install' inputs: projectDirectory: ' $ (System.DefaultWorkingDirectory) /FunctionalTests' arguments: install

Let ’ s break down this code

trigger: - master

The induction defines the pipeline induction touchstone, in our case we have name trigger criteria as superior. This entail whenever any codification is merged to master branch this pipeline will be trigger.

pool: vmImage: ubuntu-latest

Pool specifies which VM image to use to execute the code, we have used ubuntu persona

steps: - task: geeklearningio.gl-vsts-tasks-yarn.yarn-task.Yarn @ 3 displayName: 'Yarn Install' inputs: projectDirectory: ' $ (System.DefaultWorkingDirectory) /FunctionalTests' arguments: install

Steps contain a series of tasks, this is the subdivision where we install our dependencies and then add another task to run our examination.

To examine if the grapevine is work as we want, we have now added a task to install the dependencies.

Click on Save and our pipeline will be triggered

As seen in the picture above, the install task is action successfully.

Run Cypress Tests in Azure DevOps

Let ’ s cut the pipeline to add a task to run our trial.

As we can see, we now have new project to run cypress tests

- task: geeklearningio.gl-vsts-tasks-yarn.yarn-task.Yarn @ 3 displayName: 'run cypress tests' inputs: projectDirectory: ' $ (System.DefaultWorkingDirectory) /FunctionalTests' arguments: trial

We are passing our script name (this is the npm hand which we have added in ourpackage.jsonfile under the scripts subdivision) to run the trial. In this lawsuit, the script name to run cypress tests is “test”. Now if we Save this, our pipeline will trigger and execute tests

To confirm this let ’ s go back toPipelines & gt; Open our Pipeline & gt; Open the latest build and click on Job, which open below Job Steps detail screen.

We can see that our tests were executed successfully.

Publishing Cypress Test Results using JUnit Reporter

Cypress supports various Reporters. In this article we will use Junit Reporter.

In JUnit newsman, the reporter first produces multiple xml files (1 xml file per test) and you take to combine them before publishing.

Thecypress.config.jsfile looks like below.

newsperson: `` junit '', reporterOptions: {mochaFile: `` results/my-test-output- [hash] .xml '',}

The above block stipulate the type of reporter that Cypress has to use for generating report and the output file itinerary.

Once these files are generated, we need to combine these xml files utilise below command

jrm results/combined-report.xml \ '' results/ * .xml\ ''

Adding this bidding as npm script in thepackage.json file.

Now in our pipeline we need to add two project

1. Execute the npm book to combine reports
2. Publish the Test Results

- task: geeklearningio.gl-vsts-tasks-yarn.yarn-task.Yarn @ 3 condition: always () displayName: 'generate Report ' comment: projectDirectory: ' $ (System.DefaultWorkingDirectory) /FunctionalTests' arguments: combine: reports - project: PublishTestResults @ 2 condition: always () displayName: 'Publish Test Results' inputs: testResultsFiles: ' * * /combined-report.xml' searchFolder: ' $ (System.DefaultWorkingDirectory) /FunctionalTests/ '

The above two tasks will perform the operation of fulfill npm script using yarn and then Publish the Combined XML trial result.

Our pipeline.yml will look like this.

Now when you run the pipeline, you can see the task added in the Steps.

To access the published JUnit report, we need to navigate toTest Plans & gt; Runs, which present all the Runs and to access study click on the State of the run.

The below report will be displayed when we entree the State of the run.

Conclusion

In this article we have find how leisurely it is to mix our cypress tests in the pipeline and too release the JUnit report and perspective it. With this we can desegregate this measure into the CI/CD pipeline so that our application is tested good before getting deploy to the next environment/stage.

Whenever running Cypress tests, it is recommended to quiz on so that the can be take into history for better accuracy of test results. Tools like help QAs by providing approach to 3000+ twist browser combinations for a comprehensive automated testing.

Related Guides