# 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](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:
{% embed url="" %}
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 :point\_down:
{% embed url="" %}
