Funktionsreferenz

Sofia Emelianova
Sofia Emelianova
GitHub
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 Standard-Tastenkombinationen finden Sie im Hilfeartikel Tastenkombinationen für das Steuerfeld für die Aufzeichnung.

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

Die Schaltfläche „Tastenkürzel anzeigen“.

So passen Sie die Tastenkürzel für den Aufnahmemodus an:

  1. Öffnen Sie Einstellungen. Einstellungen > Verknüpfungen.
  2. Scrollen Sie nach unten zum Abschnitt Aufzeichnungsgerät.
  3. Folgen Sie der Anleitung unter Verknüpfungen anpassen.

Aufrufabfolgen bearbeiten

Im Bereich „DevTools-Aufzeichnung“ befindet sich in der Kopfzeile ein Drop-down-Menü, über das Sie einen Nutzerfluss zum Bearbeiten auswählen können.

Oben im Bereich Aufzeichnung haben Sie folgende Möglichkeiten:

  1. Fügen Sie eine neue Aufnahme hinzuHinzufügen. Klicken Sie auf das Symbol +, um eine neue Aufnahme hinzuzufügen.
  2. Alle Aufnahmen ansehenMaximieren. Im Drop-down-Menü wird eine Liste der gespeicherten Aufnahmen angezeigt. Wählen Sie die Option N Aufnahmen aus, um die Liste der gespeicherten Aufnahmen zu maximieren und zu verwalten. Alle Aufnahmen ansehen

  3. Aufzeichnung exportierenDateidownload 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:

    Weitere Informationen zu den Formaten finden Sie unter Nutzerfluss exportieren.

  4. Importieren Sie eine Aufnahme.Dateien hochladen. Nur im JSON-Format.

  5. Löschen Sie die AufnahmeLöschen.. 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“ Bearbeiten. klicken.

User Flows teilen

Sie können Nutzerflüsse im Rekorder exportieren und importieren. Das ist bei der Fehlermeldung hilfreich, da Sie eine genaue Aufzeichnung der Schritte zur Reproduktion eines Fehlers teilen können. Sie können sie auch mit externen Bibliotheken exportieren und wiedergeben.

User Flow exportieren

So exportieren Sie einen User Flow:

  1. Öffnen Sie den Nutzerfluss, den Sie exportieren möchten.

  2. Klicken Sie oben im Bereich Aufzeichnung auf Exportieren.

    Eine Liste der Formatoptionen im Menü „Exportieren“.

  3. Wählen Sie in 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-Script herunter.
    • Puppeteer Laden Sie die Aufzeichnung als Puppeteer-Script herunter.
    • Puppeteer (für Firefox) Laden Sie die Aufzeichnung als Puppeteer für Firefox-Script herunter.
    • Puppeteer (einschließlich Lighthouse-Analyse) Laden Sie die Aufzeichnung als Puppeteer-Script mit einer eingebetteten Lighthouse-Analyse herunter.
    • Eine oder mehrere Optionen aus den Exporterweiterungen des Rekorders

  4. Speichern Sie die Datei.

Mit jeder Standardexportoption haben Sie folgende Möglichkeiten:

  • JSON. Bearbeiten Sie das visuell lesbare JSON-Objekt und import Sie die JSON-Datei wieder in den Aufzeichnungstool.
  • @puppeteer/replay. Wiederholen Sie das Script mit der Puppeteer Replay-Bibliothek. Beim Exportieren als @puppeteer/replay-Script bleiben die Schritte ein JSON-Objekt. Diese Option eignet sich hervorragend, wenn Sie die Integration in Ihre CI/CD-Pipeline wünschen, aber trotzdem die Flexibilität haben möchten, die Schritte als JSON zu bearbeiten, später zu konvertieren und wieder in den Aufzeichnungstool zu importieren.
  • Puppeteer-Script Wiederholen Sie das Script mit Puppeteer. Da die Schritte in JavaScript konvertiert werden, können Sie sie noch genauer anpassen, z. B. die Schritte in einer Schleife wiederholen. Es gibt jedoch einen Haken: Dieses Script kann nicht wieder in den Rekorder importiert werden.
  • Puppeteer (für Firefox) Im Rahmen der WebDriver-BiDi-Unterstützung können Sie dieses Puppeteer-Script sowohl in Chrome als auch in Firefox ausführen.

  • Puppeteer (einschließlich Lighthouse-Analyse) Diese Exportoption entspricht der vorherigen, enthält aber Code, der eine Lighthouse-Analyse generiert.

    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

    Der Lighthouse-Bericht wird in Chrome geöffnet.

Daten in einem benutzerdefinierten Format exportieren, indem Sie eine Erweiterung installieren

Weitere Informationen finden Sie unter Erweiterungen für Rekorder.

User Flow importieren

So importieren Sie einen User Flow:

  1. Klicken Sie oben im Bereich Aufzeichnung auf die Schaltfläche ImportierenDateien hochladen.. Importieren Sie die Aufnahme.
  2. Wählen Sie die JSON-Datei mit dem aufgezeichneten Nutzerfluss aus.
  3. Klicken Sie auf die Schaltfläche Wiederholen.Wiedergeben, um den importierten Nutzerfluss auszuführen.

Mit externen Bibliotheken wiedergeben

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.

Außerdem können Sie JSON-Dateien mit den folgenden Drittanbieterbibliotheken transformieren und wiedergeben.

JSON-Nutzerflüsse in benutzerdefinierte Scripts umwandeln:

  • Cypress Chrome Recorder 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 Mit diesem Tool können Sie JSON-Dateien für den Nutzerfluss in Nightwatch-Testscripts konvertieren.
  • CodeceptJS Chrome Recorder Mit diesem Tool können Sie JSON-Dateien für den Nutzerfluss in CodeceptJS-Testscripts konvertieren.

JSON-Nutzerflüsse wiedergeben:

Nutzerflüsse debuggen

Wie bei jedem Code müssen Sie manchmal die aufgezeichneten Nutzerflüsse 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 besser verstehen möchten, was in der Aufnahme passiert, können Sie die Wiedergabegeschwindigkeit verlangsamen:

  1. Öffne das Drop-down-Menü Wiederholen.Wiedergabe.
  2. Wähle eine der folgenden Optionen für die Wiedergabegeschwindigkeit 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:

  1. Öffnen Sie eine Aufnahme im Bereich Aufzeichnungen.
  2. Klicken Sie rechts oben in der Liste der Schritte auf Code anzeigen. Die Schaltfläche „Code anzeigen“.
  3. Der Aufzeichnungstool zeigt die Schritte und ihren Code nebeneinander an. Die nebeneinander liegenden Ansichten der Schritte und deren Code.
  4. Wenn Sie den Mauszeiger auf einen Schritt bewegen, hebt der Aufzeichner den entsprechenden Code in einem beliebigen Format hervor, einschließlich der von Erweiterungen bereitgestellten.

  5. Maximieren Sie die Drop-down-Liste „Format“, um ein Format auszuwählen, mit dem Sie Nutzerflüsse exportieren.

    Drop-down-Liste „Format“

    Es kann eines der drei Standardformate (JSON, @puppeteer/replay, Puppeteer-Script) oder ein Format sein, das von einer Erweiterung bereitgestellt wird.

  6. Fahren Sie mit der Fehlerbehebung fort, indem Sie Schrittparameter und -werte bearbeiten. Die Codeansicht kann nicht bearbeitet werden, sondern wird entsprechend aktualisiert, wenn Sie Änderungen an den Schritten auf der linken Seite vornehmen.

Haltepunkte setzen und Code schrittweise ausführen

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

  1. Bewegen Sie den Mauszeiger auf den Kreis Schritt. neben einem beliebigen Schritt in einer Aufnahme. Der Kreis wird zu einem Haltepunkt.-Gliederungssymbol.
  2. Klicken Sie auf das Symbol Haltepunkt. für den Haltepunkt und wiederholen Sie die Aufzeichnung. Die Ausführung wird am Haltepunkt pausiert. Ausführung pausiert.
  3. Wenn Sie die Ausführung Schritt für Schritt durchgehen möchten, klicken Sie oben im Bereich Aufzeichnung in der Aktionsleiste auf die Schaltfläche Einen Schritt ausführen Einen Schritt ausführen.
  4. Wenn Sie die Wiederholung beenden möchten, klicken Sie auf Leg eine Pause ein. 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 Maximieren. 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. Der Aufzeichnungstool erfasst beispielsweise hover-Ereignisse nicht automatisch, da dies die Aufzeichnung verunreinigt und nicht alle diese 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:

  1. Öffnen Sie diese Demoseite und starten Sie eine neue Aufnahme. Starten Sie eine Aufnahme, um ein Hover-Ereignis zu erfassen.
  2. Bewegen Sie den Mauszeiger im Darstellungsbereich auf das Element. Ein Aktionsmenü wird eingeblendet. Bewegen Sie den Mauszeiger auf das Element.
  3. Wählen Sie eine Aktion aus dem Menü aus und beenden Sie die Aufnahme. Der Aufzeichnungstool erfasst nur das Klickereignis. Klicken Sie auf eine Aktion und beenden Sie die Aufnahme.
  4. Versuchen Sie, die Aufnahme noch einmal abzuspielen, indem Sie auf Wiederholen. Wiedergabe klicken. Die Wiedergabe schlägt nach einem Zeitlimit fehl, da der Aufzeichnungstool nicht auf das Element im Menü zugreifen kann. Wiedergabe fehlgeschlagen.
  5. Klicken Sie neben dem Schritt Klicken auf das Dreipunkt-Menü Dreipunkt-Menü und wählen Sie Schritt davor hinzufügen aus. Fügen Sie einen Schritt vor „Klick“ hinzu.
  6. 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. Wählen Sie „Beim Bewegen des Mauszeigers anzeigen“ aus.
  7. Legen Sie als Nächstes eine geeignete Auswahl für den neuen Schritt fest. Klicken Sie auf Auswählen Auswählen und dann auf einen Bereich des Elements Hover over me!, der sich außerhalb des Pop-up-Menüs befindet. Die Auswahl ist auf #clickable festgelegt. Wählen Sie den Selector aus.
  8. Versuchen Sie noch einmal, die Aufnahme abzuspielen. Mit dem hinzugefügten Hover-Schritt kann der Aufzeichnungstool den Ablauf erfolgreich wiedergeben. Wiedergabe erfolgreich.

Behauptungen hinzufügen

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

  1. Starten Sie eine Aufnahme, z. B. auf dieser Demoseite.

  2. Klicken Sie auf Behauptung hinzufügen.

    Die Schaltfläche „Behauptung hinzufügen“.

    Mit dem Aufzeichnungstool wird ein konfigurierbarer waitForElement-Schritt erstellt.

  3. Geben Sie für diesen Schritt Selektoren an.

  4. 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 Schritteigenschaften Beispiel: visible: true.

  5. Nehmen Sie den Rest des User Flows auf und beenden Sie dann die Aufzeichnung.

  6. Klicken Sie auf Wiederholen. 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 Nutzerfluss zu exportieren, können Sie einen einzelnen Schritt in die Zwischenablage kopieren:

  1. Klicken Sie mit der rechten Maustaste auf den Schritt, den Sie kopieren möchten, oder auf das Dreipunkt-Menü Dreipunkt-Menü daneben.
  2. 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ü Dreipunkt-Menü daneben und wählen Sie Schritt entfernen aus.

Einen Schritt entfernen

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

Eine Aufzeichnung mit dem festgelegten Ansichtsbereich und den Navigationsschritten.

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

Wenn Sie die In-Page-Automatisierung ausführen möchten, ohne die Seite neu zu laden, entfernen Sie den Navigationsschritt wie oben beschrieben.

Konfigurationsschritte

So konfigurieren Sie einen Schritt:

  1. 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.

  2. Geben Sie die erforderlichen Properties unter dem type an.

    Konfigurieren Sie einen Schritt.

  3. 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 eine optionale Property entfernen möchten, klicken Sie neben ihr auf die Schaltfläche Entfernen. Entfernen.

Wenn Sie einer Array-Property ein Element hinzufügen oder daraus entfernen möchten, klicken Sie neben dem Element auf die Schaltflächen + 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, das nur ein einzelnes navigation-Ereignis sein kann.

Weitere gängige Properties, die für die meisten Schritttypen verfügbar sind:

  • frame: ein Array mit nullbasierten Indizes, die einen verschachtelbaren iFrame identifizieren. Sie können beispielsweise den ersten (0) Iframe in einem zweiten (1) Iframe 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		 Selbstverständlich. Im Verhältnis zum linken oberen Inhaltsfeld des Elements in Pixeln
click
doubleClick		 button Zeigertaste: primär | sekundär | zweite | zurück | vorwärts
change value Selbstverständlich. Endwert
keyDown
keyUp		 key Selbstverständlich. Schlüsselname
scroll x
y		 Absolute X- und Y-Positionen des Scrollens in Pixeln, Standardwert 0
navigate url Selbstverständlich. Ziel-URL
waitForElement operator >= (Standard) | == | <=
waitForElement count Anzahl der Elemente, die durch einen Selektor identifiziert wurden
waitForElement attributes HTML-Attribut und dessen Wert
waitForElement properties JavaScript-Attribut und sein Wert in JSON
waitForElement visible Boolescher Wert. „Wahr“, wenn sich das Element im DOM befindet und sichtbar ist (kein 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 Selbstverständlich. JavaScript-Ausdruck, der zu „wahr“ führt
setViewport width
height		 Selbstverständlich. Breite und Höhe des Darstellungsbereichs in Pixeln
setViewport deviceScaleFactor Selbstverständlich. Ähnlich wie das Pixel-Verhältnis des Geräts (Device Pixel Ratio, DPR), standardmäßig 1
setViewport isMobile
hasTouch
isLandscape		 Selbstverständlich. Boolesche Flags, die angeben, ob Folgendes aktiviert werden soll:
  • Meta-Tag berücksichtigen
  • Touch-Ereignisse unterstützen
  • Im Querformat anzeigen
    		•

    Es gibt zwei Eigenschaften, die die Wiedergabe pausieren:

    • Mit der Property waitForElement wird der Schritt so konfiguriert, dass er auf das Vorhandensein (oder Fehlen) einer Reihe von Elementen wartet, die durch einen Selektor angegeben werden. Im folgenden Schritt wird beispielsweise gewartet, bis weniger als drei Elemente auf der Seite vorhanden sind, die mit dem Selector .my-class übereinstimmen.

        "type": "waitForElement",
  "selectors": [".my-class"],
  "operator": "<=",
  "count": 2,

    • Mit der Property waitForExpression wartet der Schritt, bis ein JavaScript-Ausdruck den Wert „wahr“ zurückgibt. 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 die Standardzeitüberschreitung für jeden Schritt gleichzeitig anpassen oder separate Zeitüberschreitungen für bestimmte Schritte festlegen. Zeitüberschreitungen für bestimmte Schritte überschreiben den Standardwert.

    So passen Sie die Standardzeitüberschreitung für alle Schritte gleichzeitig an:

    1. Klicken Sie auf Wiedergabeeinstellungen, damit das Feld Zeitlimit bearbeitbar wird.

      Einstellungen für die erneute Wiedergabe

    2. Legen Sie im Feld Zeitlimit den Zeitlimitwert in Millisekunden fest.

    3. Klicken Sie auf Wiederholen.Wiedergabe, um die angepasste Standardzeitüberschreitung in Aktion zu sehen.

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

    1. Maximieren Sie den Schritt und klicken Sie auf Zeitüberschreitung hinzufügen.

      Fügen Sie ein Zeitlimit hinzu.

    2. Klicken Sie auf das timeout: <value> und legen Sie den Wert in Millisekunden fest.

      Legen Sie den Zeitlimitwert fest.

    3. Klicken Sie auf Wiederholen.Wiedergeben, um den Schritt mit dem Zeitlimit in Aktion zu sehen.

    Wenn Sie einen Zeitüberschreitungsüberschreibung für einen Schritt entfernen möchten, klicken Sie neben dem Schritt auf die Schaltfläche LöschenLöschen..

    Auswahlen

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

    Konfiguration einer neuen Aufnahme

    • Geben Sie in das Textfeld Auswahlattribut ein benutzerdefiniertes Testattribut ein. Der Aufzeichnungstool verwendet dieses Attribut, um Auswahlen zu erkennen, anstatt eine Liste von häufig verwendeten Testattributen.

    • Wählen Sie in den Kästchen unter Aufzuzeichnende Selectortypen die Typen von Selectors aus, die automatisch erkannt werden sollen:

      • Kästchen. CSS. Syntaktische Selektoren
      • Kästchen. ARIA. Semantische Selektoren
      • Kästchen. Text. Auswählen der Auswahlschaltflächen mit dem kürzesten eindeutigen Text, falls verfügbar.
      • Kästchen. XPath. Selektoren, die XML Path Language verwenden.
      • Kästchen. 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 Aufzeichner die Selektoren erkennt. Das ist jedoch nicht immer der Fall, weil:

    • Ihre Webseiten verwenden möglicherweise dynamische Klassen oder IDs, die sich ändern.
    • Ihre Auswahlen funktionieren möglicherweise nicht mehr, wenn der Code oder das Framework geändert wird.

    Die CSS-class-Werte können beispielsweise für Anwendungen automatisch 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 robustere Tests zu erstellen. Es gibt bereits einige gängige data-*-Auswahlen, die Entwickler für die Automatisierung verwenden. Sie werden auch vom Rekorder unterstützt.

    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 beispielsweise das Element „Cappuccino“ auf dieser Demoseite an 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 Aufnahme und geben Sie die data-automate als Auswahlattribut ein.

    Passen Sie die Auswahl für die Aufnahme an.

    Geben Sie eine E-Mail-Adresse ein und beobachten Sie den Selector-Wert ([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:

    • Wenn angegeben:
      1. CSS-Selektor mit Ihrem benutzerdefinierten CSS-Attribut.
      2. XPath-Selektoren
      3. ARIA-Auswahl, 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-Auswahl
      5. Ein 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.
    • Pierce-Selektoren, die unter allen Elementen innerhalb aller Schattenwurzeln eindeutig sind.