Ćwiczenie: używanie dramaturgu w programie Visual Studio Code
W poprzedniej sekcji omówiliśmy podstawowe pojęcia związane z konfiguracją testów Playwright i specyfikacją testową Playwright, ale użyliśmy Playwright Command Line Interface (CLI) do wykonywania testów i przeglądania raportów.
Co zrobić, jeśli możemy to zrobić w naszym środowisku programu Visual Studio Code i mieć bardziej wizualny proces interakcji na potrzeby tworzenia, uruchamiania i debugowania testów?
Dzięki rozszerzeniu Playwright Test for Visual Studio Code możesz uzyskać doskonałe środowisko deweloperskie i kilka unikatowych funkcji narzędziowych, które mogą sprawić, że będzie to Twój preferowany sposób interakcji z uruchamiaczem testów Playwright. Przejdźmy do trasy koncertowej.
Wprowadzenie
Dokumentacja dramaturgu zawiera kompleksowy samouczek z przewodnikiem wideo, który zalecamy obejrzeć we własnym czasie. W tej lekcji spróbujemy zapoznać się z podzbiorem tych ćwiczeń, aby zapoznać się z użyciem.
]
Instalowanie rozszerzenia Playwright
Zainstaluj rozszerzenie z witryny Visual Studio Code Marketplace. Po zainstalowaniu, jak pokazano na zrzucie ekranu, powinna się pojawić ikona zlewki w lewym rogu okna programu Visual Studio Code. Zwróć uwagę, jak rozszerzenie automatycznie wykrywa i zbiera specyfikacje testowe w projekcie.
Uruchamianie testu (bezgłówkowego)
Aby uruchamiać testy w sposób bezgłowy (bez okna przeglądarki), upewnij się, że opcje Pokaż przeglądarkę i Pokaż podgląd śledzenia są niezaznaczone. Wybierz zielony przycisk odtwarzania w wierszu 3 pliku example.spec.ts , aby uruchomić pierwszy test. Możesz również wybrać szare przyciski odtwarzania na pasku bocznym Eksploratora testów, aby uruchomić wszystkie testy w pliku lub uruchomić określony test.
Po uruchomieniu testów zostanie otwarte okno z kartą Wyniki testów, w którym będzie można zobaczyć całą historię wykonań testów. Możesz również przejść do szczegółów testu i wybrać pozycję Uruchom test , aby ponownie uruchomić ten konkretny test.
Pokaż przeglądarkę (na czele)
Jeśli chcesz uruchomić w trybie z widocznym interfejsem, co oznacza, że testy będą uruchamiane z otwartym oknem przeglądarki, możesz zaznaczyć pole Pokaż przeglądarkę przed uruchomieniem testów.
Playwright jest bardzo szybkim użytkownikiem, który może utrudnić śledzenie tego, co dzieje się w teście podczas korzystania z przeglądarki Show. W przypadku debugowania zalecamy użycie opcji Pokaż podgląd śledzenia .
Pokaż podgląd śledzenia (na czele)
Zaznacz pole Pokaż podgląd śledzenia i wybierz zielony przycisk odtwarzania dla drugiego testu. Spowoduje to uruchomienie okna przeglądarki śledzenia, w którym zostanie wyświetlona wizualna reprezentacja wykonania testu.
U góry zobaczysz oś czasu testu, na którym można umieścić wskaźnik myszy, aby zobaczyć stan przeglądarki. Aby wybrać określony zakres czasu, na który chcesz skupić się, wybierz i przeciągnij oś czasu.
Na lewym pasku bocznym można zobaczyć akcje, które zostały wykonane podczas wykonywania testu. Jeśli wybierzesz akcję lokalizator.click, zobaczysz czerwoną kropkę na przycisku Get Started w migawce DOM.
Następnie wybierz asercję expect.toBeVisible i zobaczysz, że nasza migawka DOM została zmieniona, aby wyświetlić stronę Instalacja z wyróżnieniem w nagłówku, który potwierdzamy. Nad migawką DOM można wybrać przyciski Przed i Po , aby wyświetlić stan DOM przed i po wykonaniu akcji.
Można otworzyć zrzut DOM w oddzielnym oknie, wybierając ikonę otwierania w nowym oknie w prawym górnym rogu. Może to być przydatne, jeśli chcesz sprawdzić dom podczas debugowania testu.
Mówiąc o debugowaniu, możesz również wybrać lokalizator z migawki DOM, wybierając przycisk Pick Locator (Wybieranie lokalizatora ) w dolnym panelu. Następnie umieść kursor na elementach na migawce DOM, aby wyświetlić lokalizator dla tego elementu. Wybranie elementu powoduje dodanie go do pola Lokalizator w dolnej części przeglądarki śledzenia, gdzie można go edytować przed skopiowaniem go do schowka.
Możesz samodzielnie eksplorować pozostałe funkcje przeglądarki śledzenia, takie jak karta Wywołanie, Konsola, Sieć i Źródło .
Debugowanie testów
W przypadku debugowania zalecamy uruchomienie testów za pomocą opcji Pokaż podgląd śledzenia i użycie śladu testu, aby lepiej zrozumieć, co się dzieje.
Jednak przy użyciu rozszerzenia programu Visual Studio Code można również debugować testy bezpośrednio w programie Visual Studio Code, wyświetlać komunikaty o błędach, tworzyć punkty przerwania i debugować testy na żywo. Dowiedz się więcej z dokumentacji lub obejrzyj poniższy film wideo, aby zrozumieć obsługę debugowania.
Generowanie testów
Funkcja CodeGen generuje testy podczas wykonywania akcji w przeglądarce, co ułatwia rozpoczęcie tworzenia testów dla złożonych przepływów pracy.
Aby wygenerować test, wybierz przycisk Zarejestruj nowy na pasku bocznym testowania w programie Visual Studio Code. Spowoduje to otwarcie okna przeglądarki, w którym można wykonywać akcje, które zostaną zarejestrowane i przekształcone w test. Zauważysz również, że nowy plik w tests folderze jest tworzony z wygenerowanym testem.
Wpisz adres URL w oknie przeglądarki i rozpocznij wykonywanie akcji, takich jak użytkownik. Zobaczysz akcje rejestrowane w pliku testowym w programie VS Code.
Utwórzmy ponownie prosty test, który uruchomiliśmy wcześniej, przechodząc do witryny internetowej Playwright i wybierając przycisk Rozpocznij . Następnie możemy wybrać ikonę Sprawdź widoczność na pasku narzędzi Codegen i wybrać nagłówek Instalacja, aby sprawdzić, czy jest widoczny.
Dowiedz się więcej na temat generowania testów w poniższym filmie wideo.
Dalsze kroki
W tej sekcji przedstawiono sposób używania rozszerzenia programu Visual Studio Code do znajdowania i uruchamiania testów oraz pracy z przeglądarką śledzenia w celu uzyskania bardziej wizualnego środowiska do debugowania testów.
Przedstawiono również, jak program Visual Studio Code udostępnia bogatsze narzędzia do generowania testów przy użyciu funkcji Rejestruj nowy test, Lokalizator wyboru i Rekord w kursorze. Teraz nadszedł czas, aby zastosować naukę Podstawy dramaturgu w projekcie z przewodnikiem, aby utworzyć kompleksową specyfikację testu dla naszej przykładowej aplikacji.