W poniższym filmie możesz zobaczyć nowy panel Rejestrator (funkcja w wersji beta).
W tym samouczku dowiesz się, jak używać panelu Dyktafon do nagrywania, odtwarzania i mierzenia ścieżek użytkowników.
Więcej informacji o tym, jak udostępniać nagrane ścieżki użytkownika, edytować je i ich kroki, znajdziesz w artykule Informacje o funkcjach narzędzia Recorder.
Otwórz panel Dyktafonu
- Otwórz Narzędzia deweloperskie.
Kliknij Więcej opcji
> Więcej narzędzi > Nagrywarka.
Możesz też otworzyć panel Nagrywarka za pomocą menu poleceń.
Wprowadzenie
Użyjemy strony demonstracyjnej zamawiania kawy. Płatność to częsta ścieżka użytkownika w witrynach sklepów.
W kolejnych sekcjach pokażemy, jak nagrywać, odtwarzać i sprawdzać ten proces płatności za pomocą panelu Nagrywarka:
- Dodaj kawę do koszyka.
- Dodaj kolejną kawę do koszyka.
- Otwórz stronę koszyka.
- Usuń jedną kawę z koszyka.
- Rozpocznij proces płatności.
- Podaj dane do płatności.
- Sprawdź.
Rejestrowanie ścieżki użytkownika
- Otwórz tę stronę demonstracyjną. Aby rozpocząć, kliknij przycisk Rozpocznij nowe nagrywanie.
- Wpisz „coffee checkout” w polu tekstowym Nazwa nagrania.
- Kliknij przycisk Rozpocznij nowe nagrywanie. Nagrywanie zostało rozpoczęte. W panelu wyświetla się komunikat Nagrywanie…, co oznacza, że trwa nagrywanie.
- Kliknij Cappuccino, aby dodać produkt do koszyka.
- Kliknij Americano, aby dodać kawę do koszyka. Rejestrator pokazuje czynności, które zostały wykonane do tej pory.
- Otwórz stronę koszyka i usuń z niego Americano.
- Aby rozpocząć proces płatności, kliknij przycisk Razem: 19,00 PLN.
- W formularzu danych płatności wypełnij pola tekstowe Imię i nazwisko oraz E-mail i zaznacz pole wyboru Chcę otrzymywać informacje o zmianach w zamówieniu i wiadomości promocyjne.
- Aby dokończyć proces płatności, kliknij przycisk Prześlij.
- Aby zakończyć nagrywanie, w panelu Nagrywarka kliknij
przycisk Zakończ nagrywanie.
Odtwarzanie wzorzec przeglądania
Po nagraniu ścieżki użytkownika możesz ją odtworzyć, klikając przycisk 
Odtwórz.
Na stronie możesz zobaczyć odtworzenie ścieżki użytkownika. Postęp odtwarzania jest też widoczny w panelu Nagrywarka.
Jeśli podczas nagrywania klikniesz coś nieprawidłowo lub coś nie zadziała, możesz przetestować ścieżkę użytkownika: spowolnić jej odtwarzanie, ustawić punkt kontrolny i wykonać ją krok po kroku.
Symulowanie wolnej sieci
Możesz symulować wolne połączenie z internetem, konfigurując ustawienia odtwarzania. Na przykład rozwiń Ustawienia powtórki i w menu Sieć wybierz Wolne 3G.
W przyszłości może zostać dostępnych więcej ustawień. Podziel się z nami ustawieniami odtwarzania, które Ci odpowiadają.
Pomiar ścieżki użytkownika
Skuteczność ścieżki użytkownika możesz mierzyć, klikając przycisk Zmierz wydajność. Na przykład proces płatności jest kluczowym elementem ścieżki użytkownika w witrynie sklepu internetowego. Za pomocą panelu Nagrywarka możesz raz nagrać proces płatności i regularnie go mierzyć.
Kliknięcie przycisku Zmierz wydajność spowoduje najpierw odtworzenie ścieżki użytkownika, a potem otwarcie śledzenia wydajności w panelu Skuteczność.
Dowiedz się, jak analizować wydajność strony w czasie działania za pomocą panelu Wydajność. Możesz zaznaczyć pole wyboru Web Vitals w panelu Wydajność, aby wyświetlić dane Web Vitals i znaleźć możliwości poprawy wrażeń użytkowników podczas przeglądania witryny.
Edytowanie kroków
Omówimy podstawowe opcje edycji kroków w nagrywanym przepływie pracy.
Pełną listę opcji edycji znajdziesz w sekcji Edytuj kroki w opisie funkcji.
Rozwiń kroki
Rozwiń każdy krok, aby zobaczyć szczegóły działania. Rozwiń na przykład krok Kliknij element „Cappuccino”.
Na powyższym kroku widać 2 selektory. Więcej informacji znajdziesz w artykule Omówienie selektora nagrania.
Podczas odtwarzania przepływu danych użytkownika nagrywarka próbuje wysłać zapytanie do elementu za pomocą jednego z selektorów według sekwencji. Jeśli na przykład nagrywarka wykona zapytanie dotyczące elementu za pomocą pierwszego selektora, pominie drugi selektor i przejdzie do następnego kroku.
Dodawanie i usuwanie selektorów z kroku
Możesz dodawać i usuwać dowolne selektory. Możesz na przykład usunąć element selektora 2, ponieważ w tym przypadku wystarczy tylko aria/Cappuccino. Najedź kursorem na selektor 2 i kliknij -, aby go usunąć.
Edytowanie selektorów w kroku
Można też edytować selektor. Jeśli np. chcesz wybrać Mocha zamiast Cappuccino, możesz:
Zamiast tego zmień wartość selektora na aria/Mocha.
Możesz też kliknąć przycisk Wybierz
, a następnie na stronie kliknąć Mocha.Powtórz teraz proces. Powinien on wybrać Mocha zamiast Cappuccino.
Spróbuj edytować inne właściwości kroku, np. type, target, value i inne.
Dodawanie i usuwanie kroków
Możesz też dodawać i usuwać kroki. Jest to przydatne, jeśli chcesz dodać dodatkowy krok lub usunąć przypadkowo dodany krok. Zamiast ponownie nagrywać ścieżkę użytkownika, możesz ją edytować:
Kliknij prawym przyciskiem myszy krok, który chcesz edytować, lub kliknij
ikonę z 3 kropkami obok niego. 
Aby go usunąć, wybierz Usuń krok. Na przykład zdarzenie Scroll po kroku Mocha nie jest konieczne.
Załóżmy, że chcesz poczekać, aż na stronie pojawi się 9 kaw, zanim wykonasz jakiekolwiek czynności. W menu kroku Mocha wybierz Dodaj krok przed.
W sekcji Element twierdzenia zmodyfikuj nowy krok, podając te informacje:
- typ: waitForElement
- selektor 1: .cup
- operator: == (kliknij przycisk Dodaj operator)
- liczba: 9 (kliknij przycisk Dodaj liczbę)
Powtórz przepływ, aby zobaczyć zmiany.
Dalsze kroki
Gratulacje! Samouczek został ukończony.
Więcej informacji o funkcjach i procesach (np. importowaniu i eksportowaniu) związanych z nagrywarką znajdziesz w dokumentacji funkcji nagrywarki.