# Gitlab CI/CD: TypeScript/Cypress

<figure><img src="/files/3D9gBEQ7m2CIclTflq21" alt=""><figcaption></figcaption></figure>

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:

<figure><img src="/files/uCr0RLHsArvDRMR2iv1z" alt="" width="498"><figcaption></figcaption></figure>

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

<figure><img src="/files/KQDrwI4wKlK2bTbytf81" alt=""><figcaption></figcaption></figure>

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:

{% embed url="<https://app.aqua-cloud.io/aquaWebNG/swagger/v1/swagger.json>" %}

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

<figure><img src="/files/9Z6seJiGFrU3CzUJBRaz" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/CFIELsSKIsRTgSBczPFG" alt=""><figcaption></figcaption></figure>

Link zum GitLab :point\_down:

{% embed url="<https://gitlab.com/aqua3191704/cypress-typescript-gitlab.git>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aqua-cloud.io/documentation/de-documentation/automatisierung/automatisierung-ci-cd-werkzeuge-und-aqua-rest-api/gitlab-ci-cd-typescript-cypress.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.