Informacje o funkcjach

Sofia Emelianova

Jecelyn Yeen

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:

1. Otwórz Ustawienia > Skróty.
2. Przewiń w dół do sekcji Dyktafon.
3. 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:

1. Dodawanie nowego nagrania Kliknij ikonę +, aby dodać nowe nagranie.
2. Wyświetl wszystkie nagrania. W menu pojawi się lista zapisanych nagrań. Aby rozwinąć listę zapisanych nagrań i nią zarządzać, wybierz opcję [liczba] nagrań.

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

4. Zaimportuj nagranie. Tylko w formacie JSON.

5. 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:

1. Otwórz wzorzec przeglądania, który chcesz wyeksportować.
2. Kliknij Eksportuj u góry panelu Dyktafon.
3. 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.
4. 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:

1. Kliknij przycisk Importuj u góry panelu Dyktafon.
2. Wybierz plik JSON z zarejestrowanym przepływem użytkownika.
3. 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.

Ważne: zastosowanie zaawansowane: integracja z biblioteką Puppeteer Replay Podobnie jak w przypadku bibliotek zewnętrznych wymienionych powyżej, możesz stworzyć własną bibliotekę na bazie Puppeteer Replay. Biblioteka Puppeteer Replay umożliwia dostosowanie sposobu uruchamiania nagrania i „ciąganie” plików JSON przepływów użytkowników przez użytkownika, czyli konwertowanie ich na coś innego.

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:

1. Otwórz menu Odtwórz ponownie.
2. Wybierz jedną z opcji szybkości ponownego odtwarzania:
   • Normalnie (domyślnie)
   • Wolno
   • Bardzo wolne
   • Bardzo wolno

Ważne: tych opcji powolnego odtwarzania możesz użyć tylko w Dyktafonie. Aby dodać limity czasu do samego nagrania, zapoznaj się z sekcją Dostosowywanie czasu oczekiwania 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. Dyktafon wyświetla kroki i ich kod obok siebie.
4. Gdy najedziesz kursorem na dany krok, Dyktafon wyróżnia odpowiedni kod w dowolnym formacie, w tym udostępnianym przez rozszerzenia.

5. 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).

6. 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:

1. Najedź kursorem na kółko obok dowolnego kroku w nagraniu. Okrąg zmieni się w ikonę punktu przerwania .
2. Kliknij ikonę punktu przerwania i ponownie odtwórz nagranie. Wykonanie jest wstrzymywane w punkcie przerwania.
3. Aby przejść przez proces wykonywania, kliknij przycisk Wykonaj jeden krok na pasku działań u góry panelu Dyktafon.
4. 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:

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 działanie z menu i zakończ nagrywanie. Dyktafon rejestruje tylko zdarzenie kliknięcia.
4. 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.
5. Kliknij przycisk z 3 kropkami obok kroku Kliknięcie i wybierz Dodaj krok wcześniej.
6. Rozwiń nowy krok. Domyślnie jest to waitForElement. Kliknij wartość obok type i wybierz hover.
7. 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.
8. 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ę:

1. Rozpocznij nagrywanie na przykład na tej stronie demonstracyjnej.

2. Kliknij Add assertion (Dodaj potwierdzenie).

   

   Dyktafon tworzy konfigurowalny krok waitForElement.

3. Określ selektory na potrzeby tego kroku.

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

5. Nagraj dalszą część ścieżki użytkownika, a następnie zatrzymaj nagrywanie.

6. 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:

1. Kliknij prawym przyciskiem myszy etap, 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 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:

1. Określ jego typ: click, doubleClick, hover, (wejściowe) change, keyUp, keyDown, scroll, close, navigate (na stronę), 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 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 kluczowe main odnosi się do bieżącej strony.
• assertedEvents, które obecnie mogą być tylko 1 wydarzeniem navigation

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: Weź pod uwagę metatag Zdarzenia dot. kontaktu z zespołem pomocy Wyświetlaj w orientacji poziomej

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:

1. Aby umożliwić edytowanie pola Limit czasu, kliknij Ustawienia ponownego odtwarzania.

   

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

3. Kliknij Odtwórz ponownie, aby zobaczyć zmieniony domyślny limit czasu.

Aby zastąpić domyślny limit czasu konkretnego 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 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.

Uwaga: więcej informacji znajdziesz w artykułach Selektory syntetyczne a semantyczne i Priorytety selektora.

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:
  1. Selektor arkusza CSS z niestandardowym atrybutem CSS.
  2. Selektory XPath.
  3. Znaleziono selektor ARIA.
  4. Selektor z najkrótszym znalezionym tekstem.
• Jeśli go nie podasz:
  1. Znaleziono selektor ARIA.
  2. Selektory CSS o takim priorytecie:
     1. Najczęstsze atrybuty używane do testowania:
        • data-testid
        • data-test
        • data-qa
        • data-cy
        • data-test-id
        • data-qa-id
        • data-testing
     2. atrybuty identyfikatora, np. <div id="some_ID">;
     3. Zwykłe selektory CSS.
  3. Selektory XPath.
  4. Selektory przekłuwania.
  5. 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.