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.

Aby poznać podstawy korzystania z panelu Dyktafon, przeczytaj artykuł Nagrywanie, ponowne odtwarzanie i pomiar aktywności użytkowników.

Poznaj i dostosuj skróty

Używaj skrótów, aby szybciej poruszać się po Dyktafonie. Listę domyślnych skrótów znajdziesz w artykule Skróty klawiszowe w panelu Dyktafonu.

Aby otworzyć wskazówkę z listą wszystkich skrótów bezpośrednio w Dyktafonie, w prawym górnym rogu kliknij pomoc 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 Dyktafon.
  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 Dyktafon możesz:

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

  3. Eksportowanie nagraniaPobranie pliku. Aby jeszcze bardziej dostosować skrypt lub udostępnić go na potrzeby zgłaszania błędów, możesz wyeksportować proces użytkownika w jednym z tych formatów:

    Więcej informacji o formatach znajdziesz w artykule Eksportowanie przepływu użytkowników.

  4. Importowanie nagraniaPrześlij plik. 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 Dyktafonie możesz eksportować i importować wzorce zachowań użytkowników. Jest to przydatne w przypadku zgłaszania błędów, ponieważ możesz udostępnić dokładny zapis kroków, które prowadzą do błędu. Możesz go też wyeksportować i ponownie odtworzyć w bibliotekach zewnętrznych.

Eksportowanie wzorca przeglądania

Aby wyeksportować wzorzec przeglądania:

  1. Otwórz wzorzec użytkownika, który chcesz wyeksportować.
  2. Kliknij Pobranie pliku. Eksportuj u góry panelu Dyktafon. Opcje formatu eksportu.
  3. Wybierz z listy jeden z tych formatów:
    • Plik JSON. Pobierz nagranie jako plik JSON.
    • @puppeteer/replay. pobrać nagranie jako skrypt Puppeteer Replay.
    • Pupeter. pobrać nagranie jako skrypt Puppeteer.
    • Puppeteer (w tym analiza Lighthouse). pobrać nagranie jako skrypt Puppeteer z umieszczoną analizą w Lighthouse.
    • Co najmniej jedna opcja dostępna w rozszerzeniach eksportu w Dyktafonie.
  4. Zapisz plik.

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

  • JSON. Edytuj zrozumiały dla człowieka obiekt JSON i zaimportuj plik JSON z powrotem do Rejestratora.
  • @puppeteer/replay. Odtwórz skrypt jeszcze raz za pomocą biblioteki Puppeteer Replay. W przypadku eksportowania jako skryptu @puppeteer/replay kroki pozostają obiektem JSON. Ta opcja jest idealna, jeśli chcesz przeprowadzić integrację z potokiem CI/CD, a jednocześnie mieć możliwość edytowania kroków w formacie JSON, a potem przekonwertowania ich i zaimportowania z powrotem do Rejestratora.
  • Skrypt marionetki. 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. Jednak nie można zaimportować tego skryptu z powrotem do Dyktafonu.

  • 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. Kliknij przycisk ImportujPrześlij plik. u góry panelu Dyktafon. Importuj nagranie.
  2. Wybierz plik JSON z zarejestrowaną ścieżką użytkownika.
  3. Kliknij przycisk Odtwórz ponownie.Odtwórz ponownie, aby uruchomić zaimportowany wzorzec użytkownika.

Ponowne 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łć przepływy użytkowników JSON w skrypty niestandardowe:

Powtórz przepływy użytkownika w formacie JSON:

.

Debugowanie wzorców użytkowników

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

Aby ułatwić debugowanie, panel Dyktafon umożliwia spowolnienie ponownego odtwarzania, ustawienie punktów przerwania, przejście przez wykonanie i sprawdzenie kodu w różnych formatach równolegle do kolejnych kroków.

Spowalnianie odtwarzania ponownie

Domyślnie Dyktafon odtwarza głos użytkownika tak szybko, jak to możliwe. Aby dowiedzieć się, co się dzieje w nagraniu, możesz zmniejszyć szybkość ponownego odtwarzania:

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

Powolne odtwarzanie ponownie.

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. Dyktafon wyświetla obok siebie kroki i ich kod. Widok kroków i ich kodu obok siebie.
  4. Gdy najedziesz kursorem na dany krok, Dyktafon podświetli odpowiedni kod w dowolnym formacie, w tym dostępnym w rozszerzeniach.

  5. Rozwiń listę formatów, aby wybrać format używany do eksportowania przepływów użytkowników.

    Lista formatów.

    Może to być 1 z 3 formatów domyślnych (JSON, @puppeteer/replay, Puppeteer script lub przez rozszerzenie.

  6. Debuguj nagranie, edytując parametry i wartości kroku. Nie można edytować widoku kodu, ale jest on aktualizowany w miarę wprowadzania zmian w krokach po lewej stronie.

Ustaw punkty przerwania i wykonuj krok po kroku

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

  1. Najedź kursorem na kółko Krok. obok dowolnego kroku w nagraniu. Okrąg zmieni się w ikonę punktu przerwania 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 1 krok. Wykonaj jeden krok na pasku działań u góry panelu Dyktafon.
  4. Aby zatrzymać ponowne odtwarzanie, kliknij Zatrzymaj się. Anuluj ponowne odtwarzanie.

Edytuj kroki

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

Możesz też dodać brakujące kroki i usunąć przypadkowo zarejestrowane kroki.

Dodaj kroki

Czasami trzeba dodać kroki ręcznie. Na przykład Dyktafon nie rejestruje automatycznie zdarzeń hover, ponieważ zanieczyszcza to nagranie i nie wszystkie takie zdarzenia są przydatne. Jednak takie elementy interfejsu, takie jak menu, mogą pojawiać się tylko w hover. Możesz ręcznie dodać kroki hover do wzorców przeglądania, które zależą od takich elementów.

Aby dodać krok ręcznie:

  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 kursorem 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 ponownie. Odtwórz ponownie. Po upływie limitu czasu ponowne odtwarzanie nie udaje się, ponieważ Dyktafon nie może uzyskać dostępu do elementu w menu. Błąd ponownego odtwarzania.
  5. Kliknij przycisk Przycisk z trzema kropkami. 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. Klikam „Najedź kursorem”.
  7. Następnie ustaw odpowiedni selektor dla nowego kroku. Kliknij Wybierz. Wybierz, a potem kliknij obszar elementu Hover over me! poza wyskakującym menu. Selektor jest ustawiony na #clickable. Ustawiam selektor.
  8. Spróbuj ponownie odtworzyć nagranie. Po dodaniu kroku najechania kursorem Dyktafon ponownie odtwarza ścieżkę. Udało się odtworzyć ponownie.

Dodaj asercje

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

    Dyktafon tworzy konfigurowalny krok waitForElement.

  3. Określ selektory na potrzeby tego kroku.

  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. Zarejestruj pozostałą część aktywności użytkownika, a następnie zatrzymaj nagrywanie.

  6. Kliknij Odtwórz ponownie. 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.

Kopiuj kroki

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.

Kroki możesz kopiować w różnych formatach: JSON, Puppeteer, @puppeteer/replay oraz w rozszerzeniach.

Usuń kroki

Aby usunąć przypadkowy krok, kliknij go prawym przyciskiem myszy lub kliknij znajdującą się obok niego ikonę Menu z 3 kropkami. z 3 kropkami i wybierz Usuń krok.

Usuń krok.

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

Nagranie z ustawionym widocznym obszarem i krokami 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 przeprowadzić automatyzację na stronie bez jej ponownego wczytywania, usuń etap nawigacji w opisany powyżej sposób.

Skonfiguruj kroki

Aby skonfigurować krok:

  1. Określ jego typ: click, doubleClick, hover, (wejściowy) change, keyUp, keyDown, scroll, close, navigate (dla 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 odpowiedni przycisk, 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ć lub usunąć element z właściwości tablicy albo 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 obecnie mogą być tylko pojedynczym zdarzeniem navigation

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

  • frame – tablica indeksów od zera identyfikujących element 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 sekcji Dostosowywanie czasu oczekiwania kroków.
  • selectors – tablica selektorów. Więcej informacji znajdziesz w artykule Omówienie selektorów.

Właściwości typowe dla danego typu to:

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: główny | usługa pomocnicza | sekunda | wstecz | przekazać dalej
change value Jest. Wartość końcowa
keyDown
keyUp		 key Jest. Nazwa klucza
scroll x
y		 Bezwzględne położenie na osi x i y przewijania w pikselach, domyślnie 0
navigate url Jest. Docelowy URL
waitForElement operator >= | == (domyślnie) | &lt;=
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:
  • Weź pod uwagę 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 nieobecność) kilku 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 poniższy krok zostaje wstrzymany na 2 sekundy, a potem zmienia się w wartość prawda, co umożliwia kontynuowanie ponownego odtwarzania.

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

    Dostosuj czasy oczekiwania kroków

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

    Aby uniknąć tego problemu, możesz zmienić domyślny limit czasu każdego kroku za jednym razem lub ustawić oddzielne limity czasu dla poszczególnych kroków. Czasy oczekiwania określonych kroków zastępują ustawienia domyślne.

    Aby zmienić domyślny czas oczekiwania każdego kroku naraz:

    1. Kliknij Ustawienia ponownego odtwarzania, by umożliwić edytowanie pola Limit czasu.

      Ustawienia ponownego odtwarzania.

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

    3. Kliknij Odtwórz ponownie.Odtwórz ponownie, aby zobaczyć, jak działa zmieniony domyślny czas oczekiwania.

    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 ponownie.Odtwórz ponownie, aby zobaczyć działanie z limitem czasu.

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

    Omówienie selektorów

    Gdy rozpoczynasz nowe nagranie, możesz skonfigurować te ustawienia:

    Konfiguruję nowe nagranie.

    • W polu tekstowym Atrybut selektora wpisz niestandardowy atrybut testowy. Dyktafon będzie używać tego atrybutu do wykrywania selektorów zamiast listy typowych atrybutów testowych.

    • W zestawie pól wyboru Typy selektorów do rejestrowania wybierz typy selektorów, które mają być wykrywane automatycznie:

      • Pole wyboru. CSS. Selektory składowe.
      • Pole wyboru. ARIA. Selektory semantyczne.
      • Pole wyboru. Tekst. Selektory z najkrótszym unikalnym tekstem, jeśli jest dostępny.
      • Pole wyboru. XPath. Selektory, które korzystają z języka ścieżki XML.
      • Pole wyboru. Pierce. Selektory podobne do selektorów CSS, ale mogą przebijać shadow DOM.
    .

    Typowe selektory testów

    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ą nie działać z powodu zmian w kodzie lub platformie.

    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 zwiększyć odporność testów. Deweloperzy używają już tych samych popularnych selektorów data-* do automatyzacji. Dyktafon również je obsługuje.

    Jeśli w swojej witrynie masz zdefiniowane te popularne selektory testów, Dyktafon automatycznie wykryje je i użyje w pierwszej kolejności:

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

    Sprawdzaj np. „Cappuccino” na tej stronie demonstracyjnej, zobaczysz atrybuty testowe:

    Zdefiniowane selektory testów.

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

    Wykryto wspólny selektor testu.

    Dostosuj selektor 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 nagranie i wpisz data-automate jako atrybut selektora.

    Dostosuj selektor nagrania.

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

    Wynik wyboru selektora niestandardowego.

    Priorytet selektora

    Rejestrator szuka selektorów w następującej kolejności w zależności od tego, czy podano niestandardowy selektor arkusza CSS:

    • Jeśli określono:
      1. Selektor arkusza CSS z niestandardowym atrybutem CSS.
      2. selektory XPath.
      3. Selektor ARIA (jeśli został znaleziony).
      4. Selektor z najkrótszym unikalnym tekstem (jeśli zostanie znaleziony).
    • Jeśli nie określono:
      1. Selektor ARIA (jeśli został znaleziony).
      2. selektory arkusza CSS o następującym priorytecie:
        1. Atrybuty najczęściej używane 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. Zwykłe selektory arkusza CSS.
      3. selektory XPath.
      4. Selektory pierce.
      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.