jak używać Firebug do tworzenia skryptów Selenium-Selenium Tutorial # 4

w poprzednim tutorialu nauczyliśmy się tworzyć automatyczne skrypty testowe za pomocą Selenium IDE i jego funkcji nagrywania. Przejrzeliśmy również populous funkcje Selenium IDE. Naszym celem było zapoznanie czytelnika z najważniejszymi funkcjami i poleceniami Selenium IDE.

przypomnę tylko-to nasz czwarty tutorial z darmowej serii szkoleń Selenium.

teraz, gdy jesteś przyzwyczajony do tworzenia automatycznych skryptów przy użyciu trybu nagrywania Selenium IDE, przejdźmy do przodu z innym narzędziem, które odgrywa bardzo ważną rolę w pomaganiu nam w tworzeniu skutecznych skryptów testowych znanych jako „Firebug”. Firebug pomaga nam w sprawdzaniu właściwości elementów internetowych i stron internetowych.

tak więc, ten poradnik składa się z instalacji Firebug i jego użyteczności.

zwróć uwagę, że treść tego poradnika ma zastosowanie nie tylko w kontekście Selenium IDE; raczej może być stosowany do każdego narzędzia Selenium suite. Dlatego wolałbym używać terminu selen zamiast Selenium IDE.

w tym samouczku dowiedzmy się, jak używać dodatku Firebug do tworzenia skryptów Selenium. W trakcie tego procesu dowiemy się również, jak zainstalować Firebug.

Wprowadzenie do Firebug

Firebug to dodatek do przeglądarki Mozilla Firefox. To narzędzie pomaga nam w identyfikacji lub bardziej szczegółowej kontroli elementów HTML, CSS i JavaScript na stronie internetowej. Pomaga nam to jednoznacznie zidentyfikować elementy na stronie internetowej. Elementy można znaleźć w unikalny sposób w oparciu o ich typy lokalizatorów, które omówimy później w tym samouczku.

Jak zainstalować Firebug?

dla ułatwienia zrozumienia, podzielimy proces instalacji na następujące kroki.

krok -1: Uruchom przeglądarkę Mozilla Firefox i przejdź do tej strony pobierania dodatku Firebug. Adres URL przenosi nas do sekcji dodatków do Firefoksa.

krok -2: kliknij przycisk „Dodaj do Firefoksa” obecny na stronie internetowej. Patrz poniższy rysunek dla tego samego.

Krok-3: Jak tylko klikniemy przycisk „Dodaj do Firefoksa”, pojawi się okno alertu bezpieczeństwa, Kliknij teraz przycisk „Zezwól”.

Krok 4: Teraz Firefox pobiera dodatek w tle i wyświetla pasek postępu.

Krok 5: Po zakończeniu procesu pojawi się okno instalacji oprogramowania. Teraz kliknij przycisk” Zainstaluj teraz”.

Krok 6: Po zakończeniu instalacji pojawi się okienko informujące, że firebug został pomyślnie zainstalowany. TERAZ Wybierz, aby zamknąć to wyskakujące okienko.

Uwaga: W przeciwieństwie do Selenium IDE, nie jesteśmy zobowiązani do ponownego uruchomienia Firefoksa, aby odzwierciedlić instalację firebug, raczej przychodzi łatwo.

Krok 7: teraz, aby uruchomić firebug, możemy wybrać jeden z następujących sposobów:

• naciśnij F12
• kliknij ikonę Firebug obecną w skrajnym prawym górnym rogu okna Firefoksa.
• 
• kliknij na pasku Menu Firefoksa- > Web Developer- > firebug- > Otwórz Firebug.

Krok-8: Teraz firebug można zobaczyć na dole okna Firefoksa.

teraz, gdy pobraliśmy i zainstalowaliśmy firebug, przejdźmy do przodu z typami lokalizatorów, które tworzylibyśmy za pomocą firebug.

tworzenie skryptu Selenium za pomocą Firebug

W Przeciwieństwie Do Selenium IDE, w Firebug, tworzymy automatyczne skrypty testowe ręcznie, dodając wiele kroków testowych, aby utworzyć logiczny i spójny skrypt testowy.

podążajmy za postępowym podejściem i zrozummy proces krok po kroku.

Scenariusz:

• Otwórz ” https://accounts.google.com”.
• podaj nazwę aplikacji
• wprowadź nieprawidłową nazwę użytkownika i nieprawidłowe hasło oraz podaj dane do logowania.

Krok 1 – Uruchom Firefoksa i otwórz Selenium IDE z paska menu.

Krok 2 – Wprowadź adres testowanej aplikacji („https://accounts.google.com”) wewnątrz podstawowego pola tekstowego adresu URL.

Krok 3 – domyślnie przycisk rekord znajduje się w stanie ON. Pamiętaj, aby go wyłączyć, aby wyłączyć tryb nagrywania. Zauważ, że jeśli tryb nagrywania jest włączony, może to skutkować zarejestrowaniem naszych interakcji z przeglądarką internetową.

Krok 4 – Otwórz testowaną aplikację (https://accounts.google.com) w Firefoksie.

Krok 5 – Uruchom Firebug w przeglądarce internetowej.

Krok 6 – Wybierz pusty krok testowy w edytorze.

Krok 7 – wpisz „otwórz” w polu tekstowym polecenia obecnym w okienku Edytora. Polecenie „Otwórz” otwiera podany adres URL w przeglądarce internetowej.

zalecenie: podczas wpisywania poleceń w polu tekstowym polecenia użytkownik może wykorzystać funkcję automatycznego wyboru. Tak więc, gdy tylko użytkownik wpisze sekwencję znaków, dopasowane sugestie zostaną automatycznie wypełnione.

użytkownik może również kliknąć listę rozwijaną dostępną w polu tekstowym polecenia, aby zobaczyć wszystkie polecenia dostarczane przez Selenium IDE.

Krok 8-teraz, ruch w kierunku sekcji Firebug w przeglądarce internetowej, rozwiń sekcję „head”kodu HTML. Zwróć uwagę na znacznik HTML<tytuł>. Tak więc, aby uzyskać tytuł strony, wymagamy wartości znacznika<title>.

skopiuj tytuł strony, który w naszym przypadku brzmi „Zaloguj się – konta Google”.

Krok 9 – wybierz drugi pusty krok testowy w edytorze.

krok 10 – Wpisz „assertTitle” w polu tekstowym polecenia obecnym w okienku Edytora. Polecenie „assertTitle”zwraca bieżący tytuł strony i porównuje go z podanym tytułem.

krok 11 – Wklej tytuł skopiowany w kroku 8 do pola docelowego drugiego.

krok 12 – Teraz wybierz trzeci pusty krok testowy w panelu edytora

krok 13 – wpisz polecenie „type” w polu tekstowym polecenia. Polecenie „type”wprowadza wartość w określonym elemencie sieci Web do interfejsu graficznego.

krok 14 – teraz przełącz się na przeglądarkę internetową, przesuń kursor myszy do pola tekstowego „e-mail” w formularzu logowania i naciśnij prawym przyciskiem myszy.

wybierz opcję „Inspect Element with Firebug”. Zauważ, że Firebug automatycznie podświetla odpowiedni kod HTML dla elementu www, tj. „email Textbox”.

krok 15 – kod HTML na powyższej ilustracji manifestuje odrębne atrybuty właściwości należące do pola tekstowego „Email”. Zauważ, że istnieją cztery właściwości (ID, type, placeholder I name), które jednoznacznie identyfikują element sieci Web na stronie internetowej. Zatem to do użytkownika należy wybór jednej lub więcej właściwości do identyfikacji elementu sieci Web.

Tak więc w tym przypadku wybieramy ID jako lokalizator. Skopiuj wartość ID i wklej ją w polu docelowym trzeciego etapu testu poprzedzonego ” id=”, aby wskazać Selenium IDE, aby zlokalizować element sieci Web o ID jako „Email”.

(Kliknij, aby zobaczyć powiększony obrazek)

zwróć uwagę, że Selenium IDE rozróżnia wielkość liter, dlatego wpisz wartość atrybutu dokładnie i dokładnie tak samo, jak jest wyświetlany w kodzie HTML.

krok 16 – kliknij przycisk Znajdź, aby sprawdzić, czy wybrany lokalizator znajduje i lokalizuje wyznaczony element interfejsu użytkownika na stronie internetowej.

krok 17 – teraz następnym krokiem jest wprowadzenie danych testowych w polu tekstowym wartości trzeciego kroku testowego w panelu edytora. Wpisz „InvalidEmailID”w polu tekstowym wartość. Użytkownik może zmieniać dane testowe, gdy jest to pożądane.

krok 18 – Teraz wybierz czwarty pusty krok testowy w panelu edytora

krok 19 – wpisz polecenie „typ” w polu tekstowym polecenia.

krok 20-teraz przełącz się na przeglądarkę internetową, przesuń kursor myszy do pola tekstowego” hasło ” w formularzu logowania i naciśnij prawym przyciskiem myszy.

wybierz opcję „Inspect Element with Firebug”.

krok 21 – poniższy kod HTML manifestuje odrębne atrybuty właściwości należące do pola tekstowego „hasło”. Zauważ, że istnieją cztery właściwości (ID, type, placeholder I name), które jednoznacznie identyfikują element sieci Web na stronie internetowej. Zatem to do użytkownika należy wybór jednej lub więcej właściwości do identyfikacji elementu sieci Web.

Tak więc w tym przypadku wybieramy ID jako lokalizator. Skopiuj wartość ID i wklej ją w polu docelowym trzeciego kroku testowego poprzedzonego ” id=”.

(Kliknij, aby wyświetlić powiększony obraz)

krok 22 – Kliknij przycisk Znajdź, aby sprawdzić, czy karta lokalizator znajduje i lokalizuje wyznaczony element interfejsu użytkownika na stronie internetowej.

krok 23 – teraz następnym krokiem jest wprowadzenie danych testowych w polu tekstowym wartość czwartego kroku testowego w panelu edytora. Wpisz „InvalidPassword”w polu tekstowym wartość. Użytkownik może zmieniać dane testowe, gdy jest to pożądane.

krok 24 – teraz wybierz piąty pusty krok testowy w panelu edytora

krok 25 – wpisz polecenie „kliknij” w polu tekstowym polecenia. Polecenie „kliknij” klika na określony element strony internetowej.

krok 26-teraz przełącz się na przeglądarkę internetową, przesuń kursor myszy do przycisku” Zaloguj się ” w formularzu logowania i naciśnij prawym przyciskiem myszy.

wybierz opcję „Inspect Element with Firebug”.

krok 27 – poniższy kod HTML manifestuje odrębne atrybuty właściwości należące do przycisku „Zaloguj się”.

Wybierz ID jako lokalizator. Skopiuj wartość ID i wklej ją w polu docelowym trzeciego kroku testowego poprzedzonego ” id=”.

(Kliknij, aby zobaczyć powiększenie)

krok 28 – kliknij przycisk Znajdź, aby sprawdzić, czy wybrany lokalizator znajduje i lokalizuje wyznaczony element interfejsu użytkownika na stronie internetowej.

skrypt testowy został zakończony. Zobacz poniższą ilustrację, aby wyświetlić gotowy skrypt testowy.

krok 29 – Odtwórz utworzony skrypt testowy i zapisz go w taki sam sposób, jak w poprzednim samouczku.

wnioski

w tym samouczku wprowadziliśmy kolejne narzędzie do tworzenia skryptów, a raczej narzędzie, które pomaga w tworzeniu skryptów.

Firebug zaskakująco ma duży potencjał do lokalizowania elementów internetowych na stronie internetowej. W ten sposób użytkownik może wykorzystać możliwości narzędzia w tworzeniu skutecznych i wydajnych skryptów testowych automatyzacji ręcznie.

następny samouczek # 5: idąc do przodu w następnym samouczku, przyjrzymy się różnym typom lokalizatorów w Selenium i ich technice dostępności do tworzenia skryptów testowych. W międzyczasie reader może zacząć budować swoje skrypty testów automatyki za pomocą Firebug.