Integrating Cypress With Continuous Integration Pipelines

Cypress is above any formal introduction as one of the widely-used powerful test automation frameworks. If you are a user of Preflight or follow our blogs, you must have seen how we come up with so much useful information about how you can make the best use of Cypress for automating your tests. We have previously published informative articles on-

These articles provide you with a lot of information about how Cypress can improve your overall test automation experience. So, we recommend you check them out carefully.

However, you must know the importance of a Continuous Integration (CI) environment that allows you to launch a working version of an application soon and then keep on adding new features to it. Now, as you explore more about Cypress, you clearly understand that it is highly crucial to integrate your Cypress tests with your CI environment but how to do that efficiently?

Here we have jotted down how you can integrate Cypress with some popular continuous integration and test automation tools, so let’s move on with that.

Integrating Cypress With Jenkins

You must already have heard the name of Jenkins, a highly popular open-source continuous integration tool that is written in Java, one of the most widely-used programming languages. Now, that clearly tells how crucial it is to integrate Cypress with such a popular tool. Let’s check out the importance of doing so and how you can do that effectively.

Why Should You Integrate Cypress and Jenkins?

Cypress is an open-source powerful end-to-end testing framework that is quite easy to use and truly effective in terms of smoothly automating your tests. Especially, front-end developers and quality assurance engineers who prefer JavaScript, highly prefer this testing framework. Hence, that helps us figure out the following reasons for the high popularity of Cypress.

  • JavaScript is by far the most popular programming language in web development.
  • Cypress does not need you to install any additional libraries, drivers, dependencies, servers, etc.
  • Cypress comes with effective visual regression testing capabilities that help you a lot in verifying the correctness of the visual component of web applications.

There are a lot more advantages of using Cypress and you can find every detail about them in our article on “Cypress vs. Selenium”.

Now, talking about Jenkins, it is a highly preferred tool for numerous organizations ranging from startups to large enterprises. Being an open-source tool, it is a cost-effective solution for startups who often have tight budgets, and large companies prefer this tool because of its amazing features.

These reasons make it so important to integrate Cypress with Jenkins, and it can be done through a very easy process that we are going to know about now.

How To Integrate Cypress With Jenkins?

Using NodeJS is the best way to execute Cypress. Now, let’s see how you can install NodeJS in your Jenkins environment.

1. In Jenkins, follow the path Manage Jenkins > Manage Plugins > Available Plugins. Then search for the “NodeJS” plugin and install it.

2. After the NodeJS plugin is successfully installed, you need to add NodeJS to it. For that, follow the path Manage Jenkins > Global Tool Configuration, click “Add NodeJS”, and then follow these steps -

  • Provide a name for the NodeJS installation. For example, MyNode1
  • Click on “Install automatically”
  • Select a NodeJS version that is compatible with Cypress
  • In the section for “Global npm packages to install”, add “cypress”
  • Leave the other configurations as they are

When you are done with the above steps, you have to move ahead toward creating your Cypress Jenkins project.

Here we will see the process of creating a freestyle project which is quite powerful and complicated as any build job that is built with a Jenkins pipeline or a Groovy DSL. However, these freestyle projects come with a drawback that they need the user to know how to script all the actions and the developers to learn how to manage the scripts.

1. In Jenkins, go to “New Item”, add a project name, and choose “Freestyle project” from the menu.

2. We must mention the best practice of using Git for your project management or version control needs. It is a highly useful fast system that can handle multiple commands from different team members within seconds. So, you can easily imagine how much time it can save in the overall project.

3. When you are done with creating your project, switch to the build environment section. There you need to select the option of providing Node & npm bin/ folder to PATH.

Here you also have to set your NodeJS environment (as the example of “MyNode1” in the previous section) to run Cypress.

4. For setting your NodeJS environment, you have to select it by its name in the dropdown menu.

Now, you are done with the steps, and you can use the Cypress command to execute the script.

How To Configure The Jenkins Pipeline

If you apply common concepts, a pipeline is a series of events or tasks that are interconnected in a particular order. In the case of a Jenkins pipeline, it is a set of modules or plugins that help you implement and integrate continuous delivery pipelines within Jenkins. You need to go on with the following steps to configure the Jenkins pipeline.

1. Create a new project for the pipeline. For that, follow the path Jenkins > New Item. Jenkins > Select the Pipeline.

2. Scroll down to the pipeline options and update the details according to your Git repository.

3. The Jenkins file will contain the configuration set by you and then you can see your results.

This is the process to configure the Jenkins pipeline. Now, in the upcoming part, we will see how you can integrate your Cypress Jenkins pipeline with the Cypress cloud grid.

How To Integrate Your Cypress Jenkins Pipeline With Cypress Cloud Grid?

1. First, you need to create a new project for Pipeline. For that, go to Jenkins > New Item. Jenkins > Select the Pipeline

2. Now, you need to scroll down to pipeline options and update the details according to your Git repository.

3. Ensure that your Jenkins file contains the information provided by you.

4. The task or better to say Cypress test created by you will get executed by the “e2e Tests” step in the Jenkins pipeline. Then you can get the result by pressing the “Build Now” button in Jenkins.

5. The running of the Cypress tests can be verified by checking the console output of the build.

Integrating Cypress Automation Tests With Azure DevOps

Similar to Jenkins, integrating Cypress tests with the Azure DevOps pipeline is another thing that you must master to become successful in your tech business. Here we have jotted down a brief step-by-step guide on how to do that. So, let’s check it out.

Basic Cypress Installation Commands

Before you dive deep into the process of integrating Cypress tests with the Azure DevOps pipeline, you must be aware of the following commands.

  • For cleaning up the old results,

$ rm -rf cypress/reports/

  • For running the Cypress application with the required specs file,

$ cypress run -spec \"cypress/integration/**/*.spec.ts\" // mention your spec file

  • For configuring the Mocha reports path for publishing test results,

-reporter junit -reporter-options 'mochaFile=cypress/reports/test-output-[hash].xml,toConsole=true'

  • For uninstalling the application,

$ npm uninstall cypress-multi-reporters; npm uninstall cypress-promise; npm uninstall cypress

Now, let’s take a look at the steps of integrating Cypress tests with the Azure DevOps pipeline.

Pre-Build Testing

You must already know how crucial it is to test the application before the build, deployment, or release. Generally, those pre-build tests include regression tests or smoke tests. Also, you must not overlook the importance of sanity checks before deploying the build in the staging environment.

Now, why is Cypress so important here?

Well, Angular and JavaScript are two of the most widely used programming languages for developing web applications, and Cypress makes it a lot easier to test those applications before their deployment to staging or production environments.

Install The Node Module and Run The Application In Test Mode

This is the step where you need to install the required node module of the application and then run the application in test mode. For that, use the following commands -

$ npm install –save-dev start-server-and-test
$ start-server-and-test start http://localhost:4200

Publish The Test Results

Now, you need to publish the test results. The best part of using Cypress is that the results of Cypress test execution are stored in a specified path and also added to the Azure DevOps test results. Cypress also supports Mocha, JUnit, and Mochawsome test results reporter formats and provides options to create customized test results and merge them.

Cypress Containerization

As Cypress supports docker containerization, it becomes easy to set it up in a cluster environment like AKS. You can find the Cypress base images at the following link -

https://github.com/cypress-io/cypress-docker-images

Now, copy the package.json file and UI source code to the app folder, and run the Cypress test. Use the following commands to run the docker and execute.

script: |
      docker run -d -it --name cypressName:cypressImageTag bash
      docker commit -p cypressName:cypressImageTag
      docker stop cypressName
      docker rm -f cypressName

  - script: docker tag cypressName:cypressImageTag
    displayName: Tag Cypress image


  - task: Docker@1
  displayName: Push image To Registry
  inputs:
      command: push
      azureSubscriptionEndpoint: azureSubscriptionEndpoint
      azureContainerRegistry: $(azureContainerRegistry)
      imageName: acrImageName:BuildId

  - script: sudo rm -rf /test-results/*
  displayName: Removing Previous Results

  - task: ShellScript@2
  displayName: 'Bash Script - cypress base image post-deployment'
  inputs:
      scriptPath: ./cypress-deployment.sh
      args: $(azureRegistry) $(cypressImageName) $(azureContainerValue) $(CYPRESS_OPTIONS)
      continueOnError: true
  - task: PublishTestResults@1
  displayName: 'Publish Test Results ./test-results-*.xml'
  inputs:

  cypress-base-image-post-deployment.sh

  docker run -v $systemSourceDirectory:/app/cypress/reports --name vca-arp-ui
  $cypress_Latestimage npx cypress run $cypressOptions bash

This will let you have the container set up on your local machine and your specs will start to run.

Source of code: https://www.cloudiqtech.com/cypress-in-azure-devops-pipeline-for-fast-easy-and-reliable-test-automation/

However, You Can Run Cypress Tests With Just A Few Clicks

Yes, we are talking about having perfectly functioning Cypress test codes for all your tests with just a few clicks.

Preflight comes with an amazing Cypress test recorder that lets you create your tests with just a few drag & drop actions, clicks, and as soon as you complete creating your tests, you will get properly working Cypress codes for them within a few seconds. Then you are free to run or modify those cypress test codes as you want.

No matter how much we tell you about this amazingly simple tool, you can get the best experience of using it only after getting your hands on it. So, stop waiting for that, and try it for FREE now!

Also, if you like to read informative tech articles, do consider keeping an eye on our blog page.