Funktionsreferenz

Sofia Emelianova
Sofia Emelianova

In dieser umfassenden Funktionsreferenz im Bereich Rekorder der Chrome-Entwicklertools erfahren Sie, wie Sie Abläufe für Nutzer freigeben, sie und ihre Schritte bearbeiten können.

Weitere Informationen zu den Grundlagen der Arbeit mit dem Steuerfeld Rekorder finden Sie unter Nutzerflüsse aufzeichnen, wiedergeben und messen.

Tastenkombinationen kennenlernen und anpassen

Mithilfe von Tastenkombinationen können Sie im Rekorder schneller navigieren. Eine Liste der Standardtastenkombinationen finden Sie unter Tastenkombinationen im Rekorder-Bereich.

Um einen Hinweis mit allen Tastenkombinationen direkt im Rekorder zu öffnen, klicke oben rechts auf Tastenkombinationen anzeigen. Tastenkombinationen anzeigen.

Die Schaltfläche Schnelltasten anzeigen

So passen Sie die Tastenkombinationen in Rekorder an:

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

User Flows bearbeiten

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

Oben im Bereich Rekorder finden Sie folgende Optionen:

  1. Neue Aufnahme hinzufügenHinzufügen. Klicken Sie auf das +-Symbol, um eine neue Aufnahme hinzuzufügen.
  2. Alle Aufzeichnungen ansehenMehr anzeigen. Im Drop-down-Menü wird die Liste der gespeicherten Aufzeichnungen angezeigt. Wählen Sie die Option [Anzahl] Aufzeichnung(en) aus, um die Liste der gespeicherten Aufzeichnungen zu verwalten und zu maximieren. Alle Aufzeichnungen ansehen.
  3. Aufnahme exportierenDateidownload. Wenn Sie das Skript weiter anpassen oder für Fehlerberichte teilen 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. Aufnahme importierenDateiupload. Nur im JSON-Format.

  5. Aufzeichnungen löschenLöschen Löschen Sie die ausgewählte Aufnahme.

Sie können auch den Namen der Aufzeichnung ändern, indem Sie daneben auf die Schaltfläche „Bearbeiten“ Bearbeiten. klicken.

User Flows teilen

Sie können Abläufe für Nutzer in die Rekorder App exportieren und importieren. Dies ist hilfreich beim Melden von Fehlern, da Sie eine genaue Aufzeichnung der Schritte zum Reproduzieren 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 User Flow, den Sie exportieren möchten.
  2. Klicken Sie oben im Steuerfeld Rekorder auf Dateidownload. Exportieren. Formatoptionen für Export.
  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 Aufnahme als Puppeteer Replay-Skript herunter.
    • Puppeteer Laden Sie die Aufzeichnung als Puppeteer-Skript herunter.
    • Puppeteer (einschließlich Lighthouse-Analyse) Laden Sie die Aufzeichnung als Puppeteer-Skript mit einer eingebetteten Lighthouse-Analyse herunter.
    • Eine oder mehrere Optionen, die über die Exporterweiterungen des Rekorders bereitgestellt werden.
  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 zurück in den Rekorder.
  • @puppeteer/replay. Spielen Sie das Skript mit der Puppeteer Replay-Bibliothek noch einmal ab. Beim Exportieren als @puppeteer/replay-Skript bleiben die Schritte ein JSON-Objekt. Diese Option ist ideal, wenn Sie die CI/CD-Pipeline integrieren möchten, aber trotzdem die Flexibilität haben, die Schritte als JSON zu bearbeiten, sie später zu konvertieren und wieder in den Rekorder zu importieren.
  • Puppeteer-Skript: Spielen Sie das Skript mit Puppeteer noch einmal ab. Da die Schritte in JavaScript konvertiert werden, können Sie sie detaillierter anpassen, z. B. Schleifen. Allerdings können Sie dieses Skript nicht wieder in den Rekorder importieren.
  • Puppeteer (einschließlich Lighthouse-Analyse) Diese Exportoption ist die gleiche wie die vorherige, enthält jedoch Code, der eine Lighthouse-Analyse generiert.

    Führen Sie das Skript aus und sehen Sie sich die Ausgabe in einer flow.report.html-Datei an:

    # npm i puppeteer lighthouse
    node your_export.js
    

    Der Lighthouse-Bericht wurde in Chrome geöffnet.

Durch Installieren einer Erweiterung in ein benutzerdefiniertes Format exportieren

Weitere Informationen finden Sie unter Rekorder-Erweiterungen.

User Flow importieren

So importieren Sie einen User Flow:

  1. Klicken Sie oben im Steuerfeld Rekorder auf ImportierenDateiupload.. Aufnahme importieren.
  2. Wählen Sie die JSON-Datei mit dem aufgezeichneten User Flow aus.
  3. Klicken Sie auf die Schaltfläche Noch einmal spielen.Noch einmal, um den importierten User Flow auszuführen.

Mit externen Bibliotheken noch einmal abspielen

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

Darüber hinaus können Sie JSON-Dateien mit den folgenden Bibliotheken von Drittanbietern transformieren und wiedergeben.

Wandeln Sie JSON-Nutzerabläufe in benutzerdefinierte Skripts um:

JSON-Nutzerabläufe wiederholen:

Fehler in Nutzerflüssen beheben

Wie bei jedem Code müssen Sie manchmal die aufgezeichneten Nutzerflüsse debuggen.

Im Bereich Rekorder können Sie Wiedergaben verlangsamen, Haltepunkte festlegen, die Ausführung durchlaufen und Code in verschiedenen Formaten parallel mit Schritten prüfen, um die Fehlerbehebung zu erleichtern.

Wiedergabe verlangsamen

Standardmäßig gibt der Rekorder den Nutzerfluss so schnell wie möglich wieder. Um zu verstehen, was in der Aufnahme passiert, können Sie die Wiedergabegeschwindigkeit verringern:

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

Langsame erneute Wiedergabe.

Code prüfen

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

  1. Öffnen Sie eine Aufnahme im Bereich Rekorder.
  2. Klicken Sie rechts oben in der Liste mit den Schritten auf Code anzeigen. Die Schaltfläche Code anzeigen
  3. In der Rekorder App werden die Schritte und deren Code nebeneinander angezeigt. Gegenüberstellung der Schritte und des zugehörigen Codes
  4. Wenn Sie den Mauszeiger auf einen Schritt bewegen, hebt der Rekorder den entsprechenden Code in einem beliebigen Format hervor, auch in dem, das von Erweiterungen bereitgestellt wird.
  5. Maximieren Sie die Drop-down-Liste „Format“, um ein Format auszuwählen, das Sie zum Exportieren von Nutzerflüssen verwenden möchten.

    Die Drop-down-Liste „Format“.

    Es kann eines der drei Standardformate sein (JSON, @puppeteer/replay, Puppeteer-Script oder ein durch eine Erweiterung bereitgestelltes Format).

  6. Fahren Sie mit der Fehlerbehebung der Aufzeichnung fort, indem Sie die Schrittparameter und -werte bearbeiten. Die Codeansicht kann nicht bearbeitet werden, wird aber entsprechend aktualisiert, wenn Sie Änderungen an den Schritten links vornehmen.

Haltepunkte festlegen und Schritt für Schritt ausführen

So legen Sie einen Haltepunkt fest und führen Schritt für Schritt aus:

  1. Bewege den Mauszeiger auf den Kreis Schritt. neben einem Schritt in der Aufzeichnung. Der Kreis wird zu einem Haltepunktsymbol Haltepunkt..
  2. Klicken Sie auf das Haltepunktsymbol Haltepunkt. und geben Sie die Aufzeichnung noch einmal ab. Die Ausführungen werden am Haltepunkt angehalten. Ausführung der Ausführung pausiert.
  3. Um die einzelnen Schritte auszuführen, klicken Sie oben im Steuerfeld Rekorder in der Aktionsleiste auf die Schaltfläche Führen Sie einen Schritt aus. Einen Schritt ausführen.
  4. Um die erneute Wiedergabe zu stoppen, klicken Sie auf Leg eine Pause ein. Erneute Wiedergabe abbrechen.

Schritte bearbeiten

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

Außerdem können Sie 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 Aufnahme verfälschen und nicht alle Ereignisse nützlich sind. UI-Elemente wie Drop-down-Menüs können jedoch nur bei hover angezeigt werden. Du kannst dem Nutzerfluss, der von solchen Elementen abhängt, manuell hover-Schritte hinzufügen.

So fügen Sie einen Schritt manuell hinzu:

  1. Öffne diese Demoseite und starte eine neue Aufnahme. Starten Sie eine Aufzeichnung, 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 im Menü eine Aktion aus und beenden Sie die Aufzeichnung. In der Rekorder App wird nur das Klickereignis erfasst. Klicken auf eine Aktion und Beenden der Aufzeichnung.
  4. Versuchen Sie, die Aufzeichnung noch einmal abzuspielen, indem Sie auf Noch einmal spielen. Noch einmal abspielen klicken. Die Wiedergabe schlägt nach einer Zeitüberschreitung fehl, da der Rekorder nicht auf das Element im Menü zugreifen kann. Wiederholung fehlgeschlagen.
  5. Klicken Sie auf das Dreipunkt-Menü Schaltfläche mit drei Punkten. neben dem Schritt Klicken und wählen Sie Schritt hinzufügen vor aus. Hinzufügen eines Schritts vor dem Klick.
  6. Maximieren Sie den neuen Schritt. Standardmäßig ist der Typ waitForElement festgelegt. Klicken Sie auf den Wert neben type und wählen Sie hover aus. „Hover“ auswählen.
  7. Legen Sie als Nächstes einen geeigneten Selektor für den neuen Schritt fest. Klicken Sie auf Auswählen. Auswählen und dann auf einen Bereich des Hover over me!-Elements außerhalb des Pop-up-Menüs. Die Auswahl ist auf #clickable festgelegt. Auswahl festlegen
  8. Versuche noch einmal, die Aufzeichnung abzuspielen. Mit dem hinzugefügten Schritt, auf den der Mauszeiger bewegt wird, gibt der Rekorder den Ablauf erfolgreich wieder. Wiederholung erfolgreich.

Assertions hinzufügen

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

  1. Starten Sie eine Aufzeichnung, z. B. auf dieser Demoseite.
  2. Klicken Sie auf Assertion hinzufügen.

    Die Schaltfläche „Add Assertion“ (Assertion hinzufügen)

    Der Rekorder erstellt einen konfigurierbaren waitForElement-Schritt.

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

  4. Konfigurieren Sie den Schritt, ändern Sie aber nicht den Typ waitForElement. 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, die in den Elementen auf dieser Seite verwendet werden. Beispiel: data-test: <value>
    • JavaScript-Property Klicken Sie auf Eigenschaften hinzufügen und geben Sie den Namen und den Wert der Eigenschaft im JSON-Format ein. Beispiel: {".innerText":"<text>"}
    • Weitere Eigenschaften des Schritts: Beispiel: visible: true.
  5. Fahren Sie fort, um den Rest des User Flows aufzuzeichnen, und beenden Sie dann die Aufzeichnung.

  6. Klicken Sie auf Noch einmal spielen. Noch einmal abspielen. Wenn eine Assertion fehlschlägt, zeigt der Rekorder nach einem Zeitlimit einen Fehler an.

Im folgenden Video wird dieser Workflow in Aktion veranschaulicht.

Schritte kopieren

Anstatt den gesamten User Flow 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 klicken Sie daneben auf das Dreipunkt-Menü Dreipunkt-Menü..
  2. Wählen Sie im Drop-down-Menü eine der Optionen unter Kopieren als ... aus.

Auswahl einer Kopieroption aus dem Drop-down-Menü.

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

Schritte entfernen

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

Schritt entfernen

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

Eine Aufzeichnung mit dem festgelegten Darstellungsbereich und den Navigationsschritten.

  • Darstellungsbereich festlegen Damit können Sie die Abmessungen, die Skalierung und andere Eigenschaften des Darstellungsbereichs festlegen.
  • Navigation. Legt die URL fest und aktualisiert die Seite bei jeder erneuten Wiedergabe automatisch.

Wenn Sie eine In-Page-Automatisierung durchführen möchten, ohne die Seite zu aktualisieren, entfernen Sie den Navigationsschritt wie oben beschrieben.

Schritte konfigurieren

So konfigurieren Sie einen Schritt:

  1. Geben Sie den Typ an: click, doubleClick, hover, (Eingabe) change, keyUp, keyDown, scroll, close, navigate (für eine Seite), waitForElement, waitForExpression oder setViewport.

    Andere Attribute hängen vom Wert 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 anzugeben.

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

Wenn Sie eine optionale Eigenschaft entfernen möchten, klicken Sie daneben 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ächen + oder -.

Eigenschaften des Schritts

Jeder Schritt kann die folgenden optionalen Attribute haben:

  • target: Eine URL für das Chrome DevTools Protocol (CDP)-Ziel. Das Standard-Keyword main verweist auf die aktuelle Seite.
  • assertedEvents – aktuell nur ein navigation-Ereignis

Weitere gängige 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. Beispielsweise können Sie den ersten (0) iFrame innerhalb eines zweiten (1) iFrames des Hauptziels als [1, 0] angeben.
  • timeout: Die Anzahl von Millisekunden, die vor der Ausführung eines Schritts gewartet werden soll. Weitere Informationen finden Sie unter Zeitlimits für Schritte anpassen.
  • selectors: ein Array mit Selektoren Weitere Informationen finden Sie unter Selektoren.

Typspezifische Eigenschaften sind:

Typ Property Erforderlich Beschreibung
click
doubleClick
offsetX
offsetY
Selbstverständlich. Relativ zum linken oberen Rand des Elementinhaltsfelds, in Pixeln
click
doubleClick
button Zeigerschaltfläche: primär | Hilfsfunktion | zweite | Zurück | vorwärts
change value Selbstverständlich. Endgültiger Wert
keyDown
keyUp
key Selbstverständlich. Schlüsselname
scroll x
y
Absolute x- und y-Scrollpositionen in Pixel, Standard: 0
navigate url Selbstverständlich. Ziel-URL
waitForElement operator >= | == (Standard) | <=
waitForElement count Anzahl der durch einen 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 (nicht display: none oder visibility: hidden)
waitForElement
waitForExpression
asserted events Derzeit nur type: navigation. Sie können aber den Titel und die URL angeben.
waitForElement
waitForExpression
timeout Maximale Wartezeit in Millisekunden
waitForExpression expression Selbstverständlich. JavaScript-Ausdruck, der in „true“ aufgelöst wird
setViewport width
height
Selbstverständlich. Breite und Höhe des Darstellungsbereichs in Pixeln
setViewport deviceScaleFactor Selbstverständlich. Ähnlich wie Geräte-Pixel-Verhältnis, Standard 1
setViewport isMobile
hasTouch
isLandscape
Selbstverständlich. Boolesche Flags, die angeben, ob:
  • Meta-Tag berücksichtigen
  • Touch-Ereignisse unterstützen
  • Querformat anzeigen
  • Die erneute Wiedergabe wird durch zwei Eigenschaften angehalten:

    • Mit der Eigenschaft waitForElement wird bei dem Schritt gewartet, bis eine Reihe von Elementen vorhanden ist, die durch einen Selektor identifiziert werden. Im folgenden Schritt wird beispielsweise gewartet, bis weniger als drei Elemente auf der Seite sind, die dem Selektor .my-class entsprechen.

        "type": "waitForElement",
        "selectors": [".my-class"],
        "operator": "<=",
        "count": 2,
      
    • Durch das Attribut waitForExpression wird der Schritt gewartet, 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))",
      

    Zeitlimit für Schritte anpassen

    Falls Ihre Seite langsame Netzwerkanfragen oder langwierige 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 gleichzeitig 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:

    1. Klicken Sie auf Einstellungen für die Wiedergabe, damit das Feld Zeitlimit bearbeitbar ist.

      Wiederholungseinstellungen.

    2. Legen Sie im Feld Zeitlimit den Wert für das Zeitlimit in Millisekunden fest.

    3. Klicke auf Noch einmal spielen.Noch einmal, um das angepasste Standard-Zeitlimit in Aktion zu sehen.

    So überschreiben Sie das Standardzeitlimit für einen bestimmten Schritt:

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

      Zeitüberschreitung hinzufügen.
    2. Klicken Sie auf timeout: <value> und legen Sie den Wert in Millisekunden fest.

      Legen Sie den Wert für das Zeitlimit fest.
    3. Klicken Sie auf Noch einmal spielen.Noch einmal abspielen, um den Schritt mit dem Zeitlimit in Aktion zu sehen.

    Wenn Sie ein Zeitlimit für einen Schritt überschreiben möchten, klicken Sie daneben auf die Schaltfläche LöschenLöschen.

    Selektoren

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

    Neue Aufzeichnung wird konfiguriert.

    • Geben Sie im Textfeld Selektorattribut ein benutzerdefiniertes Testattribut ein. Der Rekorder verwendet dieses Attribut zur Erkennung von Selektoren anstelle einer Liste allgemeiner Testattribute.
    • Wählen Sie unter Aufzuzeichnende Selektortypen die Auswahltypen aus, die automatisch erkannt werden sollen:

      • Kästchen. Preisvergleichsportal. Syntaxselektoren.
      • Kästchen. ARIA Semantische Selektoren
      • Kästchen. Text. Selektoren mit dem kürzesten eindeutigen Text, falls verfügbar
      • Kästchen. XPath Selektoren, die die XML Path Language (XML-Pfadsprache) verwenden.
      • Kästchen. Pierce. Selektoren, die den CSS-Selektoren ähneln, aber das Schatten-DOM durchbrechen

    Gängige Testselektoren

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

    • Auf Ihren Webseiten werden möglicherweise dynamische Klassen oder IDs verwendet, die sich ändern.
    • Die Selektoren können aufgrund von Code- oder Framework-Änderungen beschädigt werden.

    Die class-Werte des CSS-Codes können beispielsweise 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 mit data-*-Attributen stabilere Tests erstellen. Es gibt bereits einige gängige data-*-Selektoren, die Entwickler für die Automatisierung verwenden. Diese 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:

    Es wurden Testselektoren definiert.

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

    Allgemeiner Testselektor erkannt.

    Auswahl der Aufnahme anpassen

    Sie können die Auswahl einer Aufzeichnung anpassen, wenn die gängigen Testselektoren bei Ihnen nicht funktionieren.

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

    Auswahl der Aufnahme anpassen.

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

    Das Ergebnis der benutzerdefinierten Auswahl.

    Selektorpriorität

    Der Rekorder sucht in der folgenden Reihenfolge nach Selektoren, je nachdem, ob Sie ein benutzerdefiniertes CSS selector-Attribut angegeben haben:

    • Falls angegeben:
      1. CSS-Selektor mit Ihrem benutzerdefinierten CSS-Attribut
      2. XPath-Selektoren.
      3. ARIA-Selektor, falls gefunden.
      4. Ein Selektor mit dem kürzesten eindeutigen Text, falls gefunden
    • Falls nicht angegeben:
      1. ARIA-Selektor, falls gefunden.
      2. CSS-Selektoren mit folgender Priorität:
        1. Die häufigsten Attribute für Tests:
          • 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. Ein Selektor mit dem kürzesten eindeutigen Text, falls gefunden

    Es können mehrere reguläre CSS-, XPath- und Pierce-Selektoren vorhanden sein. Der Rekorder erfasst:

    • Reguläre CSS- und XPath-Selektoren auf jeder Stammebene, d. h. verschachtelte Shadowhosts (sofern vorhanden)
    • Selektoren, die unter allen Elementen innerhalb aller Schattenwurzeln eindeutig sind.