Wissensdatenbank

Gitlab CI/CD: TypeScript/Cypress

Dieser Leitfaden demonstriert die Integration automatisierter Tests in Ihre GitLab CI/CD-Pipeline, speziell unter Verwendung von Typescript/Cypress. Die Schritte können jedoch für jedes Testautomatisierungstool oder -framework angepasst werden, um Ergebnisse an Aqua zu übermitteln.

Voraussetzungen

  • Ein GitLab-Projekt mit aktiviertem CI/CD

  • Ein aqua-Konto zum Einreichen von Testergebnissen

Aktualisieren der aqua-Testfallausführung basierend auf der Testfallausführung in GitLab

  1. Generieren Sie ein neues Projekt in Ihrem Arbeitsbereich

  2. Stellen Sie sicher, dass Node.js installiert ist.

  3. Installieren Sie Cypress mit TypeScript: „npm install --save-dev typescript“, dadurch wird die folgende Struktur erstellt:

Schreibe einen Testfall in Cypress. Für dieses Demonstrationsbeispiel verwenden wir einen UI-Test, der die Website „https://example.cypress.io“ testet. Der folgende e2e-Test wird im Projektordner /Cypress/e2e/ erstellt:

Zum Zweck der Automatisierung nehmen wir an, dass der Testtitel auf der tatsächlichen aqua-Testfall-ID basiert: z.B. im obigen Fall haben wir den aqua-Testfall mit der ID=270 aktualisiert.

Nun müssen wir die aqua-Testfallausführung basierend auf dem Ergebnis des Cypress-Testlaufs aktualisieren. Um es allgemein und ausführbar für alle Fälle zu machen, fügen wir einen "AfterEach"-Hook-Block in die Support-Datei ein: .../cypress/support/e2e.ts:

import { EnvAquaRestConfig } from '../../aquaClient/envAquaRestConfig';
import { ApiTestExecutionNew, ApiTestStepExecutionStepType, ApiTestStepExecutionUpdateStatus, TestExecutionClient } from '../../aquaClient/src/api/aqua';
import './commands'
import fetch from "node-fetch";


// Alternatively you can use CommonJS syntax:
// require('./commands')


beforeEach (() => {
   // before each test block
})


afterEach(async function () {


   const restConfig = new EnvAquaRestConfig();
   const client = new TestExecutionClient(restConfig.url, { fetch });
   const testCaseId = Number(this.currentTest.title);


   cy.log(Cypress.currentTest.title);
   let stepStatus = ApiTestStepExecutionUpdateStatus.Pass;
   if (this.currentTest.state === 'failed') {
     stepStatus = ApiTestStepExecutionUpdateStatus.Failed;
   } else if (this.currentTest.state != 'passed') {
     throw new Error('no such status for test case execution');
   }
  
   const executionData = {
     Guid: undefined,
     TestCaseId: testCaseId,
     TestCaseName: undefined,
     Finalize: false,
     ValueSetName: undefined,
     TestScenarioInfo: undefined,
     Steps: [
       {
         Index: 1,
         Name: 'Step 1',
         StepType: ApiTestStepExecutionStepType.Step,
         Status: stepStatus,
       },
     ],
     TestedVersion: undefined,
     ExecutionDuration: undefined,
     AttachedLabels: undefined,
     CustomFields: undefined,
     Attachments: undefined
   } as unknown as ApiTestExecutionNew;
    await client.create([executionData]);
  
 })

Für die obige API-Anfrage müssen wir den Ausführungsstatus des Testfalls von Cypress kennen. Dies wird durch „cy.currentTest.state“ erledigt.

Um aqua mit Testfall-Ausführungsinformationen zu aktualisieren, müssen wir auch die aqua-Testfall-ID angeben: Im obigen Beispiel wird die Testfall-ID von „Number(this.currentTest.title)“ extrahiert.

Klassen, die wir für API-Aufrufe verwenden, können aus dem JSON-Schema generiert werden, das hier verfügbar ist:

Nach erfolgreicher Ausführung des JUnit-Tests sollten wir die entsprechende einzelne Testfallausführung in aqua sehen.

Um das oben genannte Cypress-Projekt mit GitLab CI/CD ausführen zu können, müssen wir die entsprechende Workflow-Datei .gitlab-ci.yml erstellen. Ein einfaches Beispiel eines .gitlab-ci.yml-Skripts ist unten gezeigt:

stages:
 - test


test:
 image: cypress/browsers
 stage: test
 script:
   # install dependencies
   - npm ci
   # run Cypress tests
   - npx cypress run --browser chrome

Sobald ein GitLab-Test-Runner konfiguriert und mit Ihren GitLab-Projekten verbunden ist, können wir die GitLab-Pipeline mit dem obigen Workflow ausführen.

Link zum GitLab 👇

PreviousGitlab CI/CD: JAVA/PlaywrightNextGitlab CI/CD: TypeScript/Playwright

Last updated