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.
Aby dostosować skróty Dyktafonu:
- Otwórz
Ustawienia > Skróty
- Przewiń w dół do sekcji Dyktafon.
- Wykonaj czynności opisane w artykule Dostosowywanie skrótów.
Edytowanie wzorców użytkowników
U góry panelu Dyktafon możesz:
- Dodawanie nowego nagrania
Kliknij ikonę +, aby dodać nowe nagranie.
- Zobacz 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 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:
- Plik JSON.
- @puppeteer/replay.
- skrypt Puppeteer.
- Puppeteer (w tym analiza Lighthouse).
Więcej informacji o formatach znajdziesz w artykule Eksportowanie przepływu użytkowników.
Importowanie nagrania
Tylko w formacie JSON.
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 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:
- Otwórz wzorzec użytkownika, który chcesz wyeksportować.
- Kliknij
Eksportuj u góry panelu Dyktafon.
- 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.
- 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
Eksportuj w formacie niestandardowym, instalując rozszerzenie
Zobacz Rozszerzenia Dyktafonu.
Importowanie wzorca przeglądania
Aby zaimportować wzorzec użytkownika:
- Kliknij przycisk Importuj
u góry panelu Dyktafon.
- Wybierz plik JSON z zarejestrowaną ścieżką użytkownika.
- Kliknij przycisk
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:
- Cypress Chrome Dyktafon Możesz go użyć do konwertowania plików JSON przepływu użytkowników na skrypty testowe Cypress. Obejrzyj prezentację, aby zobaczyć, jak to działa.
- Dyktafon w Chrome na zegarek nocny 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ń.
- Graj ponownie w Sauce Labs Możesz ponownie odtworzyć pliki JSON w Sauce Labs za pomocą saucectl.
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:
- Otwórz menu
Odtwórz ponownie.
- Wybierz jedną z opcji szybkości ponownego odtwarzania:
- Normalnie (domyślnie)
- Wolno
- Bardzo wolne
- Bardzo wolno
Sprawdź kod
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 dany krok, Dyktafon podświetli odpowiedni kod w dowolnym formacie, w tym dostępnym w rozszerzeniach.
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. 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:
- Najedź kursorem na kółko
obok dowolnego kroku w nagraniu. Okrąg zmieni się w ikonę punktu przerwania
.
- 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.
Edytuj kroki
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.
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:
- 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. Dyktafon 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 jest to typ
waitForElement
. Kliknij wartość oboktype
i wybierzhover
. - Następnie ustaw odpowiedni selektor dla nowego kroku. Kliknij
Wybierz, a potem kliknij obszar elementu
Hover over me!
poza wyskakującym menu. Selektor jest ustawiony na#clickable
. - Spróbuj ponownie odtworzyć nagranie. Po dodaniu kroku najechania kursorem Dyktafon ponownie odtwarza ścieżkę.
Dodaj asercje
Podczas nagrywania możesz potwierdzić na przykład atrybuty HTML i właściwości JavaScript. Aby dodać asercję:
- Rozpocznij nagrywanie na przykład na tej stronie demonstracyjnej.
Kliknij Dodaj asercję.
Dyktafon 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 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
.
- Atrybut HTML. Kliknij Dodaj atrybuty i wpisz nazwę oraz wartość atrybutu używane przez 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, 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:
- 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 2 osobne kroki na początku każdego nagrania:
- 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
,waitForExpression
lubsetViewport
.Inne właściwości zależą od wartości
type
.Określ wymagane właściwości poniżej elementu
type
.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ń.
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 kluczowemain
odnosi się do bieżącej strony.assertedEvents
, które obecnie mogą być tylko pojedynczym zdarzeniemnavigation
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 |
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 |
Wartość końcowa | |
keyDown keyUp |
key |
Nazwa klucza | |
scroll |
x y |
Bezwzględne położenie na osi x i y przewijania w pikselach, domyślnie 0 | |
navigate |
url |
Docelowy 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: |
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:
Kliknij Ustawienia ponownego odtwarzania, by umożliwić edytowanie pola Limit czasu.
W polu Limit czasu ustaw wartość limitu czasu w milisekundach.
Kliknij
Odtwórz ponownie, aby zobaczyć, jak działa zmieniony domyślny czas oczekiwania.
Aby zastąpić domyślny czas oczekiwania w konkretnym kroku:
Rozwiń krok i kliknij Dodaj limit czasu.
Kliknij
timeout: <value>
i ustaw wartość w milisekundach.Kliknij
Odtwórz ponownie, aby zobaczyć działanie z limitem czasu.
Aby usunąć zastąpienie czasu oczekiwania danego kroku, kliknij obok niego przycisk Usuń.
Omówienie selektorów
Gdy rozpoczynasz nowe nagranie, możesz skonfigurować te ustawienia:
- 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:
CSS. Selektory składowe.
ARIA. Selektory semantyczne.
Tekst. Selektory z najkrótszym unikalnym tekstem, jeśli jest dostępny.
XPath. Selektory, które korzystają z języka ścieżki XML.
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.
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:
Nagraj kliknięcie „Cappuccino”, rozwiń odpowiedni krok w nagraniu i sprawdź wykryte selektory:
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.
Wpisz adres e-mail i sprawdź 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 arkusza CSS z niestandardowym atrybutem CSS.
- selektory XPath.
- Selektor ARIA (jeśli został znaleziony).
- Selektor z najkrótszym unikalnym tekstem (jeśli zostanie znaleziony).
- Jeśli nie określono:
- Selektor ARIA (jeśli został znaleziony).
- selektory arkusza CSS o następującym priorytecie:
- Atrybuty najczęściej używane do testowania:
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
- identyfikator, np.
<div id="some_ID">
. - Zwykłe selektory arkusza CSS.
- Atrybuty najczęściej używane do testowania:
- selektory XPath.
- Selektory pierce.
- 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.