Uncategorized

    Comment exécuter des cas de test Cypress E2E à l’aide de CI/CD GitLab

    Comment exécuter des cas de test Cypress E2E à l'aide de CI/CD GitLab

    Cypress est un framework de test de bout en bout utilisé pour tester les applications Web. Il s’agit d’un framework open source basé sur JavaScript qui permet aux développeurs d’écrire et d’exécuter des tests automatisés pour leurs applications Web de manière simple et facile.

    Cypress offre une expérience de test rapide, fiable et facile à utiliser pour les développeurs Web. Il permet aux développeurs d’écrire des tests en JavaScript, et ses fonctionnalités puissantes incluent le rechargement automatique des tests, le débogage du voyage dans le temps et le débogage interactif. Cypress fournit également un tableau de bord pour afficher les résultats des tests et les informations.

    GitLab fournit une intégration avec Cypress via ses pipelines CI/CD. Les développeurs peuvent configurer GitLab pour exécuter des tests Cypress dans le cadre du pipeline et afficher les résultats des tests dans l’interface utilisateur GitLab. GitLab offre également la possibilité de stocker des artefacts de test tels que des captures d’écran et des vidéos.

    À propos de GitLab

    GitLab est un gestionnaire de référentiel Git basé sur le Web qui fournit la gestion du code source, les pipelines d’intégration/déploiement continu (CI/CD) et d’autres fonctionnalités connexes pour le développement de logiciels. Il offre une plate-forme DevOps complète qui permet aux équipes de collaborer sur le code, d’automatiser les builds et les tests et de déployer des applications.

    En plus de la gestion du référentiel Git, GitLab inclut des fonctionnalités telles que le suivi des problèmes, la révision du code, les tests automatisés et le registre des conteneurs. Il fournit également une intégration avec divers outils tiers tels que Kubernetes, Jira, Jenkins et bien d’autres.

    GitLab est un outil open source et fournit des options de déploiement sur site et dans le cloud. C’est un choix populaire pour les organisations de toutes tailles qui recherchent une solution tout-en-un pour leurs besoins de développement de logiciels.

    Pourquoi GitLab comme CI/CD ?

    GitLab est un choix populaire pour CI/CD car il fournit une plate-forme tout-en-un pour gérer l’ensemble du cycle de vie du développement. Avec GitLab, les développeurs peuvent :

    • Gérer les référentiels de code: GitLab fournit des capacités de gestion de code source robustes avec un contrôle de version intégré à l’aide de Git.
    • Automatisez les builds et les déploiements: GitLab fournit un pipeline CI/CD intégré qui permet aux développeurs de créer, tester et déployer automatiquement leurs modifications de code.
    • Collaborez efficacement: GitLab fournit un système intégré de suivi des problèmes, des outils de révision de code et des fonctionnalités de collaboration qui permettent aux membres de l’équipe de travailler ensemble plus efficacement.
    • Augmenter la visibilité et la transparence: GitLab fournit des informations en temps réel sur la progression du processus de développement via son puissant tableau de bord, permettant aux développeurs de surveiller les builds, les déploiements et d’autres mesures clés.
    • Options de déploiement flexibles: GitLab prend en charge plusieurs options de déploiement, y compris des solutions basées sur le cloud et auto-hébergées, permettant aux équipes de choisir la méthode de déploiement qui correspond le mieux à leurs besoins.

    Flux de travail CI/CD GitLab

    Voici un diagramme de flux de travail GitLab CI/CD :

    Diagramme de flux de travail CI/CD

    Explication

    1. Lorsqu’une demande de push ou de fusion est faite au référentiel, GitLab CI/CD est déclenché.
    2. Le « Créer une tâche” est responsable de l’exécution des tests et de la construction de l’artefact.
    3. Le « Travail de test” déploie l’artefact dans un environnement intermédiaire pour les tests d’intégration.
    4. Une fois les tests d’intégration terminés, les modifications sont passées en revue dans l’environnement de test. Si elles sont approuvées, les modifications passent à l’étape suivante. S’ils sont rejetés, ils sont renvoyés au stade de développement pour d’autres travaux.
    5. Le « Travail de déploiement de production” déploie les changements dans l’environnement de production une fois qu’ils ont été approuvés.
    6. Le « Fait” indique que l’ensemble du flux de travail est terminé.

    Configurer GitLab

    Voici les étapes de configuration de GitLab :

    Prérequis

    Créez un compte GitLab. Si vous n’avez pas de compte GitLab, vous pouvez vous inscrire gratuitement sur le site officiel de GitLab.

    Étape 1

    Connectez-vous à GitLab avec l’une des options fournies :

    • Google
    • GitHub
    • Twitter
    • Bitbucket
    • Force de vente

    Dans mon cas, je me connecte avec mon compte GitHub.

    Étape 1

    Étape 2

    Connectez-vous avec votre GitHub compte. Vous verrez que l’écran est ouvert dans la capture d’écran ci-dessous.

    Étape 2

    Étape 3

    Cliquer sur « Créer un projet.”

    Créer un projet

    Étape 4

    Après avoir cliqué sur « Créer un projet« , l’écran ci-dessous propose quatre options :

    1. Créer un projet vierge
    2. Créer à partir d’un modèle
    3. Importer un projet
    4. Exécuter CI/CD pour un référentiel externeÉtape 4

    Étape 5

    Cliquer sur « Importer un projet.”

    Étape 5

    Permet d’importer de GitHub en cliquant sur « GitHub.”

    Étape 5.2

    Étape 6

    Quand on clique sur « Importer”, tous les référentiels existants sont affichés. Dans l’écran ci-dessous, nous pouvons voir qu’un total de dix-sept référentiels s’affichent.

    Étape 6

    Étape 7

    Importons les dépôts de GitHub ->GitLab. Dans mon cas, importons le référentiel dans le « Cypress_GitLab.”

    Étape 7

    Après avoir cliqué sur « Importer« , l’importation est lancée et terminée après quelques minutes.

    Importer 1

    Étape 7.2

    Étape 8

    Accédez au projet, qui est affiché comme ouvert dans la capture d’écran ci-dessous.

    Étape 8

    Étape 9

    Configurons le CI/CD en cliquant sur « Configurer CI/CD” de l’écran ci-dessus, ce qui se traduira par la capture d’écran ci-dessous.

    Étape 9

    Cliquer sur « Configurer le pipeline« , et cela ouvrira le pipeline par défaut.

    Étape 9.2

    Étape 10

    Mettons à jour l’existant .yaml fichier avec les données ci-dessous :

    e2eChrome:
  image: cypress/browsers:node18.12.0-chrome107      
  stage: test
  script:
    - npm ci
    - npm run RunTCOnChrome

e2eElectron:
  image: cypress/browsers:node18.12.0-chrome107     
  stage: test
  script:
    - npm ci
    - npm run RunTCOnElectron
  artifacts:
    when: always
    paths:
      - cypress/screenshots/
      - cypress/videos/

    Au dessus .yaml déposer:

    • image: spécifie l’image Docker à utiliser pour la tâche. Dans ce cas, nous utilisons l’image officielle Cypress Docker avec Node.js version 18.12.0
    • stages: Définit les différentes étapes du pipeline CI/CD. Dans ce cas, nous n’avons qu’une seule étape pour exécuter les tests.
    • Le artifacts La section est utilisée pour capturer les résultats du test et les rendre disponibles pour téléchargement une fois le travail terminé. Dans ce cas, nous capturons les captures d’écran et les vidéos générées pendant le test et les mettons à disposition dans le cypress/screenshots/ et cypress/videos/ répertoires, respectivement.

    Exécuter le scénario de test

    Vous trouverez ci-dessous les cas de test que j’ai pris comme exemple à des fins de démonstration.

    Exécuter le scénario de test

    1. Fichier : api.cy.js

    Dans ce cas de test, nous effectuons l’opération CRUD :

    describe('API automation Test Case:', () => {
    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);
        });
      });
    })

    2. Fichier : qaautomationlabs_Flow.cy.js

    Dans ce cas test, nous ouvrons ce site.

    Pas

    1. Ouvrez l’URL ci-dessus.
    2. Clique sur le « En savoir plus » bouton.
    3. Vérifier « Blog particulier.”
    4. Cliquez sur le lien du blog et recherchez les données.
    /// <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 data", () => {
    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");
  });
});

    Le package.json ressemble à la pièce jointe :

    {
  "name": "cypress_gitlab",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "RunTCOnChrome": "cypress run --browser chrome",
    "RunTCOnElectron": "cypress run --browser electron"
  },
  "author": "Kailash Pathak",
  "license": "ISC",
  "devDependencies": {
    "cypress": "^12.5.1"
  }
}

    Déclenchez le travail depuis GitLab ou poussez le code

    Lorsque nous déclenchons le travail depuis GitLab ou poussons n’importe quel code, le La tâche est déclenchée. Les cas de test commencent à s’exécuter dans Chrome et Electron.

    Ajout du navigateur d'électrons

    Lorsque nous déclenchons le travail dans la console, nous pouvons voir la première installation de dépendance requise. Ensuite, le scénario de test commence à s’exécuter.

    Exécution

    Rapport d’exécution de cas de test

    Chrome

    Dans la capture d’écran ci-dessous, nous pouvons voir le cas de test exécuté avec succès dans Chrome.

    Chrome 1
    Chrome 2

    Électron

    Dans la capture d’écran ci-dessous, nous pouvons voir le cas de test exécuté avec succès dans Electron.

    Électron 1
    Électron 2

    Résumons

    Cypress et GitLab peuvent être utilisés ensemble pour créer un pipeline de développement logiciel robuste et efficace. En intégrant Cypress aux pipelines CI/CD de GitLab, les développeurs peuvent automatiser le processus de test et s’assurer que les nouvelles modifications de code n’introduisent aucun problème ni régression.

    Share.
    Add A Comment

    Leave A Reply