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.
Aby poznać podstawy korzystania z panelu Dyktafon, przeczytaj artykuł Nagrywanie, ponowne odtwarzanie i pomiar aktywności 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ć wskazówkę z listą wszystkich skrótów bezpośrednio w Dyktafonie, w prawym górnym rogu kliknij Pokaż skróty.
Aby dostosować skróty Dyktafonu:
- Kliknij
Ustawienia > Skróty. - Przewiń w dół do sekcji Dyktafon.
- Wykonaj czynności opisane w artykule Dostosowywanie skrótów.
Edytowanie schematów działań użytkowników
U góry panelu Dyktafon możesz:
- Dodaj nowe nagranie
. Aby dodać nowe nagranie, kliknij ikonę +. - Wyświetl wszystkie nagrania
. W menu pojawi się lista zapisanych nagrań. Wybierz opcję nagrań: [liczba], aby rozwinąć listę zapisanych nagrań i nią zarządzać.
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.
- Puppeteer (w tym analiza Lighthouse).
Więcej informacji o formatach znajdziesz w artykule Eksportowanie listy użytkowników.
Importowanie nagrania
Tylko w formacie JSON.Usuwanie nagrania
Usuń wybrane nagranie.
Możesz też edytować nazwę nagrania, klikając obok niej przycisk edycji 
.
Udostępnianie wzorów przeglądania
W rejestratorze możesz eksportować i importować ścieżki użytkownika. Jest to przydatne podczas zgłaszania błędów, ponieważ możesz udostępnić dokładny zapis kroków, które prowadzą do jego wystąpienia. Możesz go też wyeksportować i ponownie odtworzyć w bibliotekach zewnętrznych.
Eksportowanie wzoru przeglądania
Aby wyeksportować ścieżkę użytkownika:
- Otwórz ścieżkę użytkownika, którą chcesz wyeksportować.
- U góry panelu Rejestrator kliknij
Eksportuj.
- Na liście wybierz jeden z tych formatów:
- Plik JSON. Pobierz nagranie jako plik JSON.
- @puppeteer/replay. pobrać nagranie jako skrypt Puppeteer Replay.
- Puppeteer. pobrać nagranie jako skrypt Puppeteer.
- Puppeteer (w tym analiza Lighthouse). pobrać nagranie jako skrypt Puppeteer z umieszczoną analizą w Lighthouse.
- Co najmniej 1 opcja udostępniona przez rozszerzenia eksportu w nagrywarce.
- Zapisz plik.
W przypadku każdej domyślnej opcji eksportu możesz wykonać te czynności:
- JSON. Zmień obiekt JSON na zrozumiały dla człowieka format i zaimportuj plik JSON z powrotem do nagrywarki.
- @puppeteer/replay. Odtwórz skrypt 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 Puppeteer. Odtwórz skrypt za pomocą Puppeteer. Ponieważ kroki są konwertowane na JavaScript, możesz je dostosowywać bardziej szczegółowo, np. tworzyć pętle. 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
Eksportuj w formacie niestandardowym, instalując rozszerzenie
Zobacz Rozszerzenia Dyktafonu.
Importowanie wzorca przeglądania
Aby zaimportować wzorzec użytkownika:
- U góry panelu Nagrywarka kliknij przycisk Importuj
.
- Wybierz plik JSON z zarejestrowaną ścieżką użytkownika.
- Kliknij przycisk
Odtwórz ponownie, aby uruchomić zaimportowany wzorzec użytkownika.
Odtwarzanie z bibliotekami zewnętrznymi
Puppeteer Replay to biblioteka open source obsługiwana przez zespół narzędzi deweloperskich w Chrome. Bazuje na grze Puppeteer. Jest to narzędzie wiersza poleceń, które umożliwia ponowne odtwarzanie plików JSON.
Możesz też 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 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.
- Nagrywarka Chrome Nightwatch. Możesz go użyć, aby przekonwertować pliki JSON przepływu użytkowników na skrypty testowe Nightwatch.
- Rejestrator Chrome CodeceptJS. Możesz go użyć do konwertowania plików JSON przepływu użytkowników na skrypty testowe CodeceptJS.
Powtórz przepływy użytkownika w formacie 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 z Sauce Labs Możesz ponownie odtworzyć pliki JSON w Sauce Labs za pomocą saucectl.
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 kontrolne, przejrzeć kod krok po kroku i sprawdzać kod w różnych formatach równolegle z każdym krokiem.
Zwolnij odtwarzanie
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:
- Otwórz menu
Powtórz. - Wybierz jedną z opcji szybkości ponownego odtwarzania:
- Normalnie (domyślnie)
- Wolno
- Bardzo wolne
- Bardzo wolno
Sprawdzanie kodu
Aby sprawdzić kod przepływu użytkownika w różnych formatach:
- Otwórz nagranie w panelu Dyktafon.
- Kliknij Pokaż kod w prawym górnym rogu listy kroków.
- Dyktafon wyświetla obok siebie kroki i ich kod.
- Gdy najedziesz kursorem na krok, nagrywarka wyróżni odpowiedni kod w dowolnym formacie, w tym w formacie rozszerzeń.
Rozwiń listę formatów, aby wybrać format używany do eksportowania przepływów użytkowników.
Może to być 1 z 3 formatów domyślnych (JSON, @puppeteer/replay, Puppeteer script lub przez rozszerzenie.
Debuguj nagranie, edytując parametry i wartości kroku. Widok kodu nie jest edytowalny, ale aktualizuje się odpowiednio do zmian wprowadzanych w krokach po lewej stronie.
Ustaw punkty przerwania i wykonuj krok po kroku
Aby ustawić punkt przerwania i wykonać krok po kroku:
- Najedź kursorem na kółko
obok dowolnego kroku w nagraniu. Okrąg zmienia się w ikonę punktu kontrolnego 
. - Kliknij ikonę punktu przerwania
i ponownie odtwórz nagranie. Wykonania są wstrzymywane w punkcie przerwania.
- Aby przejść przez wykonanie, kliknij przycisk
Wykonaj jeden krok na pasku działań u góry panelu Dyktafon. - Aby zatrzymać ponowne odtwarzanie, kliknij
Anuluj ponowne odtwarzanie.
Edytowanie kroków
Możesz edytować każdy krok w nagraniu, klikając przycisk 
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.
Dodawanie kroków
Czasami trzeba dodać kroki ręcznie. Na przykład nagrywarka nie rejestruje automatycznie zdarzeń hover, ponieważ powoduje to zanieczyszczenie nagrania i nie wszystkie takie zdarzenia są przydatne. Jednak elementy interfejsu, takie jak menu, mogą pojawiać się tylko na hover. Możesz ręcznie dodać kroki hover do wzorców przeglądania, które zależą od takich elementów.
Aby ręcznie dodać krok:
- Otwórz tę stronę demonstracyjną i rozpocznij nowe nagranie.
- Najedź kursorem na element w widocznym obszarze. Pojawi się menu czynności.
- Wybierz czynność z menu i zakończ nagrywanie. Rejestrator rejestruje tylko zdarzenie kliknięcia.
- Spróbuj odtworzyć nagranie jeszcze raz, klikając
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.
- Kliknij przycisk
z 3 kropkami obok kroku Kliknij i wybierz Dodaj krok przed.
- Rozwiń nowy krok. Domyślnie ma typ
waitForElement. Kliknij wartość oboktypei wybierzhover.
- 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.
- Spróbuj odtworzyć nagranie jeszcze raz. Po dodaniu kroku najechania kursorem Rejestrator odtwarza przepływ.
Dodaj asercje
Podczas nagrywania możesz sprawdzać na przykład atrybuty HTML i właściwości JavaScript. Aby dodać asercję:
- Rozpocznij nagrywanie np. na tej stronie demonstracyjnej.
Kliknij Dodaj asercję.
Nagrywarka tworzy konfigurowalny krok
waitForElement.Określ selektory na potrzeby tego kroku.
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.
- Atrybut HTML. Kliknij Dodaj atrybuty i wpisz nazwę oraz wartość atrybutu, którego używają elementy na tej stronie. Na przykład:
Zarejestruj pozostałą część aktywności użytkownika, a następnie zatrzymaj nagrywanie.
Kliknij
Odtwórz ponownie. Jeśli asercja się nie powiedzie, nagrywarka wyświetli błąd po przekroczeniu limitu czasu.
Obejrzyj film poniżej, by zobaczyć, jak działa ten proces.
Kopiowanie kroków
Zamiast eksportować cały przepływ użytkownika, możesz skopiować pojedynczy krok do schowka:
- Kliknij prawym przyciskiem myszy krok, który chcesz skopiować, lub kliknij
ikonę z 3 kropkami obok niego. - W menu wybierz jedną z opcji Kopiuj jako ....
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ę z 3 kropkami 
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 przeprowadzić automatyzację na stronie bez jej ponownego wczytywania, usuń etap nawigacji w opisany powyżej sposób.
Skonfiguruj kroki
Aby skonfigurować krok:
Określ jego typ:
click,doubleClick,hover, (wejściowy)change,keyUp,keyDown,scroll,close,navigate(dla strony),waitForElement,waitForExpressionlubsetViewport.Inne właściwości zależą od wartości
type.Określ wymagane właściwości poniżej elementu
type.
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ąć opcjonalną właściwość, kliknij 
obok niej przycisk 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 kluczowemainodnosi się do bieżącej strony.assertedEvents, które obecnie może być tylko pojedynczym zdarzeniemnavigation
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, przez które należy zaczekać 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 związane z typem:
| Typ | Właściwość | Wymagane | Opis |
clickdoubleClick |
offsetXoffsetY |
 |
Względem lewego górnego rogu pola treści elementu w pikselach |
clickdoubleClick |
button |
Przycisk wskaźnika: podstawowy | pomocniczy | drugi | wstecz | do przodu | |
change |
value |
 |
Wartość końcowa |
keyDownkeyUp |
key |
 |
Nazwa klucza |
scroll |
xy |
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 jest w DOM i widoczny (nie ma wartości display: none ani visibility: hidden). |
|
waitForElementwaitForExpression |
asserted events |
Obecnie tylko type: navigation, ale możesz podać tytuł i adres URL |
|
waitForElementwaitForExpression |
timeout |
Maksymalny czas oczekiwania w milisekundach | |
waitForExpression |
expression |
 |
wyrażenie JavaScriptu, które zwraca wartość logiczną „prawda”; |
setViewport |
widthheight |
 |
Szerokość i wysokość widocznego obszaru w pikselach. |
setViewport |
deviceScaleFactor |
 |
Podobnie jak współczynnik pikseli urządzenia (DPR), domyślnie 1 |
setViewport |
isMobilehasTouchisLandscape |
 |
Flagi wartości logicznej określające, czy: |
Istnieją 2 właściwości, które powodują wstrzymanie odtwarzania:
Właściwość
waitForElementpowoduje, że krok czeka na obecność (lub nieobecność) kilku 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ść
waitForExpressionpowoduje, że krok czeka, aż wyrażenie JavaScript zostanie ocenione jako prawda. Na przykład poniższy krok zostaje wstrzymany na 2 sekundy, a potem zmienia się na prawda, co umożliwia kontynuowanie ponownego 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. Czasy oczekiwania określonych kroków zastępują ustawienia domyślne.
Aby zmienić domyślny czas oczekiwania każdego kroku naraz:
Kliknij Ustawienia ponownego odtwarzania, by umożliwić edytowanie pola Limit czasu.
W polu Limit czasu ustaw wartość limitu czasu w milisekundach.
Aby zobaczyć, jak działa domyślny czas oczekiwania po zmianie, kliknij
Powtórz.
Aby zastąpić domyślny limit czasu w konkretnym kroku:
Rozwiń krok i kliknij Dodaj limit czasu.
Kliknij
timeout: <value>i ustaw wartość w milisekundach.
Kliknij
Powtórz, aby zobaczyć działanie kroku z czasem oczekiwania.
Aby usunąć zastąpienie czasu oczekiwania danego kroku, kliknij obok niego przycisk Usuń
.
Selektory
Gdy rozpoczynasz nowe nagranie, możesz skonfigurować te ustawienia:
- W polu tekstowym Atrybut selektora wpisz niestandardowy atrybut testowy. Nagrywarka użyje 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ładowe.
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;
Piercing. Selektory podobne do selektorów CSS, ale mogą przebijać shadow DOM.
Popularne selektory testów
W przypadku prostych stron internetowych atrybuty id i CSS class wystarczą, by Dyktafon wykrył selektory. 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.
W takich przypadkach możesz użyć atrybutów data-*, aby tworzyć bardziej odporne testy. 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 selektory testów, nagrywarka automatycznie je wykrywa i najpierw z nich korzysta:
data-testiddata-testdata-qadata-cydata-test-iddata-qa-iddata-testing
Na przykład sprawdź element „Cappuccino” na tej stronie demonstracyjnej i zwróć uwagę na atrybuty testowe:
Nagraj kliknięcie „Cappuccino”, rozwiń odpowiedni krok w nagraniu i sprawdź wykryte selektory:
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.
Wpisz adres e-mail i obserwuj wartość selektora ([data-automate=email-address]).
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:
- Selektor CSS z niestandardowym atrybutem CSS.
- selektory XPath.
- Selektor ARIA (jeśli został znaleziony).
- Selektor z najkrótszym unikalnym tekstem, jeśli został znaleziony.
- Jeśli nie określono:
- selektor ARIA, jeśli został znaleziony;
- selektory arkusza CSS o następującym priorytecie:
- Najczęściej używane atrybuty do testowania:
data-testiddata-testdata-qadata-cydata-test-iddata-qa-iddata-testing
- atrybuty identyfikatora, np.
<div id="some_ID">; - Selektory arkusza CSS.
- Najczęściej używane atrybuty do testowania:
- selektory XPath.
- Selektory pierce.
- Selektor z najkrótszym unikalnym tekstem (jeśli zostanie 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ą.
- Selektory przebijające, które są niepowtarzalne wśród wszystkich elementów w obrębie wszystkich źródeł cieni.