Informacje o funkcjach

Sofia Emelianova

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 pomoc Pokaż skróty.

Aby dostosować skróty Dyktafonu:

1. Otwórz 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

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

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

3. Eksportowanie nagrania. 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:

   • Plik JSON.
   • @puppeteer/replay.
   • skrypt Puppeteer.
   • skrypt Puppeteer (w przeglądarce Firefox).
   • Puppeteer (w tym analiza Lighthouse).

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

4. Importowanie nagrania. Tylko w formacie JSON.

5. Usuwanie nagrania Usuń wybrane nagranie.

Możesz też zmienić nazwę nagrania, klikając znajdujący się obok niego przycisk edycji .

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

  

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 Importuj.
2. Wybierz plik JSON z zarejestrowaną ścieżką użytkownika.
3. Kliknij przycisk 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:

• Zagraj jeszcze raz w Testcafe Za pomocą TestCafe możesz ponownie odtwarzać pliki JSON przepływu użytkowników i generować raporty z testów tych nagrań.
• Powtórne odtwarzanie za pomocą Sauce Labs. Pliki JSON możesz odtwarzać w Sauce Labs za pomocą saucectl.

Ważny punkt: Zaawansowany przypadek użycia: integracja z biblioteką Puppeteer Replay Podobnie jak w przypadku bibliotek innych firm, możesz też utworzyć własną bibliotekę na podstawie Puppeteer Replay. Biblioteka Puppeteer Replay umożliwia dostosowywanie sposobu uruchamiania nagrania i „zapisywanie w postaci ciągu” plików JSON przepływu użytkownika, czyli ich konwertowanie na inne dane.

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

Ważna informacja: tych opcji powtarzania w zwolnionym tempie możesz używać tylko w nagrywarce. Aby dowiedzieć się, jak dodać limity czasu do samego nagrania, przeczytaj sekcję Dostosowywanie czasu oczekiwania poszczególnych kroków.

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.
3. Nagrywarka wyświetla kroki i ich kod obok siebie.
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.

   

   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 obok dowolnego kroku w nagraniu. Okrąg zmienia się w ikonę punktu kontrolnego .
2. Kliknij ikonę punktu przerwania i ponownie odtwórz nagranie. Wykonania są wstrzymywane w punkcie przerwania.
3. Aby przejść przez wykonanie, kliknij przycisk Wykonaj jeden krok na pasku działań u góry panelu Dyktafon.
4. Aby zatrzymać ponowne odtwarzanie, kliknij Anuluj ponowne odtwarzanie.

Edytowanie kroków

Możesz edytować dowolny krok w nagraniu, klikając obok niego przycisk , 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.
2. Najedź kursorem na element w widocznym obszarze. Pojawi się menu czynności.
3. Wybierz czynność z menu i zakończ nagrywanie. Dyktafon rejestruje tylko zdarzenie kliknięcia.
4. Spróbuj odtworzyć nagranie jeszcze raz, klikając 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.
5. Kliknij przycisk z 3 kropkami obok kroku Kliknij i wybierz Dodaj krok przed.
6. Rozwiń nowy krok. Domyślnie jest to typ waitForElement. Kliknij wartość obok type i wybierz hover.
7. Następnie ustaw odpowiedni selektor dla nowego kroku. Kliknij Wybierz, a następnie kliknij obszar elementu Hover over me!, który znajduje się poza menu. Selektor jest ustawiony na #clickable.
8. Spróbuj odtworzyć nagranie jeszcze raz. Po dodaniu kroku najechania kursorem Rejestrator odtwarza przepływ.

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

   

   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 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 obok niego.
2. W menu wybierz jedną z opcji Kopiuj jako ....

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 ikonę z 3 kropkami obok tego kroku i wybierz Usuń krok.

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

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

   

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

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		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		Wartość końcowa
keyDown keyUp	key		Nazwa klucza
scroll	x y		Bezwzględne pozycje X i Y w pikselach (domyślnie 0).
navigate	url		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		Wyrażenie JavaScript zwracające wartość „true”
setViewport	width height		Szerokość i wysokość widocznego obszaru w pikselach
setViewport	deviceScaleFactor		Podobny do współczynnika proporcji piksela (DPR urządzenia), domyślny to 1
setViewport	isMobile hasTouch isLandscape		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.

   

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

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

Aby zastąpić domyślny czas oczekiwania w konkretnym kroku:

1. Rozwiń krok i kliknij Dodaj limit czasu.

   

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

   

3. Kliknij Odtwórz ponownie, aby zobaczyć krok z limitem czasu oczekiwania.

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

Selektory

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

• W polu tekstowym Atrybut selektora wpisz niestandardowy atrybut testowy. Rejestrator 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:

  • CSS. selektory składniowe.
  • ARIA. Selektory semantyczne.
  • Tekst. selektory z najkrótszym unikalnym tekstem (jeśli jest dostępny).
  • XPath. Selektory, które używają języka ścieżki XML.
  • Pierce. Selektory podobne do selektorów CSS, ale mogą przeniknąć do skryptowego interfejsu DOM.

Uwaga: więcej informacji znajdziesz w artykułach Syntaktyczne a semantyczne selektory i Priorytet selektora.

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.

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:

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

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.

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

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.