ANDP - Unique Identifiers

Im Folgenden wird die Verwendung von Unique Identifiern innerhalb der FormGen Applikation beschrieben. Zur Unterstützung von automatisierten Integrationstests und benutzerdefiniertes Styling sind alle relevanten Komponenten des Formular-Generators sowie interaktive Elemente mit festen Ids bzw. Klassennamen ausgestattet.

Implementierung

Die Identifikatoren der Elemente sind über das  id-Attribut, bzw. das  data-class-Attribut der HTML-Elemente definiert und adressierbar.

ID-Katalog

Der ID-Katalog ist in logische Kategorien unterteilt, um die Übersichtlichkeit zu gewährleisten. Jedes Eintrag wird durch eine kurze Beschreibung der Komponente (Was ist das für ein Element, Button, oder wofür ist diese ID?), den Typ des Identifikators (id oder  data-class) sowie die Struktur bzw. Zusammensetzung der ID definiert.

Formular Fortschrittsanzeige

  • Buttons für die Formularseite: id - pagination-element-<PAGE_NUMBER> 

Navigationsleiste (Bottom Sticky Bar)

  • Navigation Buttons:  id - sticky-bar-<BUTTON_TYPE>-btn 

Folgende BUTTON_TYPES sind defaultmäßig verfügbar

  • expert-search-download - Download der Suchergebnisse einer Expertensuche als Excel Datei
  • expert-search  - Expertensuche starten
  • expert-search-details - Details eines Eintrags im Suchergebniss anzeigen 
  • next-page - Weiter zur nächsten Seite
  • previous-page - Zurück zur vorherigen Seite
  • print - Druckansicht öffnen
  • submit  - Formular abschicken
  • cancel  - Abbrechen
  • detail-info  - Zu den Detailinformation

Formular Elemente

Allgemeine Identifikation eines Elements
  • Beliebiges Element: id - <JSON_PATH> 
  • Beliebiges Element, das öfters vorkommt: data-class - <ELEMENT_ID> 

Hinweis:
Die ELEMENT_ID ist die gleiche ID die von ActaNova für die Identifikation des Elements benutzt. 

  • Input/Inhalt löschen Button: id -  <ELEMENT_JSON_PATH>-delete-content-btn
  • Allgemeine Identifikation eines löschen Buttons: data-class - delete-content-btn

Boolean-spezifische Komponenten

  • True radio-button: id - <JSON_PATH_OF_ELEMENT>-radio-btn-true 
  • False radio-button: id - <JSON_PATH_OF_ELEMENT>-radio-btn-false 

Binary-spezifische Komponenten

  • Button fürs Löschen einer Dateie: id - <JSON_PATH_OF_ELEMENT>-binary-file-delete-btn-<FILE_INDEX>
  • Button fürs Herunterladen einer Dateie: id - <JSON_PATH_OF_ELEMENT>-binary-file-download-btn-<FILE_INDEX> 
  • Allgemeine Identifikation eines löschen Buttons für Dateien: data-class - binary-file-delete-btn 
  • Allgemeine Identifikation eines herunterladen Buttons für Dateien: data-class - binary-download-btn 

Aggregat-spezifische Komponenten

  • Aggregat Wrapper: id - aggregate-wrapper-<JSON_PATH>   
Action Buttons
  • Aggregat Element oben hinzufügen: id - <AGGREGATE_ID>-add-agg-item-top 
  • Aggregat Element unten hinzufügen: id - <AGGREGATE_ID>-add-agg-item-bottom
  • Aggregat Element löschen: data-class - agg-entry-delete-btn 
  • Aggregat Element bearbeiten: data-class - agg-entry-edit-btn 
  • Aggregat Element kopieren: data-class - agg-entry-copy-btn 
  • Aggregat Element hinzufügen: data-class - agg-entry-add-bt 
  • Aggregat Element auf-/zuklappen: data-class - agg-toggle-details-btn 
Aggregat Pagination
  • Vorherige Aggregatseite: data-class - agg-pagination-previous-page-btn 
  • Nächste Aggregatseite: data-class - agg-pagination-next-page-btn
  • Spezifische Aggregatseite Button: data-class - agg-pagination-page-<PAGE_NUMBER>-btn 
    Hinweis:
    Diese Identifikatoren sind deswegen als Klassennaemn definiert, weil sie in einem Aggregat immer zwei mal vorkommen: oben und unten.
Globaler Aggregat Filter
  • Dropdown für die Filterkategorie: id - <AGGREGATE_ID>-filter-dropdown 
  • Filter Input: id -  <AGGREGATE_ID>-filter-input
  • Filter hinzufügen Button: id - AGGREGATE_ID>-add-filter-btn>
Aggregat CSV hochladen
  • CSV hochladen Button: id - <AGGREGATE_ID>-csv-upload-btn

Dropdown-spezifische Komponenten

Hinweis:
PARENT_JSON_PATH ist der JSON-Path des Dropdown-Elements, zu dem dieses Item gehört.
ITEM_REFERENCE_ID ist die Referenz-ID bzw. identifier , welches auch von Acta-Nova im possibleValueSet bereitgestellt wird.

  • Dropdown List Elemente: id - <PARENT_JSON_PATH>-<ITEM_REFERENCE_ID> 
  • Dropdown radio-buttons für Catalog Elemente mit Einzelauswahl: id - <JSON_PATH_OF_ELEMENT>-radio-<ROW_INDEX_NUMBER>-<COLUMN_INDEX_NUMBER> 
  • Dropdown checkboxes für Catalog Elemente mit Mehrfachauswahl: id - <JSON_PATH_OF_ELEMENT>-checkbox-<ROW_INDEX_NUMBER>-<COLUMN_INDEX_NUMBER> 

Expertensuche

  • Reihe eines Suchergebnisses: id - experten-search-result-row-<ROW_INDEX> 
  • Button für die Detailansicht eines Suchergebnisses: id -  expert-search-result-row-<ROW_INDEX>-btn-<BUTTON_ID> 
    Hinweis
     BUTTON_ID ist die  buttonID die auch von ActaNova mit einem erfolgreichem Suchergebnis mitgeliefert wird.

Overlays

  • Schließen Icon-Button (x) eines Overlays: id - overlay-close-btn
  • Verschiedene Buttons eines Overlays: id - <OVERLAY_TYPE>-overlay-<OVERLAY_BTN_TYPE>-btn 

Folgende OVERLAY_TYPES sind defaultmäßig verfügbar

  • update-form - Overlay nach Aktualisierung eines Formulars
  • precondition - Precondition Overlay
  • leave - Overlay beim verlassen eines Formulars
  • info - Informations-overlay
  • expert-search-table-result-limit - Overlay für Suchergebnisse mit mehr Ergebnisse als das Limi
  • aggregate-delete-confirmation - Bestätigung von Löschaktion bei einem Aggregatelement

Folgende OVERLAY_BTN_TYPES sind defaultmäßig verfügbar:

  • cancel  - Abbrechen
  • save  - Formular Zwischenspeichern
  • leave  - Formular Verlassen
  • close - Overlay schließen
  • delete-entry - Aggregatitem löschen
  • excel-download - Suchergebnisse als Excel Datei herunterladen
  • submit - Beim Info Overlay

Anwendungsbeispiel

Um die oben definierten Identifikatoren beispielsweise in einem e2e-Testin Framework wie Playwright zu verwenden oder um eigene CSS Styles zu schreiben, können die Locators direkt über CSS-Selektoren angesprochen werden. Hier sind fünf typische Beispiele:

1. Klick auf einen Navigations-Button (Statische ID)

Um zur nächsten Seite des Formulars zu navigieren:



// Selektiert den "Weiter"-Button in der Sticky Bar über die ID

await page.locator('#sticky-bar-next-page-btn').click();

2. Interaktion mit einem Formular-Element (Dynamische ID)

Eingabe in ein Textfeld über den bekannten JSON-Path:



const jsonPath = '$.properties["89D6E122-2CC7-4940-A202-F1D2C51898AD"]';

await expect(page.locator(`[id='${jsonPath}']`).fill('Max Mustermann')).toBeVisible();

Wichtig!
Da der Standard-ID-Selektor (`#<ID>`) empfindlich auf Sonderzeichen reagieren kann – insbesondere bei dynamisch generierten IDs oder IDs, die mit Symbolen beginnen – wird die Verwendung von Attribut-Selektoren (`[id='<ID>']`) empfohlen. Dies gewährleistet eine stabilere Identifikation der Elemente und beugt Fehlern bei der Selektion vor.

3. Zugriff über CSS-Klassen (Mehrfach vorkommende Elemente)

Da data-class verwendet wird, um Elemente zu identifizieren, die mehrfach vorhanden sein können, nutzt man den Attribut-Selektor:



// Klickt auf den ersten "Eintrag löschen" Button eines Aggregats

await page.locator('[data-class="agg-entry-delete-btn"]').first().click();