Comment configurer et exécuter des scénarios de test Cypress dans CI/CD TeamCity

Cet article explique comment configurer et exécuter des scénarios de test Cypress dans CI/CD TeamCity. Cypress est un framework de test de bout en bout basé sur JavaScript qui peut être utilisé pour tester des applications Web. Pour exécuter des cas de test Cypress dans un pipeline CI/CD à l’aide de TeamCity, vous pouvez utiliser Cypress Test Runner comme étape de construction dans votre pipeline. Cela peut être configuré pour exécuter les tests dans un navigateur sans tête et générer des rapports de test qui peuvent être utilisés pour suivre les résultats des tests au fil du temps. De plus, vous pouvez utiliser les fonctionnalités intégrées de TeamCity, telles que les notifications et les analyses, pour suivre l’état de vos tests et être alerté lorsque les tests échouent.

Conditions préalables

• L’utilisateur est déjà connecté à TeamCity.
• Le code est déjà transmis à GitHub.
• Pour la démo, utilisez la dernière version (12.3.0) de Cypress.

Qu’est-ce que TeamCity ?

TeamCity est un serveur d’intégration continue et de livraison continue (CI/CD) développé par JetBrains. Il est utilisé pour automatiser la création, les tests et le déploiement de projets logiciels. TeamCity fournit une interface Web pour configurer et gérer les builds, ainsi que pour afficher les résultats et les statistiques des builds.

TeamCity prend en charge une grande variété de technologies de construction, notamment Java, .NET, C++ et bien d’autres. Il peut s’intégrer à une variété de systèmes de contrôle de version, de systèmes de suivi des problèmes et de cadres de test. Il dispose également d’une prise en charge intégrée pour l’exécution de tests et le déploiement de code dans divers environnements.

Flux de travail CI de base dans TeamCity

Pour comprendre le flux de données entre le serveur et les agents, ce qui est transmis aux agents, et comment et quand TeamCity obtient les résultats, examinons un cycle de vie de construction simple.

Source: JetBrains

Guide de flux de travail

1. Le serveur TeamCity détecte un changement dans votre racine VCS (référentiel).
2. Le serveur stocke cette modification dans la base de données.
3. Le déclencheur, attaché à la configuration de construction, détecte le changement pertinent dans la base de données et lance la construction.
4. La génération déclenchée arrive dans la file d’attente de génération.
5. Le build est attribué à un agent de build gratuit et compatible.
6. L’agent exécute les étapes de construction, décrites dans la configuration de construction. Lors de l’exécution des étapes, l’agent signale la progression de la construction au serveur TeamCity. Il envoie tous les messages de journal, les rapports de test et les résultats de couverture de code à la volée afin que vous puissiez surveiller le processus de construction en temps réel.
7. Une fois la génération terminée, l’agent envoie des artefacts de génération au serveur.

En outre, TeamCity peut être intégré à d’autres outils, tels que GitHub, JIRA et Slack, pour rationaliser le processus CI et fournir une vue complète de l’état du projet.

Avant l’intégration, nous devons installer et configurer Cypress avec le some.spec fichier pour exécuter CI/CD TeamCity.

Configurer Cypress

Pour configurer Cypress, vous devez avoir installé Node.js et npm (Node Package Manager) sur votre ordinateur. Une fois que vous les avez, vous pouvez suivre ces étapes :

1. Ouvrez un terminal ou une invite de commande et accédez au répertoire racine de votre projet.
2. Exécutez la commande npm init pour initialiser un nouveau package npm dans votre projet. (Vous pouvez ignorer cette étape si votre projet a déjà un package.json déposer).
3. Exécutez la commande npm install cypress --save-dev pour installer Cypress en tant que dépendance de développement dans votre projet.
4. Une fois l’installation terminée, lancez la commande npx cypress open pour ouvrir Cypress Test Runner.
5. Dans Cypress Test Runner, vous pouvez écrire et exécuter des tests pour votre application.
6. Vous pouvez également configurer Cypress en modifiant le cypress.json fichier situé à la racine de votre projet.

Installez Cypress à l’aide de la commande ci-dessous :

npm install cypress --save-dev

Une fois Cypress installé, vous pouvez voir la structure des dossiers ci-dessous :

Voici une explication de la structure des dossiers de Cypress :

• cypress/: Il s’agit du répertoire principal pour vos tests Cypress.
• e2e/: Ce répertoire contient tous vos fichiers de test. Il est recommandé d’organiser les fichiers de test en fonction de la fonctionnalité ou de la page qu’ils testent.
• fixtures/: Ce répertoire contient des données utilisées pour tester votre application, telles que des fichiers JSON ou CSV.
• plugins/: Ce répertoire contient des fichiers JavaScript qui étendent les fonctionnalités de Cypress.
• support/: Ce répertoire contient des fichiers qui sont utilisés pour configurer Cypress et mettre en place vos tests.

Exemple de démonstration

À des fins de démonstration, je prends l’exemple de ce site.

Exemple d’interface utilisateur

/// <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");
  });
});

Exemple d’API

Pour l’API, prenons l’exemple de ce site :

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);
  });
});

Fichier Package.json

{
  "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"
  },
}

Intégrer TeamCity à Cypress

L’intégration de Cypress à TeamCity vous permet d’exécuter vos tests Cypress de bout en bout dans le cadre de votre workflow d’intégration continue (CI).

Pour intégrer Cypress à TeamCity, vous devrez créer une configuration de build qui exécute des tests Cypress dans le cadre du processus de build. Cela peut être fait en configurant une étape de génération pour exécuter la commande de test Cypress, telle que « course de cyprès npx » ou « course de cyprès de fil”, selon la configuration de votre projet. De plus, vous devrez configurer la version pour rapporter les résultats des tests à TeamCity, afin que les résultats puissent être analysés et affichés dans l’interface Web de TeamCity

Voici quelques étapes pour l’intégration de Cypress avec TeamCity :

Étape 1

Inscrivez-vous avec un compte Google existant :

Après vous être connecté, vous verrez l’écran ci-dessous :

Étape 2

Cliquer sur « Créer un projet” et créez un nouveau projet :

Étape 3

Après avoir cliqué sur « Créer un projet” l’écran ci-dessous s’ouvrira. Dans l’écran ci-dessous, nous pouvons voir que tous les référentiels s’affichent :

Étape 4

Sélectionnez le projet. Dans mon cas, je sélectionnerai « Cypress_12.3.0 (https://github.com/cypress1980/Cypress_12.3.0):”

Étape 5

Lorsque l’utilisateur sélectionne le projet, l’écran ci-dessous s’ouvre. La connexion au référentiel VCS a été vérifiée et le référentiel est lié:

Étape 6

Clique sur le « Procéder” dans l’écran ci-dessus. Lorsque l’utilisateur clique sur le « Procéder” bouton cela montre: Les étapes de construction et leurs paramètres sont détectés automatiquement en analysant le référentiel VCS:

Étape 7

Sélectionner « Node.js (Script Shell : test d’exécution npm)” à partir de l’écran ci-dessous :

Étape 8

Cliquer sur « Ajouter des étapes de construction” à partir de l’écran ci-dessus. Sélectionner « Ligne de commande” comme étape de construction :

Étape 9

Entrez les informations ci-dessous dans « Script shell: »

yarn cypress install
yarn run test

Sélectionnez le conteneur de dossier « cyprès/base : 16.18.1», et cliquez sur «Sauvegarder » bouton:

Étape 10

Maintenant, « Courir » le build en cliquant sur le « Courir » bouton:

Rapport