Informacje o funkcjach

Sofia Emelianova

Jecelyn Yeen

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.

Podstawowe informacje o pracy z panelem Dyktafon znajdziesz w artykule Rejestrowanie, odtwarzanie i mierzenie ścieżek 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ć podpowiedź z listą wszystkich skrótów w Nagrywarce, w prawym górnym rogu kliknij pomoc Pokaż skróty.

Aby dostosować skróty Dyktafonu:

1. Kliknij Ustawienia > Skróty.
2. Przewiń w dół do sekcji Nagrywarka.
3. Wykonaj czynności opisane w artykule Dostosowywanie skrótów.

Edytowanie schematów działań użytkowników

U góry panelu Nagrywarka dostępne są następujące opcje:

1. Dodaj nowe nagranie. Aby dodać nowe nagranie, kliknij ikonę +.
2. Wyświetl wszystkie nagrania. W menu pojawi się lista zapisanych nagrań. Kliknij N nagrania, aby rozwinąć listę zapisanych nagrań i ją zarządzać.

3. Eksportowanie nagrania. Aby dalej dostosowywać skrypt lub udostępniać go w celu zgłaszania błędów, możesz wyeksportować przepływ danych w jednym z tych formatów:

   • Plik JSON.
   • Skrypt @puppeteer/replay.
   • Skrypt Puppeteer.
   • Skrypt Puppeteer (dla Firefoxa).
   • Puppeteer (w tym analiza Lighthouse).

   Więcej informacji o formatach znajdziesz w artykule Eksportowanie ścieżki użytkownika.

4. Importowanie nagrania. Tylko w formacie JSON.

5. Usuwanie nagrania. Usuń wybrane nagranie.

Możesz też edytować nazwę nagrania, klikając obok niej przycisk edycji .

Udostępnianie wzorcó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 odtworzenia. Możesz też go eksportować i odtwarzać za pomocą zewnętrznych bibliotek.

Eksportowanie wzoru przeglądania

Aby wyeksportować ścieżkę użytkownika:

1. Otwórz ścieżkę użytkownika, którą chcesz wyeksportować.

2. U góry panelu Nagrywarka kliknij pobierz Eksportuj.

   

3. W menu wybierz jeden z tych formatów:

   • plik JSON, Pobierz nagranie jako plik JSON.
   • @puppeteer/replay. Pobierz nagranie jako skrypt Puppeteer Replay.
   • Puppeteer. Pobierz nagranie jako skrypt Puppeteer.
   • Puppeteer (w Firefoksie). Pobierz nagranie jako skrypt Puppeteer for Firefox.
   • Puppeteer (w tym analiza Lighthouse). Pobierz nagranie jako skrypt Puppeteer z wbudowaną analizą Lighthouse.
   • Co najmniej 1 opcja udostępniona przez rozszerzenia eksportu w nagrywarce.

4. Zapisz plik.

W przypadku każdej domyślnej opcji eksportu możesz wykonać te czynności:

• JSON. Zmień obiekt JSON w postaci zrozumiałej dla człowieka i import plik JSON z powrotem do nagrywarki.
• @puppeteer/replay. Odtwórz skrypt za pomocą biblioteki Puppeteer Replay. Podczas eksportowania jako skryptu @puppeteer/replay kroki pozostają obiektem JSON. Ta opcja jest idealna, jeśli chcesz zintegrować się z rurociągiem CI/CD, ale nadal masz możliwość edytowania kroków w formacie JSON, a następnie ich konwertowania i importowania z powrotem do nagrywarki.
• 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. Nie można jednak zaimportować tego skryptu z powrotem do nagrywarki.
• Puppeteer (w Firefoksie). Dzięki obsłudze WebDriver BiDi możesz uruchomić ten skrypt Puppeteer w Chrome i Firefox.

• Puppeteer (w tym analiza Lighthouse). Ta opcja eksportu jest taka sama jak poprzednia, ale zawiera kod, który generuje 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 wzoru przeglądania

Aby zaimportować ścieżkę użytkownika:

1. U góry panelu Nagrywarka kliknij przycisk Importuj.
2. Wybierz plik JSON z nagranim ścieżki użytkownika.
3. Kliknij przycisk Odtwórz, aby uruchomić zaimportowany proces użytkownika.

Odtwarzanie z bibliotekami zewnętrznymi

Puppeteer Replay to biblioteka open source obsługiwana przez zespół Narzędzi deweloperskich w Chrome. Jest ona zbudowana na podstawie Puppeteer. To narzędzie wiersza poleceń, za pomocą którego możesz odtwarzać pliki JSON.

Poza tym możesz 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 Recorder. Możesz go używać do konwertowania plików JSON z przepływem użytkownika na skrypty testowe Cypress. Aby zobaczyć, jak to działa, obejrzyj ten film.
• Nightwatch Chrome Recorder. Możesz go używać do konwertowania plików JSON z przepływem użytkownika na skrypty testowe Nightwatch.
• CodeceptJS Chrome Recorder. Możesz go używać do konwertowania plików JSON z przepływem użytkownika na skrypty testowe CodeceptJS.

Odtwarzanie wzorców zachowań użytkowników w pliku JSON:

• Odtwórz test za pomocą Testcafe. Za pomocą TestCafe możesz odtwarzać pliki JSON z danymi o ścieżce użytkownika i generować raporty testowe dotyczące tych nagrań.
• Powtórne odtwarzanie z Sauce Labs. Pliki JSON możesz odtwarzać w Sauce Labs za pomocą saucectl.

Ważny punkt: Zaawansowany przypadek użycia: integracja z biblioteką Puppeteer Replay Podobnie jak w przypadku bibliotek innych firm, możesz też utworzyć własną bibliotekę na podstawie Puppeteer Replay. Biblioteka Puppeteer Replay umożliwia dostosowywanie sposobu uruchamiania nagrania i „zapisywanie w postaci ciągu” plików JSON przepływu użytkownika, czyli ich konwertowanie na inne dane.

Debugowanie wzorców korzystania

Podobnie jak w przypadku każdego kodu, czasami trzeba debugować zarejestrowane ścieżki użytkownika.

Aby ułatwić debugowanie, w panelu Nagrywarka możesz zwolnić odtwarzanie, ustawić punkty przerwy, przejrzeć kod w różnych formatach równolegle z krokowymi instrukcjami.

Zwolnij odtwarzanie

Domyślnie nagrywarka odtwarza ścieżkę użytkownika tak szybko, jak to możliwe. Aby lepiej zrozumieć, co dzieje się na nagraniu, możesz spowolnić prędkość odtwarzania:

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

Ważne: tych opcji powtarzania w zwolnionym tempie możesz używać tylko w Dyktafonie. Aby dodać limity czasu do samego nagrania, przeczytaj artykuł Dostosowywanie limitów czasu kroków.

Sprawdzanie kodu

Aby sprawdzić kod ścieżki użytkownika w różnych formatach:

1. Otwórz nagranie w panelu Dyktafon.
2. W prawym górnym rogu listy kroków kliknij Pokaż kod.
3. Nagrywarka wyświetla kroki i ich kod obok siebie.
4. Gdy najedziesz kursorem na krok, nagrywarka wyróżni odpowiedni kod w dowolnym formacie, w tym w formacie rozszerzeń.

5. Rozwiń listę formatów, aby wybrać format, którego używasz do eksportowania ścieżek użytkownika.

   

   Może to być jeden z 3 domyślnych formatów (JSON, @puppeteer/replay, skrypt Puppeteer) lub format udostępniony przez rozszerzenie.

6. Przejdź do debugowania nagrania, edytując parametry i wartości kroków. Widok kodu nie jest edytowalny, ale aktualizuje się odpowiednio do zmian wprowadzanych w krokach po lewej stronie.

Ustawianie punktów przerwania i wykonywanie kroków

Aby ustawić punkt przerwania i wykonać kod krok po kroku:

1. Najedź kursorem na kółko  obok dowolnego kroku w nagraniu. Okrąg zmienia się w ikonę punktu kontrolnego .
2. Kliknij ikonę punktu przerwania  i odtwórz nagranie. Wykonywanie zostaje wstrzymane w punkcie przerwania.
3. Aby wykonać instrukcje krok po kroku, kliknij przycisk  Wykonaj jeden krok na pasku czynności u góry panelu Rejestrator.
4. Aby zatrzymać odtwarzanie, kliknij Anuluj odtwarzanie.

Edytowanie kroków

Możesz edytować dowolny krok w nagraniu, klikając obok niego przycisk , zarówno podczas nagrywania, jak i po jego zakończeniu.

Możesz też dodać brakujące kroki i usunąć te, które zostały nagrane przez przypadek.

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 dodawać hover do przejść użytkowników, które zależą od takich elementów.

Aby ręcznie dodać krok:

1. Otwórz tę stronę demonstracyjną i rozpocznij nowe nagrywanie.
2. Najedź kursorem na element w widocznym obszarze. Pojawi się menu czynności.
3. Wybierz czynność z menu i zakończ nagrywanie. Rejestrator rejestruje tylko zdarzenie kliknięcia.
4. Spróbuj odtworzyć nagranie, klikając Odtwórz. Odtwarzanie kończy się niepowodzeniem po upływie limitu czasu, ponieważ nagrywarka nie może uzyskać dostępu do elementu w menu.
5. Kliknij przycisk z 3 kropkami obok kroku Kliknij i wybierz Dodaj krok przed.
6. Rozwiń nowy krok. Domyślnie ma typ waitForElement. Kliknij wartość obok type i wybierz hover.
7. 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.
8. Spróbuj odtworzyć nagranie jeszcze raz. Po dodaniu kroku najechania kursorem Rejestrator odtwarza przepływ.

Dodawanie asercji

Podczas nagrywania możesz sprawdzać na przykład atrybuty HTML i właściwości JavaScript. Aby dodać asercję:

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

2. Kliknij Dodaj twierdzenie.

   

   Nagrywarka tworzy konfigurowalny krok waitForElement.

3. W tym kroku określ selektory.

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

5. Kontynuuj nagrywanie pozostałej części procesu użytkownika, a potem go zatrzymaj.

6. Kliknij Powtórz. Jeśli asercja się nie powiedzie, nagrywarka wyświetli błąd po wygaśnięciu limitu czasu.

Aby zobaczyć, jak to działa, obejrzyj ten film.

Kopiowanie kroków

Zamiast eksportować cały przepływ użytkownika, możesz skopiować pojedynczy krok do schowka:

1. Kliknij prawym przyciskiem myszy krok, który chcesz skopiować, lub kliknij ikonę z 3 kropkami obok niego.
2. W menu kliknij jedną z opcji Kopiuj jako….

Możesz kopiować kroki w różnych formatach: JSON, Puppeteer, @puppeteer/replay oraz te udostępniane przez rozszerzenia.

Usuwanie kroków

Aby usunąć przypadkowo nagrany krok, kliknij go prawym przyciskiem myszy lub kliknij ikonę z 3 kropkami obok tego kroku 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 widocznego obszaru, skalowania i innych właściwości.
• Nawigacja. Ustawia adres URL i automatycznie odświeża stronę przy każdym odtwarzaniu.

Aby wykonać automatyzację na stronie bez ponownego ładowania strony, usuń krok nawigacji w sposób opisany powyżej.

Kroki konfiguracji

Aby skonfigurować krok:

1. Określ jego typ: click, doubleClick, hover, (input) change, keyUp, keyDown, scroll, close, navigate (do strony), waitForElement, waitForExpression lub setViewport.

   Inne właściwości zależą od wartości type.

2. Poniżej elementu type określ wymagane właściwości.

   

3. Aby dodać opcjonalne właściwości związane z typem i je zdefiniować, kliknij odpowiednie przyciski.

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ć element do właściwości tablicy lub go z niej usunąć, kliknij obok niego przyciski + lub -.

Właściwości kroku

Każdy krok może mieć te opcjonalne właściwości:

• target – URL docelowy w protokole narzędzi deweloperskich w Chrome (CDP). Domyślne słowo kluczowe main odnosi się do bieżącej strony.
• assertedEvents, które może być tylko pojedynczym zdarzeniem navigation.

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. Możesz na przykład zidentyfikować pierwszy (0) element iframe wewnątrz drugiego (1) elementu iframe głównego celu jako [1, 0].
• timeout – liczba milisekund oczekiwania przed wykonaniem kroku. Więcej informacji znajdziesz w artykule Dostosowywanie limitów czasu 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
click doubleClick	offsetX offsetY		Względem lewego górnego rogu pola treści elementu w pikselach
click doubleClick	button		Przycisk wskaźnika: podstawowy | pomocniczy | drugi | wstecz | do przodu
change	value		Wartość końcowa
keyDown keyUp	key		Nazwa klucza
scroll	x y		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).
waitForElement waitForExpression	asserted events		Obecnie tylko type: navigation, ale możesz podać tytuł i adres URL
waitForElement waitForExpression	timeout		Maksymalny czas oczekiwania w milisekundach
waitForExpression	expression		wyrażenie JavaScriptu, które zwraca wartość logiczną „prawda”;
setViewport	width height		Szerokość i wysokość widocznego obszaru w pikselach
setViewport	deviceScaleFactor		Podobnie jak współczynnik pikseli urządzenia (DPR), domyślnie 1
setViewport	isMobile hasTouch isLandscape		Flagi wartości logicznej, które określają, czy: Uwzględnij metatag Obsługa zdarzeń dotyku Wyświetlanie w poziomie

Istnieją 2 właściwości, które powodują wstrzymanie odtwarzania:

• Właściwość waitForElement powoduje, że krok czeka na obecność (lub brak) określonej liczby 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ść waitForExpression powoduje, że krok czeka, aż wyrażenie JavaScript zwróci wartość prawda. Na przykład ten krok powoduje wstrzymanie na 2 sekundy, a potem zwraca wartość true, co pozwala na kontynuowanie odtwarzania.

    "type": "waitForExpression",
    "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
  

Dostosowywanie limitów czasu kroków

Jeśli Twoja strona ma wolne żą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. Limity czasu dla poszczególnych kroków zastępują domyślne.

Aby dostosować domyślny limit czasu dla każdego kroku jednocześnie:

1. Kliknij Ustawienia powtarzania, aby umożliwić edycję pola Limit czasu.

   

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

3. Aby zobaczyć działanie domyślnego limitu czasu po jego dostosowaniu, kliknij Powtórz.

Aby zastąpić domyślny limit czasu w konkretnym kroku:

1. Rozwiń krok i kliknij Dodaj limit czasu.

   

2. Kliknij timeout: <value> i ustaw wartość w milisekundach.

   

3. Kliknij Powtórz, aby zobaczyć działanie kroku z czasem oczekiwania.

Aby usunąć zastąpienie limitu czasu w kroku, kliknij obok niego przycisk Usuń.

Selektory

Podczas uruchamiania nowego nagrywania możesz skonfigurować te opcje:

• 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 na potrzeby nagrywania wybierz typy selektorów do automatycznego wykrywania:

  • CSS. selektory składniowe.
  • 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;
  • Pierce. Selektory podobne do selektorów CSS, ale mogą przeniknąć przez shadow DOM.

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

Selektory testów wspólnych

W przypadku prostych stron internetowych wystarczające są atrybuty id i class, aby nagrywarka mogła wykryć selektory. 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 ramach.

Wartości CSS class mogą być na przykład generowane automatycznie w przypadku aplikacji opracowanych za pomocą nowoczesnych frameworków JavaScript (np. React, Angular, Vue) i frameworków CSS.

W takich przypadkach możesz użyć atrybutów data-*, aby tworzyć bardziej odporne testy. Deweloperzy używają już niektórych typowych 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-testid
• data-test
• data-qa
• data-cy
• data-test-id
• data-qa-id
• data-testing

Na przykład sprawdź element „Cappuccino” na tej stronie demonstracyjnej i zobacz 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

Nagrywarka wyszukuje selektory w takim porządku, w zależności od tego, czy podano atrybut niestandardowy selektor arkusza CSS:

• Jeśli jest to określone:
  1. selektor CSS z niestandardowym atrybutem CSS.
  2. selektory XPath.
  3. selektor ARIA, jeśli został znaleziony;
  4. Selektor z najkrótszym unikalnym tekstem, jeśli został znaleziony.
• Jeśli nie określono:
  1. selektor ARIA, jeśli został znaleziony;
  2. Selektory arkusza CSS o tym priorytecie:
     1. Najczęściej używane atrybuty 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. Selektory arkusza CSS.
  3. selektory XPath.
  4. Selektory przebijania.
  5. Selektor z najkrótszym unikalnym tekstem, jeśli został 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ą).
• Selektywne elementy, które są niepowtarzalne wśród wszystkich elementów w obrębie wszystkich źródeł cieni.