> For the complete documentation index, see [llms.txt](https://docs.aqua-cloud.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aqua-cloud.io/documentation/de-documentation/automatisierung/automatisierung-ci-cd-werkzeuge-und-aqua-rest-api/gitlab-ci-cd-typescript-playwright.md).

# Gitlab CI/CD: TypeScript/Playwright

Aktualisierung der aqua-Testfallausführung basierend auf dem Testfalllauf in GitLab

1. Zuerst ein neues Projekt in Ihrem Arbeitsbereich erstellen.
2. Stellen Sie sicher, dass Node.js installiert ist.
3. Installieren Sie Playwright (wählen Sie TypeScript während des Installationsprozesses): \*\*npm init playwright\@latest**”**
4. Erstellen Sie einen Playwright-Testfall. In diesem Beispiel verwenden wir grundlegende Schritte, um die Website [https://playwright.dev](https://playwright.dev/) zu testen:

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

Für Automatisierungszwecke nehmen wir an, dass der Testtitel auf der tatsächlichen aqua-Testfall-ID basiert: Im obigen Fall aktualisieren wir den aqua-Testfall mit der ID=270.

Nun müssen wir die Aqua-Testfallausführung basierend auf dem Ergebnis des Playwright-Testfalls aktualisieren. Um dies allgemein und ausführbar für alle Fälle auf identische Weise zu machen, fügen wir den "AfterEach"-Hook in die TestBase-Klasse "testBase.ts" hinzu. Jede neue Prüfung wird diese erben. Die TestBase-Klasse sieht wie folgt aus:

```
import { test } from '@playwright/test';
import { EnvAquaRestConfig } from '../aquaAPI/envAquaRestConfig';
import { ApiTestExecutionNew,
        ApiTestStepExecutionStepType,
        ApiTestStepExecutionUpdateStatus,
        TestExecutionClient } from '../aquaAPI/src/api/aqua';




export class TestBase{}


test.afterEach(async ({ page }) => {
 console.log(`Finished ${test.info().title} with status ${test.info().status}`);


 if (test.info().status !== test.info().expectedStatus)
   console.log(`Did not run as expected, ended up at ${page.url()}`);


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


   let stepStatus = ApiTestStepExecutionUpdateStatus.Pass;
   if (test.info().status === 'failed') {
     stepStatus = ApiTestStepExecutionUpdateStatus.Failed;
   } else if (test.info().status != '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 oben genannte API-Anfrage müssen wir den Status der Testfalldurchführung von Playwright kennen. Dies erfolgt durch „test.info().status“.

Um Aqua mit Testfall-Ausführungsinformationen zu aktualisieren, müssen wir auch die aqua-Testfall-ID angeben: Im obigen Beispiel wird die Testfall-ID aus „Number(test.info().title)“ extrahiert.\
\
Klassen, die wir für API-Aufrufe verwenden, können aus dem hier verfügbaren JSON-Schema generiert werden:

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

Nach erfolgreichem Playwright-Test sollten wir die entsprechende einzelne Testfallausführung in aqua sehen.

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

Um das obige Playwright-Projekt mit GitLab CI/CD ausführen zu können, müssen wir die Workflow-Datei .gitlab-ci.yml erstellen. Ein Beispielskript für .gitlab-ci.yml ist unten gezeigt:

```
stages:
 - test


tests:
 stage: test
 image: mcr.microsoft.com/playwright:v1.42.0-jammy
 script:
   - npm ci
   - npx playwright test
```

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/lMJKeZxOhQULAXluViZZ" alt=""><figcaption></figcaption></figure>

Link zum GitLab :point\_down:

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.