W tej obszernej dokumentacji Dyktafonu Narzędzi deweloperskich w Chrome dowiesz się, jak udostępniać przepływy użytkowników, edytować je oraz wykonywać te czynności.
Aby poznać podstawy korzystania z panelu Dyktafon, przeczytaj artykuł Nagrywanie, odtwarzanie i pomiar działań użytkowników.
Poznawanie i dostosowywanie skrótów
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 Pokaż skróty.
Aby dostosować skróty w Dyktafonie:
- Otwórz Ustawienia > Skróty.
- Przewiń w dół do sekcji Dyktafon.
- Wykonaj czynności opisane w artykule Dostosowywanie skrótów.
Edytuj przepływy użytkowników
U góry panelu Dyktafon dostępne są następujące opcje:
- Dodawanie nowego nagrania Kliknij ikonę +, aby dodać nowe nagranie.
- Wyświetl wszystkie nagrania. W menu pojawi się lista zapisanych nagrań. Aby rozwinąć listę zapisanych nagrań i nią zarządzać, wybierz opcję [liczba] nagrań.
Eksportowanie nagrania Aby bardziej dostosować skrypt lub udostępnić go na potrzeby raportowania błędów, możesz wyeksportować wzorzec przeglądania w jednym z tych formatów:
- Plik JSON.
- @luppeteer/replay.
- [Puppeteer](/docs/puppeteer/ skrypt).
- Puppeteer (w tym analiza Lighthouse).
Więcej informacji o formatach znajdziesz w artykule Eksportowanie schematu użytkownika.
Zaimportuj nagranie. Tylko w formacie JSON.
Usuwanie nagrania. Usuń wybrane nagranie.
Możesz też zmienić nazwę nagrania, klikając obok niego przycisk edycji .
Udostępnianie schematów użytkowników
W Dyktafonie możesz eksportować i importować przepływy użytkowników. Jest to przydatne przy zgłaszaniu błędów, ponieważ możesz udostępnić dokładny rejestr kroków, które doprowadziły do wystąpienia błędu. Możesz go też wyeksportować i ponownie odtworzyć, używając bibliotek zewnętrznych.
Eksportowanie przepływu użytkowników
Aby wyeksportować wzorzec przeglądania:
- Otwórz wzorzec przeglądania, 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. Pobierz nagranie jako skrypt Puppeteer Replay.
- Puppeteer. pobrać nagranie jako skrypt Puppeteer,
- Puppeteer (w tym analiza Lighthouse). pobrać nagranie jako skrypt Puppeteer z umieszczoną analizą Lighthouse;
- Co najmniej jedna opcja dostępna w rozszerzeniach eksportowania Dyktafonu.
- Zapisz plik.
W przypadku każdej domyślnej opcji eksportu możesz:
- JSON: Edytuj zrozumiały dla człowieka obiekt JSON i import plik JSON z powrotem do Dyktafonu.
- @puppeteer/replay. Ponownie odtwórz skrypt, korzystając z biblioteki Puppeteer Replay. Podczas eksportowania jako skryptu @puppeteer/replay kroki pozostają obiektem JSON. Ta opcja jest idealna, jeśli chcesz przeprowadzić integrację z potokiem CI/CD przy zachowaniu swobody edytowania kroków w formacie JSON, a następnie przekonwertowania i zaimportowania z powrotem do Dyktafonu.
- Skrypt Lalkarza. Odtwórz scenariusz w aplikacji Puppeteer. Ponieważ kroki są konwertowane na kod JavaScript, możesz je bardziej szczegółowo dostosować, np. zapętlić. Pamiętaj, że nie możesz 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
Eksportowanie w formacie niestandardowym przez zainstalowanie rozszerzenia
Zobacz Rozszerzenia Dyktafonu.
Importowanie przepływu użytkowników
Aby zaimportować wzorzec przeglądania:
- Kliknij przycisk Importuj u góry panelu Dyktafon.
- Wybierz plik JSON z zarejestrowanym przepływem użytkownika.
- Kliknij przycisk Odtwórz ponownie, aby uruchomić zaimportowany proces użytkownika.
Odtwarzaj ponownie z bibliotekami zewnętrznymi
Puppeteer Replay to biblioteka open source obsługiwana przez zespół Narzędzi deweloperskich w Chrome. Działa na platformie Puppeteer. Jest to narzędzie wiersza poleceń, za pomocą którego możesz ponownie odtwarzać pliki JSON.
Poza tym możesz przekształcać i ponownie odtwarzać pliki JSON za pomocą poniższych bibliotek zewnętrznych.
Przekształć przepływy użytkowników JSON na skrypty niestandardowe:
- Cypress Dyktafon Chrome. Pozwala on przekonwertować pliki JSON przepływu użytkowników na skrypty testowe Cypress. Obejrzyj tę prezentację, by zobaczyć, jak to działa.
- Dyktafon nocny Chrome. Pozwala on przekonwertować pliki JSON przepływu użytkowników na skrypty testowe Nightwatch.
- Rejestrator Chrome CodeceptJS. Umożliwia on konwertowanie plików JSON przepływu użytkowników na skrypty testowe CodeceptJS.
Odtwórz ponownie przepływy użytkowników JSON:
- Odtwórz ponownie w Testcafe. Za pomocą TestCafe możesz ponownie odtwarzać pliki JSON przepływów użytkowników i generować raporty testowe dla tych nagrań.
- Odtwórz ponownie w Sauce Labs. Pliki JSON możesz odtworzyć w Sauce Labs za pomocą saucectl.
Debugowanie przepływu użytkowników
Jak w przypadku każdego kodu, czasami trzeba debugować zarejestrowane przepływy użytkowników.
Aby ułatwić debugowanie, panel Dyktafon pozwala spowolnić ponowne odtwarzanie, ustawić punkty przerwania, zapoznać się z wykonaniem i sprawdzić kod w różnych formatach równolegle z krokami.
Zwolnij odtwarzanie
Domyślnie Dyktafon odtwarza wzorzec przeglądania tak szybko, jak to możliwe. Aby dowiedzieć się, co dzieje się na nagraniu, zwolnij 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 kroki i ich kod obok siebie.
- Gdy najedziesz kursorem na dany krok, Dyktafon wyróżnia odpowiedni kod w dowolnym formacie, w tym udostępnianym przez rozszerzenia.
Rozwiń listę formatów, aby wybrać format, którego używasz do eksportowania przepływów użytkowników.
Może to być jeden z 3 domyślnych formatów (JSON, @puppeteer/replay, skrypt Puppeteer lub format dostarczony przez rozszerzenie).
Przejdź do debugowania nagrania, edytując parametry kroków i wartości. Widok kodu nie jest edytowalny, ale jest aktualizowany w miarę wprowadzania zmian w krokach po lewej stronie.
Ustawianie punktów przerwania i wykonywanie ich 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. Wykonanie jest wstrzymywane w punkcie przerwania.
- Aby przejść przez proces wykonywania, kliknij przycisk Wykonaj jeden krok na pasku działań u góry panelu Dyktafon.
- Aby zatrzymać odtwarzanie, kliknij Anuluj ponowne odtwarzanie.
Edytuj kroki
Możesz edytować dowolny krok nagrania, klikając obok niego przycisk – 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ż powoduje to zanieczyszczenie nagrania i nie wszystkie takie zdarzenia są przydatne. Jednak elementy interfejsu, takie jak menu, mogą pojawiać się tylko w hover
. Możesz ręcznie dodać hover
kroków do przepływów użytkowników, 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 działanie z menu i zakończ nagrywanie. Dyktafon rejestruje tylko zdarzenie kliknięcia.
- Spróbuj jeszcze raz odtworzyć nagranie, klikając Odtwórz ponownie. Ponowne odtwarzanie kończy się niepowodzeniem, ponieważ Dyktafon nie może uzyskać dostępu do elementu w menu.
- Kliknij przycisk z 3 kropkami obok kroku Kliknięcie i wybierz Dodaj krok wcześniej.
- Rozwiń nowy krok. Domyślnie jest to
waitForElement
. Kliknij wartość oboktype
i wybierzhover
. - Następnie ustaw odpowiedni selektor nowego kroku. Kliknij Wybierz, a następnie kliknij obszar elementu
Hover over me!
znajdujący się poza menu. Selektor jest ustawiony na wartość#clickable
. - Spróbuj jeszcze raz odtworzyć nagranie. Po dodaniu wskaźnika najechania kursorem Dyktafon ponownie odtworzy całą ścieżkę.
Dodaj asercje
Podczas nagrywania możesz na przykład zgłosić prawa do atrybutów HTML i JavaScriptu. Aby dodać asercję:
- Rozpocznij nagrywanie na przykład na tej stronie demonstracyjnej.
Kliknij Add assertion (Dodaj potwierdzenie).
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ę atrybutu oraz jego wartość, których 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 kroków. Na przykład:
visible: true
.
- Atrybut HTML. Kliknij Dodaj atrybuty i wpisz nazwę atrybutu oraz jego wartość, których używają elementy na tej stronie. Na przykład:
Nagraj dalszą część ścieżki użytkownika, a następnie zatrzymaj nagrywanie.
Kliknij Odtwórz ponownie. Jeśli asercja nie powiedzie się, po przekroczeniu limitu czasu Dyktafon wyświetli błąd.
Obejrzyj film poniżej, aby zobaczyć, jak wygląda ten proces w praktyce.
Kopiuj kroki
Zamiast eksportować cały proces przeglądania, możesz skopiować do schowka tylko jeden krok:
- Kliknij prawym przyciskiem myszy etap, który chcesz skopiować, lub kliknij ikonę z 3 kropkami obok niego.
- W menu wybierz jedną z opcji Kopiuj jako ....
Możesz kopiować kroki w różnych formatach: JSON, Puppeteer, @puppeteer/replay oraz w postaci rozszerzeń.
Usuń kroki
Aby usunąć przypadkowo zarejestrowany krok, kliknij go prawym przyciskiem myszy lub kliknij ikonę z 3 kropkami obok niego i wybierz Usuń krok.
Dodatkowo Dyktafon automatycznie dodaje 2 osobne kroki na początku każdego nagrania:
- Ustaw widoczny obszar. Pozwala kontrolować wymiary, skalowanie i inne właściwości widocznego obszaru.
- Wyznacz trasę. Ustawia adres URL i automatycznie odświeża stronę przy każdym ponownym odtworzeniu.
Aby przeprowadzić automatyzację na stronie bez jej ponownego ładowania, usuń krok nawigacji w sposób opisany powyżej.
Konfigurowanie kroków
Aby skonfigurować krok:
Określ jego typ:
click
,doubleClick
,hover
, (wejściowe)change
,keyUp
,keyDown
,scroll
,close
,navigate
(na stronę),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 związane z określonym typem.
Listę dostępnych właściwości znajdziesz w sekcji Właściwości kroku.
Aby usunąć opcjonalną właściwość, kliknij znajdujący się obok niej przycisk Usuń.
Aby dodać element do właściwości tablicy lub z niej usunąć, kliknij obok niego przyciski + 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 DevTools (CDP). domyślne słowo kluczowemain
odnosi się do bieżącej strony.assertedEvents
, które obecnie mogą być tylko 1 wydarzeniemnavigation
Inne typowe właściwości dostępne w przypadku większości typów kroków to:
frame
– tablica indeksów liczonych od zera identyfikujących element iframe, który może być zagnieżdżony. Możesz np. wskazać, że pierwszy (0) element iframe w drugim (1) elemencie iframe głównego elementu docelowego może mieć postać[1, 0]
.timeout
– liczba milisekund oczekiwania przed wykonaniem kroku. Więcej informacji znajdziesz w artykule Dostosowywanie limitu czasu kroków.selectors
– tablica selektorów. Więcej informacji znajdziesz w artykule z omówieniem selektorów.
Właściwości specyficzne dla typu:
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 | pomocniczy | drugi | wstecz | dalej | |
change |
value |
Wartość końcowa | |
keyDown keyUp |
key |
Nazwa klucza | |
scroll |
x y |
Pozycje x i y przewijania bezwzględnego w pikselach, domyślnie 0 | |
navigate |
url |
Docelowy URL | |
waitForElement |
operator |
>= | == (domyślny) | <= | |
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 zawiera 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, które przyjmuje wartość „prawda” | |
setViewport |
width height |
Szerokość i wysokość widocznego obszaru w pikselach | |
setViewport |
deviceScaleFactor |
Podobne do urządzenia Pixel Ratio (DPR), domyślny 1 | |
setViewport |
isMobile hasTouch isLandscape |
Flagi wartości logicznej, które określają, czy: |
Wstrzymanie odtwarzania ma dwie właściwości:
Właściwość
waitForElement
czeka na obecność (lub brak) elementów określonych przez selektor. Przykład: w ramach tego kroku na stronie pojawią się mniej niż 3 elementy pasujące do selektora.my-class
."type": "waitForElement", "selectors": [".my-class"], "operator": "<=", "count": 2,
Właściwość
waitForExpression
czeka, aż wyrażenie JavaScript zmieni wartość na „prawda”. Na przykład kolejny krok zostanie wstrzymany na 2 sekundy, a następnie zmieni się na „prawda” i będzie można kontynuować ponowne odtwarzanie."type": "waitForExpression", "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
Dostosowywanie czasu oczekiwania kroków
Jeśli strona ma wolne żądania sieciowe lub długie animacje, jej ponowne odtworzenie może się nie powieść w przypadku kroków, które przekraczają domyślny limit czasu wynoszący 5000
ms.
Aby uniknąć tego problemu, możesz ustawić domyślny limit czasu dla każdego kroku lub ustawić oddzielne limity czasu dla poszczególnych kroków. Czasy oczekiwania konkretnych kroków zastępują wartość domyślną.
Aby zmienić domyślny limit czasu dla każdego kroku naraz:
Aby umożliwić edytowanie pola Limit czasu, kliknij Ustawienia ponownego odtwarzania.
W polu Limit czasu ustaw wartość limitu czasu w milisekundach.
Kliknij Odtwórz ponownie, aby zobaczyć zmieniony domyślny limit czasu.
Aby zastąpić domyślny limit czasu konkretnego kroku:
Rozwiń krok i kliknij Dodaj limit czasu.
Kliknij
timeout: <value>
i ustaw wartość w milisekundach.Kliknij Odtwórz ponownie, aby zobaczyć krok po upływie limitu czasu oczekiwania.
Aby usunąć zastąpienie limitu czasu oczekiwania danego kroku, kliknij znajdujący się obok niego przycisk Usuń.
Selektory
Po rozpoczęciu nowego nagrania możesz skonfigurować te ustawienia:
- W polu tekstowym Atrybut selektora wpisz atrybut testu niestandardowego. 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 nagrywania wybierz typy selektorów, które mają być wykrywane automatycznie:
- CSS. Selektory składniowe.
- ARIA. Selektory semantyczne.
- Tekst. Selektory z najkrótszym niepowtarzalnym tekstem, jeśli jest dostępny.
- XPath. Selektory używające XML Path Language.
- Pierce. Selektory podobne do tych CSS, ale mogą przebijać DOM.
Typowe selektory testów
W przypadku prostych stron internetowych atrybuty id
i CSS class
wystarczają do wykrycia selektorów przez Dyktafon. 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 platformie.
Na przykład wartości class
CSS mogą być generowane automatycznie w przypadku aplikacji utworzonych za pomocą nowoczesnych platform JavaScript (np. React, Angular, Vue) i platform CSS.
W takich przypadkach możesz użyć atrybutów data-*
, aby utworzyć bardziej odporne testy. Deweloperzy korzystają już z najczęściej używanych selektorów data-*
na potrzeby automatyzacji. Dyktafon je też obsługuje.
Jeśli w swojej witrynie masz zdefiniowane te typowe selektory testów, Dyktafon automatycznie je wykryje i zastosuje najpierw:
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
Sprawdź np. element „Cappuccino” na tej stronie demonstracyjnej i sprawdź atrybuty testowe:
Nagraj kliknięcie „Cappuccino”, rozwiń odpowiedni krok w nagraniu i sprawdź wykryte selektory:
Dostosuj selektor nagrania
Jeśli często używane selektory testów Ci nie odpowiadają, możesz dostosować selektor nagrania.
Na przykład ta strona demonstracyjna używa atrybutu data-automate
jako selektora. Rozpocznij nowe nagranie i jako atrybut selektora wpisz data-automate
.
Wpisz adres e-mail i sprawdź wartość selektora ([data-automate=email-address]
).
Priorytet selektora
Dyktafon szuka selektorów w takiej kolejności w zależności od tego, czy został określony atrybut niestandardowego selektora CSS:
- Jeśli podasz te wartości:
- Selektor arkusza CSS z niestandardowym atrybutem CSS.
- Selektory XPath.
- Znaleziono selektor ARIA.
- Selektor z najkrótszym znalezionym tekstem.
- Jeśli go nie podasz:
- Znaleziono selektor ARIA.
- Selektory CSS o takim priorytecie:
- Najczęstsze atrybuty używane do testowania:
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
- atrybuty identyfikatora, np.
<div id="some_ID">
; - Zwykłe selektory CSS.
- Najczęstsze atrybuty używane do testowania:
- Selektory XPath.
- Selektory przekłuwania.
- Selektor z najkrótszym znalezionym tekstem.
Może istnieć wiele zwykłych selektorów CSS, XPath i Pierce. Dyktafon rejestruje:
- Zwykłe selektory CSS i XPath na każdym poziomie głównym, tzn. na zagnieżdżonych hostach-cień (jeśli występują).
- Selektory przekłuwania są unikalne wśród wszystkich elementów w obrębie wszystkich pierwiastków-cienia.