How to Set up And Run Cypress Test Cases in CI/CD TeamCity?

7 min readJan 21, 2023

This blog cover how we can set up and run the Cypress test cases in CI/CD TeamCity. Cypress is a JavaScript-based end-to-end testing framework that can be used to test web applications. To execute Cypress test cases in a CI/CD pipeline using TeamCity, you can use the Cypress Test Runner as a build step in your pipeline. This can be configured to run the tests in a headless browser and to generate test reports that can be used to track test results over time. Additionally, you can use TeamCity’s built-in features, such as notifications and analytics, to track the status of your tests and to be alerted when tests fail

Pre-Condition

User already logged into Team City
Code is already pushed to GitHub

What is TeamCity ?

TeamCity is a continuous integration and continuous delivery (CI/CD) server developed by JetBrains. It is used to automate the building, testing, and deployment of software projects. TeamCity provides a web-based interface for configuring and managing builds, as well as for viewing build results and statistics.

TeamCity supports a wide variety of build technologies, including Java, .NET, C++, and many others. It can integrate with a variety of version control systems, issue tracking systems, and testing frameworks. It also has built-in support for running tests and deploying code to various environments.

TeamCity key features:

Provides multiple ways to reuse settings and configurations of the parent project to the subproject
Runs parallel builds simultaneously on different environments
Enables running history builds, viewing test history reports, pinning, tagging, and adding builds to favorites
Easy to customize, interact with, and extend the server
Keeps the CI server functional and stable
Flexible user management, user roles assignment, sorting users into groups, different ways of user authentication, and a log with all user actions for transparency of all activities on the server

For more detail about CI/CD using TeamCity Follow this link

Basic CI Workflow in TeamCity

To understand the data flow between the server and the agents, what is passed to the agents, and how and when TeamCity gets the results, let’s take a look at a simple build lifecycle.

The TeamCity server detects a change in your VCS root (repository).
The server stores this change in the database.
The trigger, attached to the build configuration, detects the relevant change in the database and initiates the build.
The triggered build gets to the build queue.
The build is assigned to a free and compatible build agent.
The agent executes the build steps, described in the build configuration. While executing the steps, the agent reports the build progress to the TeamCity server. It is sending all the log messages, test reports, and code coverage results on the fly so that you can monitor the build process in real-time.
After finishing the build, the agent sends build artifacts to the server.

In addition, TeamCity can be integrated with other tools such as GitHub, JIRA, and Slack to streamline the CI process and provide a comprehensive view of the project status.

Set up Cypress

To set up Cypress, you will need to have Node.js and npm (Node Package Manager) installed on your computer. Once you have those, you can follow these steps:

Open a terminal or command prompt and navigate to the root directory of your project.
Run the command npm init to initialize a new npm package in your project. You can skip this step if your project already has a package.json file.
Run the command npm install cypress --save-dev to install Cypress as a development dependency in your project.
Once the installation is complete, run the command npx cypress open to open the Cypress Test Runner.
In the Cypress Test Runner, you can write and run tests for your application.
You can also configure Cypress by editing the cypress.json file located in the root of your project.

Install Cypress using the below command

npm install cypress --save-dev

Once Cypress installed you can see the Folder structure as below

Expalnation of folder structure of Cypress is as follows:

cypress/: This is the main directory for your Cypress tests.
e2e/: This directory contains all of your test files. It is recommended to organize test files based on the feature or page they are testing.
fixtures/: This directory contains data that is used to test your application, such as JSON or CSV files.
plugins/: This directory contains JavaScript files that extend the functionality of Cypress.
support/: This directory contains files that are used to configure Cypress and set up your tests.

Demo Example

For example purpose I am taking the example of Site https://qaautomationlabs.com/blogs/

UI Example

/// <reference types="cypress" />

describe("QAAutomationLabs.com", { testIsolation: false }, () => {
  it("Open URL", () => {
    cy.visit("https://qaautomationlabs.com/");
  });
  it("Click on Read More ", () => {
    cy.get(".staticslider-button").click();
  });
  it("Verify Particular Blog ", () => {
    cy.contains(
      "Running End-to-End Cypress Test cases In Google Cloud Build Pipeline"
    );
  });
  it("Click on Blogs", () => {
    cy.contains("Blog").scrollIntoView().click({ force: true });
  });
  it("Search the datas", () => {
    cy.get('[id="wp-block-search__input-2"]').scrollIntoView();
    cy.get('[id="wp-block-search__input-2"]')
      .click({ force: true })
      .type("cypress");
    cy.get('[id="search-icon"]').click({ force: true });
    cy.contains("Search Results for: cypress");
  });
});

API Example

For API taking example of site https://reqres.in

it("GET API testing Using Cypress API Plugin", () => {
  cy.request("GET", "https://reqres.in/api/users?page=2").should((response) => {
    expect(response.status).to.eq(200);
  });
});

it("POST API testing Using Cypress API Plugin", () => {
  cy.request("POST", "https://reqres.in/api/users", {
    name: "morpheus",
    job: "leader",
  }).should((response) => {
    expect(response.status).to.eq(201);
  });
});

it("PUT API testing Using Flip Plugin", () => {
  cy.request("PUT", "https://reqres.in/api/users/2", {
    name: "morpheus",
    job: "zion resident",
  }).should((response) => {
    expect(response.status).to.eq(200);
  });
});

it("DELETE API testing Using Cypress API Plugin", () => {
  cy.request("DELETE", "https://reqres.in/api/users/2").should((response) => {
    expect(response.status).to.eq(204);
  });
});

Package.json file

{
  "name": "cypress_headless",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "yarn cypress run"
  },
  "author": "Kailash Pathak",
  "license": "ISC",
  "dependencies": {
    "cypress": "^12.3.0"
  },
}

Integrate TeamCity With Cypress

Integrating Cypress with TeamCity allows you to run your Cypress end-to-end tests as part of your continuous integration (CI) workflow.

To integrate Cypress with TeamCity, you will need to create a build configuration that runs Cypress tests as part of the build process. This can be done by configuring a build step to run the Cypress test command, such as “npx cypress run” or “yarn cypress run”, depending on your project’s setup. Additionally, you’ll need to configure the build to report test results to TeamCity, so that the results can be analyzed and displayed in the TeamCity web interface

Below are some steps for Cypress integration with TeamCity

Step 1

After login you can see the below screen

Step 2

Click on “Create Project” and create a new project

Step 3

As the user clicks on “Create Project” the below screen is open. In the below screen, we can see all the repositories are displaying

Step 4

Select the project In my case select Cypress_12.3.0 (https://github.com/cypress1980/Cypress_12.3.0)

Step 5

As the user selects the project below screen is open. The connection to the VCS repository has been verified and the repository is linked

Step 6

Click on Proceed button in above screen. As the user clicks on Proceed button. Build steps and their settings are detected automatically by scanning the VCS repository.