Funktionsreferenz

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

In dieser umfassenden Funktionsreferenz zum Bereich Rekorder in den Chrome-Entwicklertools erfahren Sie, wie Sie Abläufe teilen, bearbeiten und bearbeiten.

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

Tastenkombinationen lernen und anpassen

Verwenden Sie Tastenkombinationen, um den Rekorder schneller zu bedienen. Eine Liste der Standardkombinationen finden Sie unter Tastenkombinationen im Rekorder-Bereich.

Wenn Sie einen Hinweis öffnen möchten, in dem alle Tastenkombinationen aufgelistet sind, klicken Sie rechts oben im Rekorder auf Tastenkombinationen anzeigen.

Schaltfläche „Kurzbefehle 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 Rekorder.
  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 Aufzeichnungen ansehenMehr anzeigen.. Im Drop-down-Menü wird eine Liste der gespeicherten Aufnahmen angezeigt. Wählen Sie die Option N Aufzeichnung(en) aus, um die Liste der gespeicherten Aufzeichnungen zu erweitern und zu verwalten. Alle Aufnahmen ansehen

  3. Eine Aufzeichnung exportierenDateidownload.. Wenn Sie das Skript weiter anpassen oder für Fehlerberichte freigeben möchten, können Sie den User Flow in eines der folgenden Formate exportieren:

    Weitere Informationen zu den Formaten finden Sie unter Nutzerfluss exportieren.

  4. Eine Aufzeichnung importierenDateiupload.. 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 exportieren und mit externen Bibliotheken 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 Rekorder 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-Skript 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-Skript mit einer eingebetteten Lighthouse-Analyse herunter.
    • Eine oder mehrere Optionen, die in der Rekorder App unter Erweiterungen exportieren bereitgestellt werden.

  4. 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. Wiederholen Sie das Script mit der Puppeteer Replay-Bibliothek. Beim Exportieren als @puppeteer/replay-Skript bleiben die Schritte ein JSON-Objekt. Diese Option eignet sich hervorragend, wenn Sie die Schritte in Ihre CI/CD-Pipeline einbinden, aber trotzdem die Flexibilität haben möchten, sie als JSON-Datei zu bearbeiten, später zu konvertieren und wieder in den Aufzeichnungstool zu importieren.
  • Puppeteer-Script Spielen Sie das Skript mit Puppeteer noch einmal ab. Da die Schritte in JavaScript konvertiert werden, können Sie genauere Anpassungen vornehmen, z. B. durch Schleifen. 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-Skript 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 Skript aus und sehen Sie sich die Ausgabe in der Datei flow.report.html an:

    # 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.. Aufnahme importieren.
  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 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.

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

JSON-Nutzerflüsse in benutzerdefinierte Scripts umwandeln:

JSON-Nutzerflüsse wiedergeben:

Fehler in Nutzerflüssen beheben

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

Zur Unterstützung bei der Fehlerbehebung können Sie im Bereich Rekorder die Wiedergaben verlangsamen, Haltepunkte festlegen, die Ausführung Schritt für Schritt durchgehen und Code in verschiedenen Formaten parallel mit Schritten untersuchen.

Wiedergabe verlangsamen

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

  1. Öffnen Sie das Drop-down-Menü Wiederholen.Erneut abspielen.
  2. Wählen Sie eine der Optionen für die Wiederholungsgeschwindigkeit aus:
    • Normal (Standardeinstellung)
    • Langsam
    • Sehr langsam
    • Extrem langsam

Langsame Wiedergabe.

Code prüfen

So überprü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. Im Rekorder sehen Sie die Schritte und den zugehörigen Code nebeneinander. Parallele Ansicht der Schritte und ihres Codes.
  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.

    Dropdown-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 Haltepunktsymbol Haltepunkt..
  2. Klicken Sie auf das Symbol Haltepunkt. für den Haltepunkt und wiederholen Sie die Aufzeichnung. Die Ausführung wird am Haltepunkt angehalten. Ausführungspause.
  3. 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 Einen Schritt ausführen klicken.
  4. Um die erneute Wiedergabe zu stoppen, klicke auf Leg eine Pause ein. Wiedergabe abbrechen.

Schritte bearbeiten

Sie können jeden Schritt in der Aufzeichnung bearbeiten, indem Sie neben der Aufzeichnung auf die Schaltfläche Maximieren. klicken. Das gilt sowohl während als auch danach.

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. Öffne diese Demoseite und starte eine neue Aufnahme. Starten Sie eine Aufnahme, um ein Hover-Ereignis zu erfassen.
  2. Bewegen Sie den Mauszeiger auf das Element im Darstellungsbereich. Ein Aktionsmenü wird angezeigt. Bewegen Sie den Mauszeiger auf das Element.
  3. Wählen Sie eine Aktion aus dem Menü aus und beenden Sie die Aufnahme. Der Rekorder erfasst nur das Click-Event. Auf eine Aktion klicken und die Aufzeichnung beenden
  4. Versuchen Sie, die Aufnahme noch einmal abzuspielen, indem Sie auf Noch einmal abspielen. 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 auf das Dreipunkt-Menü Dreipunkt-Menü neben dem Schritt Klicken und wählen Sie Schritt hinzufügen vor aus. Einen Schritt vor dem Klick hinzufügen
  6. Maximieren Sie den neuen Schritt. Standardmäßig ist der Typ waitForElement. Klicken Sie auf den Wert neben type und wählen Sie hover aus. Wählen Sie „Hover“ 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! außerhalb des Pop-up-Menüs. Die Auswahl ist auf #clickable festgelegt. Auswahl wird festgelegt.
  8. Versuchen Sie noch einmal, die Aufzeichnung abzuspielen. Mit dem hinzugefügten Hover-Schritt kann der Aufzeichnungstool den Ablauf erfolgreich wiedergeben. Wiedergabe erfolgreich.

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:

  1. Starten Sie eine Aufzeichnung, 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, der von Elementen auf dieser Seite verwendet wird. Beispiel: data-test: <value>
    • JavaScript-Property: 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. Zeichnen Sie nun den Rest des User Flows auf und stoppen Sie dann die Aufzeichnung.

  6. Klicken Sie auf Noch einmal abspielen. Erneut abspielen. Wenn eine Assertion fehlschlägt, zeigt der Rekorder nach einer Zeitüberschreitung einen Fehler an.

Im folgenden Video sehen Sie diesen Workflow in Aktion.

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 von Erweiterungen bereitgestellte.

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.

Entferne einen Schritt.

Außerdem fügt der Rekorder zu Beginn jeder Aufzeichnung automatisch zwei separate Schritte hinzu:

Eine Aufnahme mit dem festgelegten Darstellungsbereich und den festgelegten Navigationsschritten.

  • Darstellungsbereich festlegen: Hier können Sie die Abmessungen, die Skalierung und weitere Eigenschaften des Darstellungsbereichs anpassen.
  • 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:

  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 Attribute unter type an.

    Konfigurieren Sie einen Schritt.

  3. Klicken Sie auf die entsprechenden Schaltflächen, um optionale typspezifische Eigenschaften hinzuzufügen und festzulegen.

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 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, das nur ein einzelnes navigation-Ereignis sein kann.

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

  • frame: ein Array von nullbasierten Indexen, 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 Zeitlimits 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 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 ist nur type: navigation verfügbar, Sie können jedoch 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 „DPR“, Standardeinstellung 1
setViewport isMobile
hasTouch
isLandscape		 Selbstverständlich. Boolesche Flags, die Folgendes angeben:
  • 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. Der folgende Schritt wird beispielsweise zwei Sekunden lang pausiert und dann in "true" aufgelöst, sodass die erneute Wiedergabe fortgesetzt werden kann.

        "type": "waitForExpression",
  "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",

    Zeitlimits für Schritte anpassen

    Falls Ihre Seite langsame Netzwerkanfragen oder lange Animationen aufweist, kann die Wiedergabe bei Schritten fehlschlagen, die das Standardzeitlimit 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 für bestimmte Schritte überschreiben den Standardwert.

    So passen Sie das Standardzeitlimit für jeden Schritt 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 Wert für das Zeitlimit in Millisekunden fest.

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

    So überschreiben Sie das Standardzeitlimit in einem 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 Noch einmal abspielen.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öschenLöschen..

    Auswahlen

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

    Konfiguration einer neuen Aufnahme

    • Geben Sie im Textfeld Selektorattribut ein benutzerdefiniertes Testattribut ein. Der Rekorder verwendet dieses Attribut zur Erkennung von Selektoren anstelle einer Liste gebräuchlicher Testattribute.

    • Wählen Sie unter Aufzuzeichnende Selektortypen die Selektortypen aus, die automatisch erkannt werden sollen:

      • Kästchen. CSS. Syntaxselektoren.
      • 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 die XML-Pfadsprache verwenden.
      • Kästchen. Pierce. Selektoren, die den CSS-Selektoren ähneln, aber das Shadow DOM durchbrechen

    Gängige Testeinzelheiten

    Bei einfachen Webseiten reichen id-Attribute und CSS-class-Attribute aus, damit der Rekorder 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 sich der Code oder das Framework ändert.

    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 auf Ihrer Website die folgenden gängigen Testselektoren definiert haben, werden sie vom Rekorder 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 Aufzeichnung anpassen, wenn die gängigen Testauswahlen für Sie nicht 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 Selektorwert ([data-automate=email-address]).

    Das Ergebnis 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. 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. 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.