How To Run Cypress Tests In Azure DevOps Pipeline

Traditional software development models like Waterfall have given way to DevOps, which enhances collaboration between development and operations teams. This shift enables faster, more reliable updates and integrates continuous feedback into the development cycle.

With cloud platforms like Azure, AWS, and GCP supporting various automated testing tools, integrating Cypress tests in Azure DevOps pipeline provides a streamlined solution for automating tests. This integration helps ensure high code quality and accelerates deployment, meeting the growing demands for rapid, reliable software delivery.

Why To Run Cypress Tests in Azure DevOps?

Cypress is a popular end-to-end testing framework that can be integrated into Azure DevOps to enhance your CI/CD workflows. Integrating Cypress tests in Azure DevOps helps automate the testing process, improving the efficiency and reliability of your CI/CD workflows.

Below are some of the benefits of running Cypress tests in Azure DevOps.

• Robust CI/CD Pipelines: Running Cypress tests in Azure DevOps provides powerful CI/CD pipelines that allow for continuous integration and deployment. By integrating Cypress, you can ensure that your application is thoroughly tested at each stage before deployment, catching issues early in the development process.
• Scalability and Parallel Execution: Running Cypress tests in Azure DevOps offers scalable infrastructure, enabling Cypress tests to be run across various projects and parallelized across multiple agents. This improves test efficiency and reduces overall test execution time.
• Centralized Reporting: Running Cypress tests in Azure DevOps makes test results centralized, allowing developers and testers to access detailed reports and dashboards from a single location. This centralization aids in tracking test outcomes, analyzing trends, and making informed decisions.
• Collaborative Testing: Running Cypress tests in Azure DevOps supports a collaborative approach to testing. It allows for the seamless inclusion of both component tests and end-to-end tests in your pipelines, fostering better coordination between development and testing teams.

Setting Up Cypress Tests in Azure DevOps Pipeline

To explain how you can set up Cypress in Azure DevOps pipeline to run test cases, we will be using a typical e-commerce site, LambdaTest eCommerce Playground.

You can follow the steps mentioned below to create a new Cypress project:

Step 1: Create a folder and generate package.json.

• Create a project by the name Cypress_Lambdatest.
• Create a package.json file using the npm init command in the terminal.

Step 2: Install Cypress.

Run this command in the newly created folder to install Cypress.

npm install cypress —save-dev

OR

yarn add cypress --dev

​​This will install Cypress locally as a dev dependency for your project.

Cypress version 9.2.0 is reflected once this is installed, as seen below. The most recent version of Cypress is 13.13.2.

Step 3: Once you have added the Cypress dependencies, you must create a new folder named cypress_lambdatest under the integration folder. Again, inside the cypress_lambdatest folder, create another folder named lambdatest.

Within the lambdatest folder, create the following test spec files:

• login_searchproduct.spec.js
• ScrollAnd_ClickProduct.spec.js

With Cypress installed, let’s proceed to understand how Cypress works by demonstrating a simple test scenario.

Test Scenario:

Add the following test script to the login_searchproduct.spec.js file you created earlier. This script handles logging into the application, searching for a product, and verifying that the correct product is displayed after the search.

Below is the complete code walkthrough for the above test script.

Code Walkthrough:

1. The first step opens the target URL using cy.visit().
2. The second it() block logs into the application by entering the email and password. The email field is located using the id attribute.
3. In the third it() block, the script searches for a product by interacting with the search input and submitting the query.
4. The final it() block verifies that the correct product is displayed after the search.

Let’s look into another test scenario to further understand how Cypress works, focusing on functionalities like scrolling and clicking.

Test Scenario:

< Add the following test script to the ScrollAnd_ClickProduct.spec.js file you created earlier. This script handles logging into the application, scrolling through the product list, clicking on a product, and verifying that the correct product is displayed after the click.

Below is the complete code walkthrough for the above test script.

Code Walkthrough:

1. The first step uses cy.visit() to navigate to the e-commerce site.
2. The second it() block handles logging into the application by entering the email and password.
3. The third it() block ensures you are redirected to the home page after clicking on the LambdaTest logo.
4. In the final it() block, the script scrolls to the bottom of the page and clicks on a specific product.

In Cypress, commands are chained starting with cy.[command]. The result of each command determines the next possible commands. For example, cy.get() or cy.contains() yield a DOM element, which allows further commands like .click() to be chained.

5. In the screenshot below, you can see how to inspect elements. We have located the Login button by its type attribute using the Cypress command.
6. This command selects the first element with the type attribute set to “submit” and performs a click action on it.

Now that you understand how Cypress works, let’s move on to running Cypress tests in Azure DevOps pipeline. First, let’s understand the basics of DevOps and its core components.

Running Cypress Tests in Azure DevOps Pipeline

In the traditional Software Testing Life Cycle(SDLC), QA teams had to wait for code deployments to test functionality and give final approval. With modern cloud platforms like Azure DevOps, this process is streamlined. Azure Pipelines automate code deployment and testing, running the pipeline automatically whenever code is pushed.

To integrate Cypress with Azure DevOps Pipelines, follow these steps:

1. Set Up Azure Pipeline: Configure the pipeline to deploy your code automatically.
2. Run Cypress Tests: Use the pipeline to execute your Cypress test cases.

By setting up this integration, you ensure consistent, quality code is delivered rapidly to users.

To get started with running Cypress tests in Azure DevOps Pipelines, let’s look at the prerequisites to run Cypress tests in Azure DevOps Pipeline.

• Cypress code has already been pushed into the GitHub repository.
• Azure free account already created.
• The user is already logged into Azure DevOps.

Once you have the prerequisites in place to get started to run the Cypress tests in Azure DevOps Pipeline, you must follow the below steps to create and set up the Azure DevOps pipeline.

1. Click on Pipelines from the left navigation and then click on New Pipeline.
2. Click on Use the classic editor to create a pipeline without YAML from the above screen. The classic editor walks you through using a wizard-like process that guides you as you create your build.
3. Click the GitHub icon to select the repository.
• Select the repository and branch name from the existing repository.
• Click on the Continue button, the below page is open.
4. Select the template as an Empty job. After clicking on “Empty job” on the next screen, you can see under the Tasks tab three options: Pipeline, Get Source, and Agent job. By default, the pipeline is selected.
5. On the right side:
• Enter the Name of the pipeline, e.g., Cypress Lambdatest Project.
• In the Agent pool: Select ‘Azure Pipelines’ from the drop-down.
• In the Agent Specification: Select OS ‘window-latest’ (Test cases are run in this OS).
6. Configure the Get Source under the Task tab and make sure the correct repository and build are selected.
7. Configure Agent Job under the Task tab and enter the following information.
• Enter the Display Name of the pipeline, e.g., Cypress Lambdatest.
• In the Agent pool: Select ‘Azure Pipelines’ from the drop-down.
• In the Agent Specification: Select Agent ‘window-latest’ (test cases are run in this agent).
8. Click the (+) icon against the Project, search for “npm” and click the Add button.
9. After adding “npm,” from the left side, click on npm install. Enter/Select the below data (on the right side) to install the Cypress and other dependencies.
• Enter the Display name, e.g., npm install.
• In the Command: Enter ‘install.’
• In the Control Options: Select Check Box ‘Enabled’ and Check Box ‘Continue on error’.
10. Now, click the (+) icon, search for “npm” again, and click the Add button. Click on npm install from the left side (See below screenshot). On the right side, enter /select the below data to install Cypress and other dependencies.
• Enter the Display name, e.g., Run Cypress Lambdatest.
• In the Command: Enter ‘custom’.
• In the Command and arguments: Enter run cy:report.
11. Click on ‘Save & queue.’ As you click on Save & queue, this will open a dialogue box as below. Select the agent pool, agent, and the branch from which Azure DevOps needs to execute the build.
12. Click on Save and run.

Azure DevOps Pipeline Process:

As you click on Save and Run, the Job starts executing.

1. In the first step, the job is initialized.
2. In the second step, code is pulled from the repository. In this case, the code pulls from .github.
3. In the third step, the npm command runs to install the package.
4. 4. In the fourth step, the Cypress test case starts executing. In the screenshot below, You can see using the command cy:report (Which we have given in package.json) test case starts executing.
5. In the fifth and sixth steps, we have to purge the repository, and the job is finished.

While Azure DevOps Pipelines is a CI server that automates the build and deployment process of your web apps, cloud testing platforms like LambdaTest offer easy integration to run Cypress tests in Azure DevOps pipelines.

Running Cypress Tests in Azure DevOps Pipeline on Cloud

You can leverage the LambdaTest cloud to enhance Cypress’s capabilities. LambdaTest allows you to run tests in parallel, integrate with various other CI/CD tools, and build a robust pipeline for seamless Cypress automation.

LambdaTest is an AI-powered test execution platform that enables testers to perform both manual web testing and automated browser testing at scale across 3,000+ browsers, operating systems, and device emulators. It supports manual web testing as well as automated browser testing.

With LambdaTest, you can execute and analyze Cypress test scripts online as part of the build process. It enables continuous testing, building, and deploying of iterative code changes, helping catch failures early in the development cycle and addressing them before reaching production.

On this platform, you can perform Cypress UI testing on various browsers and versions, including headless browsers. In addition to Cypress, LambdaTest also offers Selenium automation testing through the Azure Marketplace.

To simplify, let’s execute the test scenarios mentioned earlier in this blog, showing how to run Cypress tests in the Azure DevOps pipeline and run them in parallel on LambdaTest’s Cypress Grid.

Before getting started with Cypress and integrating the Azure DevOps pipeline with LambdaTest, ensure you have the following information in place.

• You must have an Azure CI account.
• You must have a Git or GitHub repository to store your code.
• You need a LambdaTest account and your account credentials, specifically your username and access key, to initialize and authenticate your LambdaTest setup. You can find your username and access key by navigating to Profile > Account Settings > Password & Security.

The steps to integrate Azure Pipelines with LambdaTest and run Cypress tests in the Azure DevOps pipeline are explained below.

1. Create a new project, click on New Project, and fill in the required field.
2. Once the project is created, you must now create the pipeline by clicking on Create Pipeline.
3. If you have your code repository in GitHub, then select the option for GitHub from the values.
4. Once you choose an option for code repository, now you will be asked to log in. Once you have logged in, you need to choose the specific repository. Here, the repository that was picked is the azure-pipelines.yml file.

Yaml file explanation:

• trigger: Under trigger, You can specify the full name of the branch (for example, master).
• pool: Under the pool, we can mention the name of the agent where we want to run your test case.
• variable: Under variable, you can add LambdaTest credential.
• steps: Under steps, you can add various tasks here. We added a task to install the node with the specific version.
• script: Under the script, you can mention the package you want to install using npm and run the test cases using npm.

Next, by using the lambdatest-config file, you need to provide the credential, run_setting, and browser with the version in which you want to run your test cases.

For demonstrating the test scenario mentioned earlier, we will be using Cypress version 9.2.0. You can also use the same setup with the latest Cypress version, 13.13.2. Simply update the version in your configuration from “cypress”: “9.2.0” to “cypress”: “13.13.2”.

Azure DevOps Pipeline Process:

1. As the build in Azure DevOps Pipeline starts, the first step job is initialized.
2. In the second step, code is pulled from the repository. In this case, code pulled from .github.
3. In the third step, the node is installed.
4. In the fourth step, npm installs various packages, and finally, the cypress test cases start executing.
5. In the screenshot below, you can see that the command cy:report (Which we have given in package.json) test case starts executing in the LambdaTest platform.

Result:

In the screenshot below, you can see test cases start running in four browsers parallelly (Browser details given above in File: lambdatest-config.json).

In the screenshot below, you can see the test cases are passed in Firefox, and in Chrome browser, test cases are running.

In the screenshot below, you can see that both test cases are passed in different browsers.

Here are the logs that are generated when the test cases are run successfully.

In the screenshot below, you can see that video products are loading.

In the screenshot below, you can see after scrolling to the bottom product is clicked.

To learn more about Cypress and running Cypress tests on LambdaTest, watch the video given below.

You can also subscribe to the LambdaTest YouTube Channel to get more video tutorials on Selenium testing, cross browser testing, and more.

Wrapping Up

Integrating Cypress tests in Azure DevOps pipelines offers a streamlined, efficient way to enhance your CI/CD workflows. By automating end-to-end tests, ensuring scalability, and providing centralized reporting, this setup not only improves code quality but also accelerates software delivery. Leveraging platforms like LambdaTest further enhances the testing process, enabling parallel execution across different browsers and devices ensuring reliable and robust software development.

Kailash Pathak

Currently working as Sr. Quality Lead Manager in a US-based MNC company. Where I am responsible for setting up the overall QA Automation strategy and ensuring that we deliver a high-quality product to our end users.
Apart from my role, I have involved myself in educating the community about Software Testing and Test Automation.
I am a Blogger and YOUTUBER.
I have written a couple of blogs which can find out on my site https://qaautomationlabs.com/

See author's profile