Diese Seite wurde von der Cloud Translation API übersetzt.

Funktionsreferenz

Sofia Emelianova

Jecelyn Yeen

In dieser umfassenden Referenz zu den Funktionen des Chrome DevTools-Steuerfelds Aufzeichnung erfahren Sie, wie Sie Aufrufabfolgen teilen, bearbeiten und ihre Schritte anpassen.

Informationen zu den Grundlagen der Arbeit mit dem Bereich Aufzeichnung finden Sie unter Nutzerflüsse aufzeichnen, wiedergeben und analysieren.

Tastenkürzel kennenlernen und anpassen

Mit Tastenkürzeln können Sie im Rekorder schneller navigieren. Eine Liste der Standardkombinationen finden Sie unter Tastenkombinationen im Rekorder-Bereich.

Wenn Sie einen Hinweis mit allen Tastenkürzeln direkt im Aufzeichnungstool öffnen möchten, klicken Sie rechts oben auf Tastenkürzel anzeigen.

So passen Sie die Tastenkombinationen für die Rekorder an:

Öffne Einstellungen > Verknüpfungen:
Scrollen Sie nach unten zum Abschnitt Aufzeichnungsgerät.
Folgen Sie der Anleitung unter Verknüpfungen anpassen.

Aufrufabfolgen bearbeiten

Der Rekorder-Bereich der Entwicklertools hat ein Drop-down-Menü in der Kopfzeile, über das Sie einen User Flow zum Bearbeiten auswählen können.

Oben im Bereich Aufzeichnung haben Sie folgende Möglichkeiten:

Fügen Sie eine neue Aufnahme hinzu. Klicken Sie auf das Symbol +, um eine neue Aufnahme hinzuzufügen.
Alle Aufzeichnungen ansehen. Im Drop-down-Menü wird eine Liste der gespeicherten Aufnahmen angezeigt. Wähle die Option [Anzahl] Aufzeichnungen aus, um die Liste der gespeicherten Aufzeichnungen zu erweitern und zu verwalten.
Eine Aufzeichnung exportieren. Wenn Sie das Script weiter anpassen oder zur Meldung von Fehlern freigeben möchten, können Sie den Nutzerfluss in einem der folgenden Formate exportieren:
- JSON-Datei.
- @puppeteer/replay-Script
- Puppeteer-Script
- Puppeteer (einschließlich Lighthouse-Analyse).
Weitere Informationen zu den Formaten finden Sie unter Nutzerfluss exportieren.
Importieren Sie eine Aufnahme. Nur im JSON-Format.
Löschen Sie die Aufnahme. Löschen Sie die ausgewählte Aufnahme.

Sie können den Namen der Aufnahme auch bearbeiten, indem Sie neben dem Namen auf die Schaltfläche „Bearbeiten“ klicken.

Sie können Nutzerflüsse in der Rekorder App exportieren und importieren. Dies ist nützlich, wenn Sie Fehler melden, da Sie genau auf die Schritte zum Reproduzieren eines Fehlers zugreifen können. Sie können sie auch mit externen Bibliotheken exportieren und wiedergeben.

User Flow exportieren

So exportieren Sie einen User Flow:

Öffnen Sie den Nutzerfluss, den Sie exportieren möchten.
Klicken Sie oben im Bereich Aufzeichnung auf Exportieren.
Wählen Sie aus der Drop-down-Liste eines der folgenden Formate aus:
- JSON-Datei. Laden Sie die Aufzeichnung als JSON-Datei herunter.
- @puppeteer/replay. Laden Sie die Aufzeichnung als Puppeteer Replay-Skript herunter.
- Puppeteer: Laden Sie die Aufzeichnung als Puppeteer-Script herunter.
- Puppeteer (einschließlich Lighthouse-Analyse): Laden Sie die Aufzeichnung als Puppeteer-Script mit einer eingebetteten Lighthouse-Analyse herunter.
- Eine oder mehrere Optionen, die in der Rekorder App unter Erweiterungen exportieren bereitgestellt werden.
Speichern Sie die Datei.

Mit jeder Standardexportoption haben Sie folgende Möglichkeiten:

JSON. Bearbeiten Sie das visuell lesbare JSON-Objekt und importieren Sie die JSON-Datei wieder in den Aufzeichnungstool.
@puppeteer/replay. Spielen Sie das Skript mit der Puppeteer Replay-Bibliothek noch einmal ab. Beim Exportieren als @puppeteer/replay-Script bleiben die Schritte ein JSON-Objekt. Diese Option ist ideal, wenn Sie die Integration in Ihre CI/CD-Pipeline wünschen, aber dennoch die Flexibilität haben, die Schritte als JSON zu bearbeiten, sie später zu konvertieren und wieder in den Rekorder zu importieren.
Puppeteer-Script Spielen Sie das Skript mit Puppeteer noch einmal ab. Da die Schritte in JavaScript konvertiert werden, können Sie sie noch genauer anpassen, z. B. die Schritte in einer Schleife wiederholen. Allerdings können Sie das Skript nicht zurück in den Rekorder importieren.
Puppeteer (einschließlich Lighthouse-Analyse): Diese Exportoption ist die gleiche wie die vorherige, enthält aber Code zum Generieren einer Lighthouse-Analyse.

Führen Sie das Script aus und prüfen Sie die Ausgabe in einer flow.report.html-Datei:
```
# npm i puppeteer lighthouse
node your_export.js
```

Durch Installation einer Erweiterung in ein benutzerdefiniertes Format exportieren

Weitere Informationen finden Sie unter Erweiterungen für Rekorder.

User Flow importieren

So importieren Sie einen User Flow:

Klicken Sie oben im Bereich Rekorder auf die Schaltfläche Importieren.
Wählen Sie die JSON-Datei mit dem aufgezeichneten Nutzerfluss aus.
Klicken Sie auf die Schaltfläche Wiedergeben, um den importierten Nutzerfluss auszuführen.

Mit externen Bibliotheken wiederholen

Puppeteer Replay ist eine Open-Source-Bibliothek, die vom Chrome DevTools-Team verwaltet wird. Es basiert auf Puppeteer. Es ist ein Befehlszeilentool, mit dem Sie JSON-Dateien wiedergeben können.

Abgesehen davon können Sie JSON-Dateien mit den folgenden Drittanbieterbibliotheken umwandeln und wiedergeben.

JSON-Nutzerflüsse in benutzerdefinierte Scripts umwandeln:

Cypress Chrome Rekorder Damit können Sie JSON-Dateien für den Nutzerfluss in Cypress-Testscripts konvertieren. In dieser Demo sehen Sie, wie das funktioniert.
Nightwatch Chrome Recorder Sie können damit JSON-Dateien für den Nutzerfluss in Nightwatch-Testskripts konvertieren.
CodeceptJS Chrome Recorder Damit können Sie JSON-Dateien für den Nutzerfluss in CodeceptJS-Testscripts konvertieren.

JSON-Nutzerflüsse wiedergeben:

Mit Testcafe wiedergeben Mit TestCafe können Sie JSON-Dateien zum Nutzerfluss wiedergeben und Testberichte für diese Aufzeichnungen generieren.
Mit Sauce Labs wiederholen. Sie können die JSON-Dateien in Sauce Labs mit saucectl wiedergeben.

Fehler in Nutzerflüssen beheben

Wie bei jedem Code müssen Sie manchmal Fehler in den aufgezeichneten User Flows beheben.

Im Bereich Aufzeichnung können Sie die Wiedergabe verlangsamen, Haltepunkte setzen, die Ausführung Schritt für Schritt durchgehen und Code in verschiedenen Formaten parallel zu den Schritten prüfen.

Wiedergabe verlangsamen

Standardmäßig spielt der Aufzeichnungstool den User Flow so schnell wie möglich ab. Wenn Sie wissen möchten, was in der Aufzeichnung passiert, können Sie die Wiedergabegeschwindigkeit verlangsamen:

Öffnen Sie das Drop-down-Menü Erneut abspielen.
Wähle eine der folgenden Wiedergabegeschwindigkeiten aus:
- Normal (Standardeinstellung)
- Langsam
- Sehr langsam
- Extrem langsam

Langsame Wiedergabe.

Code prüfen

So prüfen Sie den Code eines User Flows in verschiedenen Formaten:

Öffnen Sie eine Aufzeichnung im Bereich Rekorder.
Klicken Sie rechts oben in der Liste mit den Schritten auf Code anzeigen.
Der Aufzeichnungstool zeigt die Schritte und ihren Code nebeneinander an.
Wenn Sie den Mauszeiger auf einen Schritt bewegen, hebt der Rekorder den entsprechenden Code in einem beliebigen Format hervor, einschließlich der von Erweiterungen bereitgestellten Codes.
Maximieren Sie die Drop-down-Liste „Format“ und wählen Sie das Format aus, das Sie für den Export von Nutzerflüssen verwenden möchten.

Es kann sich um eines der drei Standardformate handeln (JSON, @puppeteer/replay, Puppeteer-Skript oder ein von einer Erweiterung bereitgestelltes Format).
Fahren Sie mit der Fehlerbehebung fort, indem Sie Schrittparameter und ‑werte bearbeiten. Die Codeansicht kann nicht bearbeitet werden, wird aber entsprechend den Schritten auf der linken Seite aktualisiert.

Haltepunkte setzen und Code schrittweise ausführen

So legen Sie einen Haltepunkt fest und führen den Code schrittweise aus:

Bewegen Sie den Mauszeiger auf den Kreis neben einem beliebigen Schritt in einer Aufnahme. Der Kreis wird zu einem Haltepunktsymbol .
Klicken Sie auf das Haltepunktsymbol und spielen Sie die Aufzeichnung noch einmal ab. Die Ausführung wird am Haltepunkt angehalten.
Sie können die einzelnen Schritte zur Ausführung aufrufen, indem Sie oben im Bereich Rekorder in der Aktionsleiste auf die Schaltfläche Einen Schritt ausführen klicken.
Um die erneute Wiedergabe zu beenden, klicke auf Wiedergabe abbrechen.

Schritte bearbeiten

Sie können jeden Schritt in der Aufzeichnung bearbeiten, indem Sie während oder nach der Aufzeichnung auf die Schaltfläche daneben klicken.

Sie können auch fehlende Schritte hinzufügen und versehentlich aufgezeichnete Schritte entfernen.

Schritte hinzufügen

Manchmal müssen Sie Schritte manuell hinzufügen. Die Rekorder App erfasst beispielsweise hover-Ereignisse nicht automatisch, weil dies die Aufzeichnung verunreinigt und nicht alle nützlichen Ereignisse nützlich sind. UI-Elemente wie Drop-down-Menüs können jedoch nur auf hover angezeigt werden. Sie können Aufrufabfolgen der Webseiten manuell hover Schritte hinzufügen, die von solchen Elementen abhängen.

So fügen Sie einen Schritt manuell hinzu:

Öffne diese Demoseite und starte eine neue Aufnahme.
Bewegen Sie den Mauszeiger auf das Element im Darstellungsbereich. Ein Aktionsmenü wird eingeblendet.
Wählen Sie eine Aktion aus dem Menü aus und beenden Sie die Aufnahme. Der Rekorder erfasst nur das Klickereignis.
Versuchen Sie, die Aufnahme noch einmal abzuspielen, indem Sie auf Wiedergabe klicken. Die Wiedergabe schlägt nach einer Zeitüberschreitung fehl, da der Rekorder nicht auf das Menüelement zugreifen kann.
Klicken Sie auf das Dreipunkt-Menü neben dem Schritt Klicken und wählen Sie Schritt hinzufügen vor aus.
Maximieren Sie den neuen Schritt. Standardmäßig hat es den Typ waitForElement. Klicken Sie auf den Wert neben type und wählen Sie hover aus.
Legen Sie als Nächstes eine geeignete Auswahl für den neuen Schritt fest. Klicken Sie auf Auswählen und dann auf einen Bereich des Elements Hover over me! außerhalb des Pop-up-Menüs. Die Auswahl ist auf #clickable festgelegt.
Versuchen Sie noch einmal, die Aufzeichnung abzuspielen. Mit dem hinzugefügten Schritt gibt der Rekorder den Ablauf erfolgreich wieder.

Assertions hinzufügen

Während der Aufzeichnung können Sie beispielsweise HTML-Attribute und JavaScript-Properties prüfen. So fügen Sie eine Assertion hinzu:

Starten Sie eine Aufnahme, z. B. auf dieser Demoseite.
Klicken Sie auf Assertion hinzufügen.

Der Rekorder erstellt einen konfigurierbaren waitForElement-Schritt.
Geben Sie für diesen Schritt Selektoren an.
Konfigurieren Sie den Schritt, ändern Sie aber nicht seinen waitForElement-Typ. Sie können beispielsweise Folgendes angeben:
- HTML-Attribut: Klicken Sie auf Attribute hinzufügen und geben Sie den Namen und den Wert des Attributs ein, das von Elementen auf dieser Seite verwendet wird. Beispiel: data-test: <value>
- JavaScript-Eigenschaft Klicken Sie auf Properties hinzufügen und geben Sie den Namen und den Wert der Property im JSON-Format ein. Beispiel: {".innerText":"<text>"}
- Weitere Eigenschaften für den Schritt: Beispiel: visible: true.
Zeichnen Sie nun den Rest des User Flows auf und stoppen Sie dann die Aufzeichnung.
Klicken Sie auf Wiederholen. Wenn eine Behauptung fehlschlägt, zeigt der Aufzeichnungstool nach einem Zeitlimit eine Fehlermeldung an.

Im folgenden Video wird dieser Workflow veranschaulicht.

Schritte kopieren

Anstatt den gesamten User Flow zu exportieren, können Sie einen einzelnen Schritt in die Zwischenablage kopieren:

Klicken Sie mit der rechten Maustaste auf den Schritt, den Sie kopieren möchten, oder klicken Sie daneben auf das Dreipunkt-Menü .
Wählen Sie im Drop-down-Menü eine der Optionen Als… kopieren aus.

Wählen Sie im Drop-down-Menü eine Kopieroption aus.

Sie können Schritte in verschiedenen Formaten kopieren: JSON, Puppeteer, @puppeteer/replay und die von Erweiterungen bereitgestellten.

Schritte entfernen

Wenn Sie einen versehentlich aufgezeichneten Schritt entfernen möchten, klicken Sie mit der rechten Maustaste auf den Schritt oder auf das Dreipunkt-Menü daneben und wählen Sie Schritt entfernen aus.

Entferne einen Schritt.

Außerdem fügt der Aufzeichnungstool automatisch zwei separate Schritte am Anfang jeder Aufzeichnung hinzu:

Eine Aufnahme mit dem festgelegten Darstellungsbereich und den festgelegten Navigationsschritten.

Darstellungsbereich festlegen: Hier können Sie die Größe, Skalierung und andere Eigenschaften des Darstellungsbereichs steuern.
Navigation: Legt die URL fest und aktualisiert die Seite bei jeder Wiederholung automatisch.

Wenn Sie eine In-Page-Automatisierung ohne Aktualisieren der Seite durchführen möchten, entfernen Sie den oben beschriebenen Navigationsschritt.

Konfigurationsschritte

So konfigurieren Sie einen Schritt:

Geben Sie den Typ an: click, doubleClick, hover, (Eingabe) change, keyUp, keyDown, scroll, close, navigate (zu einer Seite), waitForElement, waitForExpression oder setViewport.

Andere Properties hängen vom Wert von type ab.
Geben Sie die erforderlichen Attribute unter type an.
Klicken Sie auf die entsprechenden Schaltflächen, um optionale typspezifische Properties hinzuzufügen und anzugeben.

Eine Liste der verfügbaren Eigenschaften finden Sie unter Schritteigenschaften.

Wenn Sie ein optionales Attribut entfernen möchten, klicken Sie daneben auf die Schaltfläche Entfernen.

Wenn Sie ein Element zu einer Arrayeigenschaft hinzufügen oder daraus entfernen möchten, klicken Sie neben dem Element auf die Schaltfläche + oder -.

Schritteigenschaften

Für jeden Schritt können die folgenden optionalen Eigenschaften verwendet werden:

target: eine URL für das Chrome DevTools Protocol (CDP)-Ziel. Das Standard-main-Keyword bezieht sich auf die aktuelle Seite.
assertedEvents, die derzeit nur ein einzelnes navigation-Ereignis sein können

Weitere allgemeine Eigenschaften, die für die meisten Schritttypen verfügbar sind, sind:

frame: ein Array mit nullbasierten Indizes, die einen iframe identifizieren, der verschachtelt werden kann. Sie können beispielsweise den ersten (0) iFrame innerhalb eines zweiten (1) iFrames des Hauptziels als [1, 0] identifizieren.
timeout: Anzahl der Millisekunden, die vor der Ausführung eines Schritts gewartet werden soll. Weitere Informationen finden Sie unter Zeitüberschreitungen für Schritte anpassen.
selectors: ein Array von Selektoren. Weitere Informationen finden Sie unter Selektoren.

Typspezifische Properties:

Typ	Attribut	Erforderlich	Beschreibung
`click` `doubleClick`	`offsetX` `offsetY`		Relativ zum oberen linken Rand des Inhaltsfelds des Elements, in Pixeln
`click` `doubleClick`	`button`		Zeigertaste: primär \| sekundär \| zweite \| zurück \| vorwärts
`change`	`value`		Endwert
`keyDown` `keyUp`	`key`		Schlüsselname
`scroll`	`x` `y`		Absolute X- und Y-Positionen des Scrollens in Pixeln, Standardwert 0
`navigate`	`url`		Ziel-URL
`waitForElement`	`operator`		>= \| == (Standard) \| <=
`waitForElement`	`count`		Anzahl der von einem Selector identifizierten Elemente
`waitForElement`	`attributes`		HTML-Attribut und sein Wert
`waitForElement`	`properties`		JavaScript-Eigenschaft und ihr Wert in JSON
`waitForElement`	`visible`		Boolescher Wert. „True“, wenn sich das Element im DOM befindet und sichtbar ist (d. h. nicht `display: none` oder `visibility: hidden`)
`waitForElement` `waitForExpression`	`asserted events`		Derzeit nur `type: navigation`, aber Sie können den Titel und die URL angeben.
`waitForElement` `waitForExpression`	`timeout`		Maximale Wartezeit in Millisekunden
`waitForExpression`	`expression`		JavaScript-Ausdruck, der in „true“ aufgelöst wird
`setViewport`	`width` `height`		Breite und Höhe des Darstellungsbereichs in Pixeln
`setViewport`	`deviceScaleFactor`		Ähnlich wie „DPR“, Standardeinstellung 1
`setViewport`	`isMobile` `hasTouch` `isLandscape`		Boolesche Flags, die angeben, ob Folgendes aktiviert werden soll: Meta-Tag berücksichtigen Touch-Ereignisse unterstützen Querformat anzeigen

Es gibt zwei Eigenschaften, die die Wiedergabe anhalten:

Mit der Eigenschaft waitForElement wird der Schritt auf das Vorhandensein oder Fehlen einer Reihe von Elementen gewartet, die durch einen Selektor identifiziert werden. Beim folgenden Schritt wird beispielsweise gewartet, bis sich weniger als drei Elemente auf der Seite befinden, die dem Selektor .my-class entsprechen.
```
  "type": "waitForElement",
  "selectors": [".my-class"],
  "operator": "<=",
  "count": 2,
```
Das Attribut waitForExpression veranlasst den Schritt, zu warten, bis ein JavaScript-Ausdruck in „true“ aufgelöst wird. Im folgenden Beispiel wird die Wiedergabe beispielsweise für zwei Sekunden pausiert und dann auf „wahr“ gesetzt, damit die Wiedergabe fortgesetzt werden kann.
```
  "type": "waitForExpression",
  "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
```

Zeitlimits für Schritte anpassen

Wenn Ihre Seite langsame Netzwerkanfragen oder lange Animationen enthält, kann die Wiedergabe bei Schritten fehlschlagen, die die Standardzeitüberschreitung von 5000 Millisekunden überschreiten.

Um dieses Problem zu vermeiden, können Sie das Standardzeitlimit für jeden Schritt auf einmal anpassen oder separate Zeitüberschreitungen für bestimmte Schritte festlegen. Zeitüberschreitungen bei bestimmten Schritten überschreiben die Standardeinstellung.

So passen Sie das Standardzeitlimit für jeden Schritt gleichzeitig an:

Klicken Sie auf Einstellungen für die Wiedergabe, damit das Feld Zeitlimit bearbeitbar wird.
Legen Sie im Feld Zeitlimit den Wert für das Zeitlimit in Millisekunden fest.
Klicken Sie auf Wiedergabe, um die angepasste Standardzeitüberschreitung in Aktion zu sehen.

So überschreiben Sie die Standardzeitüberschreitung für einen bestimmten Schritt:

Maximieren Sie den Schritt und klicken Sie auf Zeitlimit hinzufügen.
Klicken Sie auf das timeout: <value> und legen Sie den Wert in Millisekunden fest.
Klicken Sie auf Wiedergeben, um den Schritt mit dem Zeitlimit in Aktion zu sehen.

Wenn Sie das Überschreiben einer Zeitüberschreitung für einen Schritt entfernen möchten, klicken Sie daneben auf die Schaltfläche Löschen.

Selektoren

Wenn Sie eine neue Aufnahme starten, können Sie Folgendes konfigurieren:

Konfiguration einer neuen Aufnahme

Geben Sie im Textfeld Selektorattribut ein benutzerdefiniertes Testattribut ein. Der Aufzeichnungstool verwendet dieses Attribut, um Auswahlen zu erkennen, anstatt eine Liste von häufig verwendeten Testattributen.
Wählen Sie unter Aufzuzeichnende Selektortypen die Selektortypen aus, die automatisch erkannt werden sollen:
- CSS. Syntaxselektoren.
- ARIA. Semantische Selektoren
- Text. Selektoren mit dem kürzesten eindeutigen Text, falls verfügbar.
- XPath. Selektoren, die die XML-Pfadsprache verwenden.
- Pierce. Selektoren, die den CSS-Selektoren ähneln, aber das Shadow-DOM durchdringen können.

Gängige Testeinzelheiten

Bei einfachen Webseiten reichen id-Attribute und CSS-class-Attribute aus, damit der Rekorder die Selektoren erkennt. Dies ist jedoch nicht immer der Fall, weil:

Ihre Webseiten verwenden möglicherweise dynamische Klassen oder IDs, die sich ändern.
Ihre Selektoren können aufgrund von Code- oder Framework-Änderungen beschädigt werden.

Beispielsweise können die CSS-class-Werte automatisch für Anwendungen generiert werden, die mit modernen JavaScript-Frameworks (z. B. React, Angular, Vue) und CSS-Frameworks entwickelt wurden.

Automatisch generierte CSS-Klassen mit zufälligen Namen.

In diesen Fällen können Sie data-*-Attribute verwenden, um stabilere Tests zu erstellen. Es gibt bereits einige gängige data-*-Auswahlen, die Entwickler für die Automatisierung verwenden. Diese können auch vom Rekorder unterstützt werden.

Wenn Sie die folgenden gängigen Testelektoren auf Ihrer Website definiert haben, werden sie vom Aufzeichnungstool automatisch erkannt und zuerst verwendet:

data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing

Sehen Sie sich zum Beispiel die -Element auf dieser Demoseite und sehen Sie sich die Testattribute an:

Definierte Testselektoren

Erfassen Sie einen Klick auf „Cappuccino“, maximieren Sie den entsprechenden Schritt in der Aufzeichnung und prüfen Sie die erkannten Auswahlschaltflächen:

Es wurde ein gängiger Test-Selektor erkannt.

Auswahl für die Aufnahme anpassen

Sie können die Auswahl einer Aufnahme anpassen, wenn die gängigen Testauswahlen nicht für Sie geeignet sind.

Auf dieser Demoseite wird beispielsweise das Attribut data-automate als Selektor verwendet. Starten Sie eine neue Aufzeichnung und geben Sie den data-automate als Selektorattribut ein.

Passen Sie die Auswahl für die Aufnahme an.

Geben Sie eine E-Mail-Adresse ein und beobachten Sie den Selektorwert ([data-automate=email-address]).

Das Ergebnis der Auswahl der benutzerdefinierten Auswahl.

Selektorpriorität

Der Aufzeichner sucht je nachdem, ob Sie ein Attribut für benutzerdefinierte CSS-Selektoren angegeben haben, in der folgenden Reihenfolge nach Selektoren:

Falls angegeben:
1. CSS-Selektor mit Ihrem benutzerdefinierten CSS-Attribut.
2. XPath-Selektoren
3. ARIA-Selektor, falls gefunden.
4. Ein Selector mit dem kürzesten eindeutigen Text, falls gefunden.
Wenn nicht angegeben:
1. ARIA-Auswahl, falls gefunden
2. CSS-Selektoren mit der folgenden Priorität:
  1. Die am häufigsten für Tests verwendeten Attribute:
    - data-testid
    - data-test
    - data-qa
    - data-cy
    - data-test-id
    - data-qa-id
    - data-testing
  2. ID-Attribute, z. B. <div id="some_ID">
  3. Normale CSS-Selektoren.
3. XPath-Selektoren
4. Pierce-Selektoren.
5. Selector mit dem kürzesten eindeutigen Text, falls gefunden.

Es können mehrere reguläre CSS-, XPath- und Pierce-Selektoren vorhanden sein. Mit der Rekorder App können Sie Folgendes aufzeichnen:

Regelmäßige CSS- und XPath-Selektoren auf jeder Stammebene, also verschachtelte Schattenhosts, falls vorhanden.
Durchbohren Sie Selektoren, die unter allen Elementen innerhalb aller Schattenwurzeln eindeutig sind.