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.

Die Grundlagen der Arbeit mit dem Bereich Rekorder können Sie unter Nutzerflüsse aufzeichnen, wiederholen und messen nachlesen.

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 help Tastenkombinationen anzeigen.

Schaltfläche „Kurzbefehle anzeigen“

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

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

User Flows bearbeiten

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

Oben im Bereich Rekorder finden Sie folgende Optionen:

  1. Eine neue Aufnahme hinzufügenHinzufügen. Klicken Sie auf das Symbol +, um eine neue Aufnahme hinzuzufügen.
  2. Alle Aufzeichnungen ansehenMehr anzeigen.. Das Drop-down-Menü enthält eine Liste der gespeicherten Aufnahmen. Wähle die Option [Anzahl] Aufzeichnungen aus, um die Liste der gespeicherten Aufzeichnungen zu erweitern und zu verwalten. Alle Aufzeichnungen 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 Einen User Flow exportieren.

  4. Eine Aufzeichnung 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 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 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 Bereich Rekorder auf Dateidownload. Exportieren. Formatoptionen für Export.
  3. Wählen Sie aus der Drop-down-Liste eines der folgenden Formate aus: <ph type="x-smartling-placeholder">
      </ph>
    • 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-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 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 für Menschen lesbare JSON-Objekt und importieren 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 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-Skript 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. Allerdings können Sie das Script nicht wieder 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 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 wurde in Chrome geöffnet.

Durch Installation 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 Bereich Rekorder auf die Schaltfläche ImportierenDateiupload.. Aufnahme importieren.
  2. Wählen Sie die JSON-Datei mit dem aufgezeichneten Nutzerfluss aus.
  3. Klicken Sie auf die Schaltfläche Noch einmal abspielen.Neu abspielen, 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 Skripts 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ü Noch einmal abspielen.Erneut abspielen.
  2. Wählen Sie eine der Optionen für die Wiederholungsgeschwindigkeit aus: <ph type="x-smartling-placeholder">
      </ph>
    • 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 Aufzeichnung 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 der zugehörige Code nebeneinander angezeigt. Parallele Ansicht der Schritte und ihres Codes.
  4. 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.

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

    Dropdown-Liste „Format“

    Es kann sich um eines der drei Standardformate handeln (JSON, @puppeteer/replay, Puppeteer-Skript oder ein von einer Erweiterung bereitgestelltes Format).

  6. Fahren Sie mit der Fehlerbehebung in der Aufzeichnung fort, indem Sie die Schrittparameter und -werte bearbeiten. Die Codeansicht kann nicht bearbeitet werden, wird aber entsprechend den Schritten auf der linken Seite aktualisiert.

Haltepunkte festlegen und Schritt für Schritt ausführen

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

  1. Bewegen Sie den Mauszeiger auf den Kreis Schritt neben einem der Schritte in der Aufzeichnung. Der Kreis wird zu einem Haltepunktsymbol Haltepunkt..
  2. Klicken Sie auf das Haltepunktsymbol Haltepunkt. und spielen Sie die Aufzeichnung noch einmal ab. 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 Führen Sie einen Schritt aus. Einen Schritt ausführen klicken.
  4. Um die Wiedergabe zu beenden, 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 der Aufzeichnung 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. Die Rekorder App erfasst beispielsweise hover-Ereignisse nicht automatisch, weil dies die Aufnahme verschmutzt und nicht alle nützlichen Ereignisse sind. UI-Elemente wie Drop-down-Menüs können jedoch nur auf hover angezeigt werden. Sie können manuell hover Schritte zu Nutzerflüssen 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 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. Der Rekorder erfasst nur das Klickereignis. Auf eine Aktion klicken und die Aufzeichnung beenden
  4. Versuchen Sie, die Aufzeichnung noch einmal abzuspielen, indem Sie auf Noch einmal abspielen. Wiederholung klicken. Die Wiedergabe schlägt nach einer Zeitüberschreitung fehl, da der Rekorder nicht auf das Menüelement zugreifen kann. Wiederholung fehlgeschlagen.
  5. Klicken Sie auf das Dreipunkt-Menü Dreipunkt-Menü. neben dem Schritt Klicken und wählen Sie Schritt hinzufügen vor aus. 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. Mouseover ausführen.
  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 Schritt gibt der Rekorder den Ablauf erfolgreich wieder. Wiedergabe erfolgreich.

Assertions hinzufügen

Während der Aufzeichnung können Sie beispielsweise HTML-Attribute und JavaScript-Eigenschaften bestätigen. 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 „Assertion hinzufügen“.

    Der Rekorder erstellt einen konfigurierbaren waitForElement-Schritt.

  3. Legen Sie Auswahlelemente für diesen Schritt fest.

  4. Konfigurieren Sie den Schritt, aber ändern Sie seinen waitForElement-Typ nicht. 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 Attribute hinzufügen und geben Sie den Namen und den Wert des Attributs im JSON-Format ein. Beispiel: {".innerText":"<text>"}
    • Weitere Eigenschaften für den Schritt: 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 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 von Kopieren als ... 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

Um einen versehentlich aufgezeichneten Schritt zu entfernen, 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.

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 erneuten Wiedergabe 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 (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 festzulegen.

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

Eigenschaften des Schritts

Jeder Schritt kann die folgenden optionalen Eigenschaften haben:

  • target: eine URL für das Ziel des Chrome DevTools Protocol (CDP). Das Standard-Keyword main verweist 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 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 von Millisekunden, die gewartet wird, bevor ein Schritt ausgeführt wird. Weitere Informationen finden Sie unter Zeitlimits für Schritte anpassen.
  • selectors: ein Array von Selektoren. Weitere Informationen zu Selektoren

Typspezifische Eigenschaften sind:

Typ Attribut Erforderlich Beschreibung
click
doubleClick		 offsetX
offsetY		 Selbstverständlich. Relativ zum oberen linken Rand des Inhaltsfelds des Elements, in Pixeln
click
doubleClick		 button Zeigerschaltfläche: primär | Zusatz | Sekunde | zurück | weiter
change value Selbstverständlich. Endgültiger Wert
keyDown
keyUp		 key Selbstverständlich. Schlüsselname
scroll x
y		 Absolute x- und y-Positionen für das Scrollen in Pixeln, Standard: 0
navigate url Selbstverständlich. Ziel-URL
waitForElement operator >= | == (Standard) | &lt;=
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 in „true“ aufgelöst wird
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-Events 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 pausiert beispielsweise zwei Sekunden und wird 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 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 erneute Wiedergabe, damit das Feld Zeitüberschreitung bearbeitet werden kann.

      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.Erneut abspielen, um das angepasste Standardzeitlimit in Aktion zu sehen.

    So überschreiben Sie das Standardzeitlimit in einem bestimmten Schritt:

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

      Zeitlimit 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 abspielen.Erneut abspielen, 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..

    Selektoren

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

    Eine 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 mit gängigen Testattributen.

    • 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. Selektoren 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 Testselektoren

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

    • Auf Ihren Webseiten werden möglicherweise dynamische Klassen oder IDs verwendet, die sich ändern.
    • Die Selektoren können aufgrund von Änderungen am Code oder am Framework 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ällig ausgewählten Namen.

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

    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 zum Beispiel die -Element auf dieser Demoseite und sehen Sie sich die Testattribute an:

    Testselektoren wurden definiert.

    Klicken Sie auf „Cappuccino“, maximieren Sie den entsprechenden Schritt in der Aufzeichnung und prüfen Sie die erkannten Auswahlelemente:

    Allgemeine Testauswahl erkannt.

    Auswahl der 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 Aufzeichnung und geben Sie den data-automate als Selektorattribut ein.

    Passen Sie die Auswahl der 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 Rekorder sucht in der folgenden Reihenfolge nach Selektoren, je nachdem, ob Sie ein benutzerdefiniertes CSS-Selektor-Attribut angegeben haben:

    • Falls angegeben: <ph type="x-smartling-placeholder">
        </ph>
      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: <ph type="x-smartling-placeholder">
        </ph>
      1. ARIA-Selektor, falls gefunden.
      2. CSS-Selektoren mit der folgenden Priorität: <ph type="x-smartling-placeholder">
          </ph>
        1. Die am häufigsten verwendeten Attribute für Tests: <ph type="x-smartling-placeholder">
            </ph>
          • 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. Reguläre 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. Der Rekorder erfasst Folgendes:

    • Reguläre CSS- und XPath-Selektoren auf jeder Stammebene, d. h. verschachtelte Shadow Hosts, falls vorhanden
    • Durchbohren Sie Selektoren, die unter allen Elementen innerhalb aller Schattenwurzeln eindeutig sind.