Informacje o funkcjach

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Dowiedz się, jak udostępniać ścieżki użytkownika, edytować je i ich kroki, korzystając z pełnego opisu funkcji panelu Nagrywarka w Narzędziach deweloperskich w Chrome.

Podstawowe informacje o pracy z panelem Dyktafon znajdziesz w artykule Rejestrowanie, odtwarzanie i mierzenie ścieżek użytkowników.

Poznawanie i dostosowywanie skrótów

Korzystaj ze skrótów, aby szybciej poruszać się po aplikacji Dyktafon. Listę domyślnych skrótów znajdziesz w artykule Skróty klawiszowe w panelu narzędziowym Recordera.

Aby otworzyć podpowiedź z listą wszystkich skrótów bezpośrednio w nagrywarce, w prawym górnym rogu kliknij Pokaż skróty.

przycisk Pokaż skróty.

Aby dostosować skróty Dyktafonu:

  1. Kliknij Ustawienia. Ustawienia > Skróty.
  2. Przewiń w dół do sekcji Nagrywarka.
  3. Wykonaj czynności opisane w artykule o dostosowywaniu skrótów.

Edytowanie schematów działań użytkowników

W panelu DevTools Recorder w nagłówku znajduje się menu, w którym możesz wybrać przepływ danych użytkownika do edycji.

U góry panelu Nagrywarka dostępne są następujące opcje:

  1. Dodaj nowe nagranieDodaj.. Aby dodać nowe nagranie, kliknij ikonę +.
  2. Wyświetl wszystkie nagraniaRozwiń bardziej.. W menu pojawi się lista zapisanych nagrań. Kliknij N nagrania, aby rozwinąć listę zapisanych nagrań i ją zarządzać. Wyświetl wszystkie nagrania.

  3. Eksportowanie nagraniaPobieranie pliku.. Aby dalej dostosowywać skrypt lub udostępniać go w celu zgłaszania błędów, możesz wyeksportować przepływ danych użytkownika w jednym z tych formatów:

    Więcej informacji o formatach znajdziesz w artykule Eksportowanie ścieżki użytkownika.

  4. Importowanie nagraniaPrzesyłanie plików.. Tylko w formacie JSON.

  5. Usuwanie nagraniaUsuń.. Usuń wybrane nagranie.

Możesz też edytować nazwę nagrania, klikając obok niej przycisk edycji Edytuj..

Udostępnianie wzorów przeglądania

W rekorderze możesz eksportować i importować przepływy danych użytkowników. Jest to przydatne podczas zgłaszania błędów, ponieważ możesz udostępnić dokładny zapis kroków, które prowadzą do jego odtworzenia. Możesz też go eksportować i odtwarzać za pomocą zewnętrznych bibliotek.

Eksportowanie wzoru przeglądania

Aby wyeksportować ścieżkę użytkownika:

  1. Otwórz ścieżkę użytkownika, którą chcesz wyeksportować.

  2. U góry panelu Nagrywarka kliknij Eksportuj.

    Lista opcji formatu w menu Eksportuj.

  3. W menu wybierz jeden z tych formatów:

    • plik JSON, Pobierz nagranie jako plik JSON.
    • @puppeteer/replay. Pobierz nagranie jako skrypt Puppeteer Replay.
    • Puppeteer. Pobierz nagranie jako skrypt Puppeteer.
    • Puppeteer (w Firefoksie). Pobierz nagranie jako skrypt Puppeteer for Firefox.
    • Puppeteer (w tym analiza Lighthouse). Pobierz nagranie jako skrypt Puppeteer z wbudowaną analizą Lighthouse.
    • Co najmniej 1 opcja udostępniona przez rozszerzenia eksportu w nagrywarce.

  4. Zapisz plik.

W przypadku każdej domyślnej opcji eksportu możesz wykonać te czynności:

  • JSON. Zmień obiekt JSON w postaci zrozumiałej dla człowieka i import plik JSON z powrotem do nagrywarki.
  • @puppeteer/replay. Odtwórz skrypt za pomocą biblioteki Puppeteer Replay. Podczas eksportowania jako skryptu @puppeteer/replay kroki pozostają obiektem JSON. Ta opcja jest idealna, jeśli chcesz zintegrować się z rurociągiem CI/CD, ale nadal masz możliwość edytowania kroków w formacie JSON, a następnie ich konwertowania i importowania z powrotem do nagrywarki.
  • Skrypt Puppeteer. Odtwórz skrypt za pomocą Puppeteer. Ponieważ kroki są konwertowane na JavaScript, możesz je dostosowywać bardziej szczegółowo, np. tworzyć pętle. Nie można jednak zaimportować tego skryptu z powrotem do nagrywarki.
  • Puppeteer (w Firefoksie). Dzięki obsłudze WebDriver BiDi możesz uruchomić ten skrypt Puppeteer w Chrome i Firefox.

  • Puppeteer (w tym analiza Lighthouse). Ta opcja eksportu jest taka sama jak poprzednia, ale zawiera kod, który generuje analizę Lighthouse.

    Uruchom skrypt i sprawdź dane wyjściowe w pliku flow.report.html:

    # npm i puppeteer lighthouse
node your_export.js

    Raport Lighthouse otwarty w Chrome.

Eksportowanie w formacie niestandardowym przez zainstalowanie rozszerzenia

Zobacz Rozszerzenia Dyktafonu.

Importowanie wzoru przeglądania

Aby zaimportować ścieżkę użytkownika:

  1. U góry panelu Nagrywarka kliknij przycisk ImportujPrzesyłanie plików.. Importowanie nagrania.
  2. Wybierz plik JSON z nagranim ścieżki użytkownika.
  3. Kliknij przycisk Odtwórz.Odtwórz, aby uruchomić zaimportowany proces użytkownika.

Odtwarzanie z bibliotekami zewnętrznymi

Puppeteer Replay to biblioteka open source obsługiwana przez zespół Narzędzi deweloperskich w Chrome. Jest ona zbudowana na podstawie Puppeteer. To narzędzie wiersza poleceń, za pomocą którego możesz odtwarzać pliki JSON.

Poza tym możesz przekształcać i odtwarzać pliki JSON za pomocą tych bibliotek innych firm.

Przekształcanie ścieżek użytkownika w plikach JSON w skrypty niestandardowe:

  • Cypress Chrome Recorder. Możesz go używać do konwertowania plików JSON z przepływem użytkownika na skrypty testowe Cypress. Aby zobaczyć, jak to działa, obejrzyj ten film.
  • Nightwatch Chrome Recorder. Możesz go używać do konwertowania plików JSON z przepływem użytkownika na skrypty testowe Nightwatch.
  • CodeceptJS Chrome Recorder. Możesz go używać do konwertowania plików JSON z przepływem użytkownika na skrypty testowe CodeceptJS.

Odtwarzanie wzorców zachowań użytkowników w pliku JSON:

Debugowanie wzorców korzystania

Podobnie jak w przypadku każdego kodu, czasami trzeba debugować zarejestrowane ścieżki użytkownika.

Aby ułatwić debugowanie, w panelu Nagrywarka możesz zwolnić odtwarzanie, ustawić punkty przerwy, przejrzeć kod krok po kroku i sprawdzać kod w różnych formatach równolegle z każdym krokiem.

Zwolnij odtwarzanie

Domyślnie nagrywarka odtwarza ścieżkę użytkownika tak szybko, jak to możliwe. Aby lepiej zrozumieć, co dzieje się na nagraniu, możesz spowolnić prędkość odtwarzania:

  1. Otwórz menu Odtwórz.Powtórz.
  2. Wybierz jedną z opcji szybkości odtwarzania:
    • Normalnie (domyślnie)
    • Wolno
    • Bardzo wolne
    • Bardzo wolno

Odtwarzanie w zwolnionym tempie.

Sprawdzanie kodu

Aby sprawdzić kod ścieżki użytkownika w różnych formatach:

  1. Otwórz nagranie w panelu Dyktafon.
  2. W prawym górnym rogu listy kroków kliknij Pokaż kod.Przycisk Pokaż kod.
  3. Nagrywarka wyświetla kroki i ich kod obok siebie. Widok obok siebie kroków i ich kodu.
  4. Gdy najedziesz kursorem na krok, nagrywarka wyróżni odpowiedni kod w dowolnym formacie, w tym w formacie rozszerzeń.

  5. Rozwiń listę formatów, aby wybrać format, którego używasz do eksportowania ścieżek użytkownika.

    Lista formatów.

    Może to być jeden z 3 domyślnych formatów (JSON, @puppeteer/replay, skrypt Puppeteer) lub format udostępniony przez rozszerzenie.

  6. Przejdź do debugowania nagrania, edytując parametry i wartości kroków. Widok kodu nie jest edytowalny, ale aktualizuje się odpowiednio do zmian wprowadzanych w krokach po lewej stronie.

Ustawianie punktów przerwania i wykonywanie kroków

Aby ustawić punkt przerwania i wykonać kod krok po kroku:

  1. Najedź kursorem na kółko Krok. obok dowolnego kroku w nagraniu. Okrąg zmienia się w ikonę punktu kontrolnego Punkt przerwania..
  2. Kliknij ikonę punktu przerwania Punkt przerwania. i odtwórz nagranie. Wykonywanie zostaje wstrzymane w punkcie przerwania. Zatrzymanie wykonywania.
  3. Aby wykonać krok po kroku, kliknij przycisk Wykonaj jeden krok. Wykonaj jeden krok na pasku czynności u góry panelu Rejestrator.
  4. Aby zatrzymać odtwarzanie, kliknij Zatrzymaj się. Anuluj odtwarzanie.

Edytowanie kroków

Możesz edytować dowolny krok w nagraniu, klikając obok niego przycisk Rozwiń., zarówno podczas nagrywania, jak i po jego zakończeniu.

Możesz też dodać brakujące kroki i usunąć te, które zostały nagrane przez przypadek.

Dodawanie kroków

Czasami trzeba ręcznie dodać kroki. Na przykład nagrywarka nie rejestruje automatycznie zdarzeń hover, ponieważ powoduje to zanieczyszczenie nagrania i nie wszystkie takie zdarzenia są przydatne. Jednak elementy interfejsu użytkownika, takie jak menu, mogą pojawiać się tylko na hover. Możesz ręcznie dodawać hover do przejść użytkowników, które zależą od takich elementów.

Aby ręcznie dodać krok:

  1. Otwórz tę stronę demonstracyjną i rozpocznij nowe nagrywanie. Rozpocznij nagrywanie, aby zarejestrować zdarzenie najechania kursorem.
  2. Najedź kursorem na element w widocznym obszarze. Pojawi się menu czynności.Najechanie na element.
  3. Wybierz czynność z menu i zakończ nagrywanie. Rejestrator rejestruje tylko zdarzenie kliknięcia. Kliknięcie działania i zakończenie nagrywania.
  4. Spróbuj odtworzyć nagranie, klikając Odtwórz. Odtwórz. Odtwarzanie kończy się niepowodzeniem po upływie limitu czasu, ponieważ nagrywarka nie może uzyskać dostępu do elementu w menu. Nie udało się odtworzyć.
  5. Kliknij Przycisk z 3 kropkami przycisk z 3 kropkami obok kroku Kliknij i wybierz Dodaj krok przed. Dodawanie kroku przed kliknięciem
  6. Rozwiń nowy krok. Domyślnie ma typ waitForElement. Kliknij wartość obok type i wybierz hover. Wybieranie za pomocą kursora.
  7. Następnie ustaw odpowiedni selektor dla nowego kroku. Kliknij Wybierz. Wybierz, a następnie kliknij obszar elementu Hover over me!, który znajduje się poza menu. Selektor jest ustawiony na #clickable. Konfigurowanie selektora.
  8. Spróbuj odtworzyć nagranie jeszcze raz. Po dodaniu kroku najechania kursorem Rejestrator odtwarza przepływ. Odtwarzanie powiodło się.

Dodawanie asercji

Podczas nagrywania możesz sprawdzać np. atrybuty HTML i właściwości JavaScriptu. Aby dodać asercję:

  1. Rozpocznij nagrywanie, na przykład na tej stronie demonstracyjnej.

  2. Kliknij Dodaj twierdzenie.

    Przycisk Dodaj asercję

    Nagrywarka tworzy konfigurowalny krok waitForElement.

  3. W tym kroku określ selektory.

  4. Skonfiguruj krok, ale nie zmieniaj jego typu waitForElement. Możesz na przykład określić:

    • Atrybut HTML. Kliknij Dodaj atrybuty i wpisz nazwę oraz wartość atrybutu, którego używają elementy na tej stronie. Na przykład: data-test: <value>.
    • Właściwość JavaScript. Kliknij Dodaj właściwości i wpisz nazwę oraz wartość właściwości w formacie JSON. Na przykład: {".innerText":"<text>"}.
    • Inne właściwości kroku. Na przykład: visible: true.

  5. Kontynuuj nagrywanie pozostałej części procesu użytkownika, a potem go zatrzymaj.

  6. Kliknij Odtwórz. Powtórz. Jeśli asercja się nie powiedzie, nagrywarka wyświetli błąd po przekroczeniu limitu czasu.

Aby zobaczyć, jak to działa, obejrzyj ten film.

Kopiowanie kroków

Zamiast eksportować cały przepływ użytkownika, możesz skopiować pojedynczy krok do schowka:

  1. Kliknij prawym przyciskiem myszy krok, który chcesz skopiować, lub kliknij Menu z 3 kropkami. ikonę z 3 kropkami obok niego.
  2. W menu kliknij jedną z opcji Kopiuj jako….

Wybieranie opcji kopiowania z menu.

Możesz kopiować kroki w różnych formatach: JSON, Puppeteer, @puppeteer/replay oraz te udostępniane przez rozszerzenia.

Usuwanie kroków

Aby usunąć przypadkowo nagrany krok, kliknij go prawym przyciskiem myszy lub kliknij Menu z 3 kropkami.ikonę z 3 kropkami obok tego kroku i wybierz Usuń krok.

Usuń krok.

Dodatkowo Dyktafon automatycznie dodaje do początku każdego nagrania 2 osobne kroki:

Nagranie z ustawionym widocznym obszarem i krok po kroku.

  • Ustaw widoczny obszar. Umożliwia kontrolowanie wymiarów widocznego obszaru, skalowania i innych właściwości.
  • Nawigacja. Ustawia adres URL i automatycznie odświeża stronę przy każdym odtwarzaniu.

Aby wykonać automatyzację na stronie bez ponownego ładowania strony, usuń krok nawigacji w sposób opisany powyżej.

Kroki konfiguracji

Aby skonfigurować krok:

  1. Określ jego typ: click, doubleClick, hover, (input) change, keyUp, keyDown, scroll, close, navigate (do strony), waitForElement, waitForExpression lub setViewport.

    Inne właściwości zależą od wartości type.

  2. Poniżej elementu type określ wymagane właściwości.

    Skonfiguruj krok.

  3. Aby dodać opcjonalne właściwości związane z typem i je zdefiniować, kliknij odpowiednie przyciski.

Listę dostępnych właściwości znajdziesz w sekcji Właściwości kroku.

Aby usunąć opcjonalną właściwość, kliknij Usuń. obok niej przycisk Usuń.

Aby dodać element do właściwości tablicy lub usunąć go z niej, kliknij obok niego przycisk + lub -.

Właściwości kroku

Każdy krok może mieć te opcjonalne właściwości:

Inne typowe właściwości dostępne w przypadku większości typów kroków:

  • frame – tablica indeksów zliczanych od zera, które identyfikują iframe, który może być zagnieżdżony. Możesz na przykład zidentyfikować pierwszy (0) element iframe wewnątrz drugiego (1) elementu iframe głównego celu jako [1, 0].
  • timeout – liczba milisekund oczekiwania przed wykonaniem kroku. Więcej informacji znajdziesz w artykule Dostosowywanie limitów czasu kroków.
  • selectors – tablica selektorów. Więcej informacji znajdziesz w artykule Omówienie selektorów.

Właściwości związane z typem:

Typ Właściwość Wymagane Opis
click
doubleClick		 offsetX
offsetY		 Jest. Względem lewego górnego rogu pola treści elementu (w pikselach)
click
doubleClick		 button Przycisk wskaźnika: podstawowy | pomocniczy | drugi | wstecz | do przodu
change value Jest. Wartość końcowa
keyDown
keyUp		 key Jest. Nazwa klucza
scroll x
y		 Bezwzględne pozycje X i Y w pikselach (domyślnie 0).
navigate url Jest. Docelowy adres URL
waitForElement operator >= (domyślnie) | == | <=
waitForElement count Liczba elementów zidentyfikowanych przez selektor
waitForElement attributes Atrybut HTML i jego wartość
waitForElement properties Właściwość JavaScript i jej wartość w formacie JSON
waitForElement visible Wartość logiczna. Prawda, jeśli element jest w DOM i widoczny (nie ma wartości display: none ani visibility: hidden).
waitForElement
waitForExpression		 asserted events Obecnie tylko type: navigation, ale możesz podać tytuł i adres URL
waitForElement
waitForExpression		 timeout Maksymalny czas oczekiwania w milisekundach
waitForExpression expression Jest. wyrażenie JavaScriptu, które zwraca wartość logiczną „prawda”;
setViewport width
height		 Jest. Szerokość i wysokość widocznego obszaru w pikselach
setViewport deviceScaleFactor Jest. Podobnie jak współczynnik pikseli urządzenia (DPR), domyślnie 1
setViewport isMobile
hasTouch
isLandscape		 Jest. Flagi wartości logicznej, które określają, czy:
  • Uwzględnij metatag
  • Obsługa zdarzeń dotyku
  • Wyświetlanie w poziomie
    		•

    Istnieją 2 właściwości, które powodują wstrzymanie odtwarzania:

    • Właściwość waitForElement powoduje, że krok czeka na obecność (lub brak) określonej liczby elementów zidentyfikowanych przez selektor. Na przykład w tym kroku oczekujemy, aż na stronie będzie mniej niż 3 elementy pasujące do selektora .my-class.

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

    • Właściwość waitForExpression powoduje, że krok czeka, aż wyrażenie JavaScript zostanie ocenione jako prawda. Na przykład ten krok powoduje wstrzymanie na 2 sekundy, a potem zwraca wartość true, co pozwala na kontynuowanie odtwarzania.

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

    Dostosowywanie limitów czasu kroków

    Jeśli Twoja strona zawiera powolne żądania sieciowe lub długie animacje, odtwarzanie może się nie udać w przypadku kroków, które przekraczają domyślny limit czasu 5000 ms.

    Aby uniknąć tego problemu, możesz dostosować domyślny limit czasu dla każdego kroku lub ustawić osobne limity czasu dla poszczególnych kroków. Limity czasu dla poszczególnych kroków zastępują domyślne.

    Aby dostosować domyślny limit czasu dla każdego kroku jednocześnie:

    1. Kliknij Ustawienia powtarzania, aby umożliwić edycję pola Limit czasu.

      Ustawienia odtwarzania ponownego.

    2. W polu Limit czasu ustaw wartość limitu czasu w milisekundach.

    3. Aby zobaczyć działanie domyślnego limitu czasu po jego dostosowaniu, kliknij Odtwórz.Powtórz.

    Aby zastąpić domyślny limit czasu w konkretnym kroku:

    1. Rozwiń krok i kliknij Dodaj limit czasu.

      Dodaj czas oczekiwania.

    2. Kliknij timeout: <value> i ustaw wartość w milisekundach.

      Ustaw wartość limitu czasu.

    3. Aby zobaczyć działanie kroku z czasem oczekiwania, kliknij Odtwórz.Powtórz.

    Aby usunąć zastąpienie limitu czasu w kroku, kliknij obok niego przycisk UsuńUsuń..

    Selektory

    Podczas uruchamiania nowego nagrywania możesz skonfigurować te opcje:

    Konfigurowanie nowego nagrania.

    Selektory testów wspólnych

    W przypadku prostych stron internetowych wystarczające są atrybuty id i atrybuty class w arkuszu CSS, aby Rejestrator mógł wykryć selektory. Nie zawsze tak jest, ponieważ:

    • Twoje strony internetowe mogą używać dynamicznych klas lub identyfikatorów, które się zmieniają.
    • Selektory mogą przestać działać z powodu zmian w kodzie lub ramach.

    Wartości CSS class mogą być na przykład generowane automatycznie w przypadku aplikacji opracowanych za pomocą nowoczesnych frameworków JavaScript (np. React, Angular, Vue) i frameworków CSS.

    automatycznie wygenerowane klasy CSS o losowych nazwach;

    W takich przypadkach możesz użyć atrybutów data-*, aby tworzyć bardziej odporne testy. Deweloperzy używają już niektórych typowych selektorów data-* do automatyzacji. Dyktafon również je obsługuje.

    Jeśli w swojej witrynie masz zdefiniowane te selektory testów, nagrywarka automatycznie je wykrywa i najpierw z nich korzysta:

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

    Na przykład sprawdź element „Cappuccino” na tej stronie demonstracyjnej i zobacz atrybuty testowe:

    zdefiniowane selektory testów;

    Nagraj kliknięcie „Cappuccino”, rozwiń odpowiedni krok w nagraniu i sprawdź wykryte selektory:

    Wykryto selektor testu wspólnego.

    Dostosowywanie selektora nagrania

    Jeśli standardowe selektory testów nie działają, możesz dostosować selektor nagrania.

    Na przykład ta strona demonstracyjna używa atrybutu data-automate jako selektora. Rozpocznij nowe nagrywanie i jako atrybut selektora wpisz data-automate.

    Dostosuj selektor nagrania.

    Wpisz adres e-mail i obserwuj wartość selektora ([data-automate=email-address]).

    Wynik wyboru niestandardowego selektora.

    Priorytet selektora

    Nagrywarka wyszukuje selektory w takim porządku, w zależności od tego, czy podano atrybut niestandardowy selektor arkusza CSS:

    • Jeśli jest to określone:
      1. selektor CSS z niestandardowym atrybutem CSS.
      2. selektory XPath.
      3. selektor ARIA, jeśli został znaleziony;
      4. Selektor z najkrótszym unikalnym tekstem, jeśli został znaleziony.
    • Jeśli nie określono:
      1. selektor ARIA, jeśli został znaleziony;
      2. Selektory arkusza CSS o tym priorytecie:
        1. Najczęściej używane atrybuty do testowania:
          • data-testid
          • data-test
          • data-qa
          • data-cy
          • data-test-id
          • data-qa-id
          • data-testing
        2. atrybuty identyfikatora, np. <div id="some_ID">;
        3. Selektory arkusza CSS.
      3. selektory XPath.
      4. Selektory przebijania.
      5. Selektor z najkrótszym unikalnym tekstem, jeśli został znaleziony.

    Możesz użyć wielu zwykłych selektorów CSS, XPath i Pierce. Dyktafon rejestruje:

    • zwykłe selektory CSS i XPath na każdym poziomie głównym, czyli zagnieżdżone hosty cienia (jeśli występują).
    • Selektywnie przebijaj elementy, które są niepowtarzalne wśród wszystkich elementów w obrębie wszystkich źródeł cieni.