Informacje o funkcjach

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Zapoznaj się z obszernym opisem funkcji dostępnych w panelu Dyktafon w Narzędziach deweloperskich w Chrome, aby dowiedzieć się, jak udostępniać schematy użytkownika, edytować je i postępować z nimi.

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. Otwórz Ustawienia. Ustawienia > Skróty.
  2. Przewiń w dół do sekcji Nagrywarka.
  3. Wykonaj czynności opisane w artykule Dostosowywanie skrótów.

Edytowanie wzorców użytkowników

W nagłówku panelu Dyktafonu w Narzędziach deweloperskich znajduje się menu pozwalające wybrać ścieżkę użytkownika do edycji.

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

  1. Dodawanie nowego nagraniaDodaj. Kliknij ikonę +, aby dodać nowe nagranie.
  2. Wyświetl wszystkie nagraniaRozwiń bardziej.. W menu znajduje się lista zapisanych nagrań. Wybierz opcję N nagrań, aby rozwinąć listę zapisanych nagrań i nią zarządzać. Wyświetl wszystkie nagrania.

  3. Eksportowanie nagraniaPobranie 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ż zmienić nazwę nagrania, klikając znajdujący się obok niego przycisk edycji Edytuj..

Udostępniaj wzorce użytkowników

W rejestratorze możesz eksportować i importować ścieżki użytkownika. Jest to przydatne w przypadku zgłaszania błędów, ponieważ możesz udostępnić dokładny zapis kroków, które prowadzą do wystąpienia błędu. Możesz też eksportować i odtwarzać je za pomocą zewnętrznych bibliotek.

Eksportowanie wzorca 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 formatowania w menu Eksportuj.

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

    • plik JSON, Pobierz nagranie jako plik JSON.
    • @puppeteer/replay. pobrać 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 zaimportuj 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 scenariusz ponownie z pomocą Puppeteer. Ponieważ kroki są konwertowane na JavaScript, masz większe możliwości dostosowania, na przykład zapętlanie kroków. Nie można jednak zaimportować tego skryptu z powrotem do nagrywarki.
  • Puppeteer (w Firefoksie). W ramach obsługi WebDriver BiDi możesz uruchomić ten skrypt Puppeteer zarówno w Chrome, jak i w Firefoksie.

  • Puppeteer (w tym analiza Lighthouse). Ta opcja eksportu jest taka sama jak poprzednia, ale zawiera kod generujący analizę Lighthouse.

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

    # npm i puppeteer lighthouse
node your_export.js

    Otwarto raport Lighthouse w Chrome.

Eksportuj w formacie niestandardowym, instalując rozszerzenie

Zobacz Rozszerzenia Dyktafonu.

Importowanie wzorca przeglądania

Aby zaimportować wzorzec użytkownika:

  1. U góry panelu Nagrywarka kliknij przycisk ImportujPrześlij plik.. Importuj nagranie.
  2. Wybierz plik JSON z zarejestrowaną ścieżką użytkownika.
  3. Kliknij przycisk Odtwórz ponownie.Odtwórz, aby uruchomić zaimportowany proces użytkownika.

Odtwarzanie z bibliotekami zewnętrznymi

Puppeteer Replay to biblioteka open source zarządzana przez zespół Chrome Dev Tools. Opiera się na grze Puppeteer. Jest to narzędzie wiersza poleceń, które umożliwia ponowne odtwarzanie plików JSON.

Oprócz tego możesz przekształcać i ponownie odtwarzać pliki JSON za pomocą poniższych bibliotek innych firm.

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

  • Cypress Chrome Dyktafon Możesz go użyć do konwertowania plików JSON przepływu użytkowników na skrypty testowe Cypress. Aby zobaczyć, jak to działa, obejrzyj ten film.
  • Dyktafon w Chrome na zegarek nocny 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

Tak jak w przypadku każdego kodu, czasami trzeba debugować zarejestrowane przepływy użytkowników.

Aby ułatwić debugowanie, w panelu Nagrywarka możesz zwolnić odtwarzanie, ustawić punkty przerwy, przejrzeć kod w różnych formatach równolegle z krokowymi instrukcjami.

Spowalnianie odtwarzania ponownie

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 ponownie.Powtórz.
  2. Wybierz jedną z opcji szybkości odtwarzania:
    • Normalnie (domyślnie)
    • Wolno
    • Bardzo wolne
    • Bardzo wolno

Odtwarzanie w zwolnionym tempie.

Sprawdź kod

Aby sprawdzić kod przepływu użytkownika w różnych formatach:

  1. Otwórz nagranie w panelu Dyktafon.
  2. Kliknij Pokaż kod w prawym górnym rogu listy kroków.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. Aby debugować nagranie, edytuj parametry i wartości kroków. Nie można edytować widoku kodu, ale jest on aktualizowany w miarę wprowadzania zmian w krokach po lewej stronie.

Ustawianie punktów przerwania i wykonywanie kroków

Aby ustawić punkt przerwania i wykonać 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 ponownie odtwórz nagranie. Wykonania są wstrzymywane w punkcie przerwania. Wstrzymanie wykonania.
  3. Aby przejść przez wykonanie, kliknij przycisk Wykonaj jeden krok. Wykonaj jeden krok na pasku działań u góry panelu Dyktafon.
  4. Aby zatrzymać ponowne odtwarzanie, kliknij Zatrzymaj się. Anuluj ponowne 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.

Dodaj kroki

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 takie elementy interfejsu, takie jak menu, mogą pojawiać się tylko w 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 nagranie.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. Dyktafon rejestruje tylko zdarzenie kliknięcia.Kliknięcie działania i zakończenie nagrywania.
  4. Spróbuj odtworzyć nagranie jeszcze raz, klikając Odtwórz. Odtwórz ponownie. 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 jest to 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 potwierdzić na przykład atrybuty HTML i właściwości JavaScript. Aby dodać asercję:

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

  2. Kliknij Dodaj asercję.

    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 używane przez elementy na tej stronie. Na przykład: data-test: <value>.
    • Właściwość JavaScript. Kliknij Dodaj właściwości, a potem wpisz nazwę i 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. Odtwórz ponownie. Jeśli asercja się nie powiedzie, Dyktafon wyświetli błąd po czasie oczekiwania.

Obejrzyj film poniżej, by zobaczyć, jak działa ten proces.

Kopiowanie kroków

Zamiast eksportować cały wzorzec przeglądania, możesz skopiować pojedynczy krok do schowka:

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

Wybierając w menu opcję kopiowania.

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

Usuń kroki

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

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

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. Określ wymagane właściwości poniżej elementu type.

    Skonfiguruj krok.

  3. Kliknij odpowiednie przyciski, aby dodać i określić opcjonalne właściwości specyficzne dla danego typu.

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

Aby usunąć właściwość opcjonalną, kliknij obok niej przycisk Usuń. 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 właściwości opcjonalne:

  • target – adres URL celu protokołu Chrome Dev Tools (CDP), domyślne słowo kluczowe main odnosi się do bieżącej strony.
  • assertedEvents, które może być tylko jednym zdarzeniem navigation.

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. Na przykład pierwszy element iframe (0) w drugim (1) elemencie iframe głównego elementu docelowego możesz wskazać 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 znajduje się w DOM i jest widoczny (nie ma parametru display: none ani visibility: hidden).
waitForElement
waitForExpression		 asserted events Obecnie tylko type: navigation, ale możesz podać tytuł i URL
waitForElement
waitForExpression		 timeout Maksymalny czas oczekiwania w milisekundach
waitForExpression expression Jest. Wyrażenie JavaScript zwracające wartość „true”
setViewport width
height		 Jest. Szerokość i wysokość widocznego obszaru w pikselach
setViewport deviceScaleFactor Jest. Podobny do współczynnika proporcji piksela (DPR urządzenia), domyślny to 1
setViewport isMobile
hasTouch
isLandscape		 Jest. Flagi wartości logicznej, które określają, czy:
  • Uwzględnij metatag
  • Obsługa zdarzeń dotknięcia
  • Wyświetl w trybie poziomym
    		•

    Odtwarzanie jest wstrzymane przez dwie właściwości:

    • Właściwość waitForElement powoduje, że krok czeka na obecność (lub brak) określonej liczby elementów zidentyfikowanych przez selektor. Na przykład poniższy krok poczeka, aż na stronie pasującej do selektora .my-class pojawią się mniej niż 3 elementy.

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

    • Właściwość waitForExpression powoduje, że krok czeka na „prawda” przez wyrażenie JavaScript. 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 strona zawiera powolne żądania sieciowe lub długie animacje, ponowne odtworzenie może się nie powieść po przekroczeniu domyślnego limitu czasu 5000 ms.

    Aby uniknąć tego problemu, możesz zmienić domyślny limit czasu dla każdego kroku naraz lub ustawić osobne limity czasu dla poszczególnych kroków. Czasy oczekiwania na określone kroki zastępują wartości domyślne.

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

    1. Kliknij Ustawienia odtwarzania ponownie, by umożliwić edytowanie 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 czas oczekiwania 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. Kliknij Odtwórz.Odtwórz ponownie, aby zobaczyć krok z limitem czasu oczekiwania.

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

    Selektory

    Podczas rozpoczęcia nowego nagrywania możesz skonfigurować te opcje:

    Konfiguruję nowe nagranie.

    Selektory testów wspólnych

    W przypadku prostych stron internetowych atrybuty id i CSS class wystarczą, by Dyktafon wykrył selektory. Jednak 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.

    Na przykład wartości CSS class mogą być generowane automatycznie w przypadku aplikacji opracowanych z wykorzystaniem nowoczesnych platform JavaScript (np. React, Angular, Vue) i platform CSS.

    Automatycznie wygenerowane klasy CSS z losowymi nazwami.

    W takich przypadkach możesz użyć atrybutów data-*, aby tworzyć bardziej odporne testy. Deweloperzy korzystają już z kilku 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 stronie demonstracyjnej i zobacz atrybuty testowe:

    zdefiniowane selektory testów;

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

    Wykryto wspólny selektor testu.

    Dostosowywanie selektora nagrania

    Jeśli nie odpowiadają Ci popularne selektory testów, 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 selektora niestandardowego.

    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 arkusza CSS z atrybutem CSS niestandardowym.
      2. selektory XPath.
      3. Selektor ARIA, jeśli został znaleziony.
      4. Selektor z najkrótszym unikalnym tekstem (jeśli zostanie znaleziony).
    • Jeśli nie podasz żadnej wartości:
      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. identyfikator, np. <div id="some_ID">.
        3. Selektory arkusza CSS.
      3. selektory XPath.
      4. Selektory przebijania.
      5. Selektor z najkrótszym unikalnym tekstem (jeśli zostanie znaleziony).

    Może być wiele 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ą).
    • Selektory pierścieni, które są unikalne wśród wszystkich elementów we wszystkich pierwiastkach cienia.