Lokalizatory w Selenium

Czym są lokalizatory?

Lokalizator to polecenie, które mówi Selenium IDE, które elementy GUI (powiedz Text Box, Guziki, Sprawdź Boxes itd.) musi działać. Identyfikacja prawidłowych elementów GUI jest warunkiem wstępnym do stworzenia skryptu automatyzacji. Jednak dokładna identyfikacja elementów GUI jest trudniejsza niż się wydaje. Czasami kończy się na pracy z nieprawidłowymi elementami GUI lub bez żadnych elementów! Stąd, Selenium udostępnia szereg lokalizatorów umożliwiających precyzyjne zlokalizowanie elementu GUI

Istnieją polecenia, które nie wymagają lokalizatora (np. polecenie „otwórz”). Jednak większość z nich potrzebuje lokalizatorów elementów Selenium sterownik internetowy.

Wybór lokalizatora zależy w dużej mierze od testowanej aplikacji. W tym samouczku będziemy przełączać się między Facebookiem, new tours.demoaut na podstawie lokalizatorów obsługiwanych przez te aplikacje. Podobnie w Twoim Testowanie projektu, w programie wybierzesz dowolny z wyżej wymienionych lokalizatorów elementów Selenium webdriver, w zależności od obsługi aplikacji.

Lokalizowanie według identyfikatora

Jest to najczęstszy sposób lokalizowania elementów, ponieważ identyfikatory powinny być unikalne dla każdego elementu.

Target Format: id=id elementu

W tym przykładzie użyjemy Facebooka jako naszej aplikacji testowej, ponieważ Mercury Wycieczki nie korzystają z atrybutów identyfikacyjnych.

Krok 1) Od czasu powstania tego samouczka Facebook zmienił projekt strony logowania. Skorzystaj z tej strony demonstracyjnej http://demo.guru99.com/test/facebook.html do testowania. Sprawdź pole tekstowe „E-mail lub telefon” za pomocą Firebuga i zanotuj jego ID. W tym przypadku ID to „e-mail”.

Krok 2) Premiera Selenium IDE i wpisz „id=email” w Target pole. Kliknij przycisk Znajdź i zauważ, że pole tekstowe „E-mail lub telefon” zostaje podświetlone na żółto i otoczone zieloną obwódką, co oznacza, Selenium IDE było w stanie poprawnie zlokalizować ten element.

Lokalizowanie według nazwy

Lokalizowanie elementów po nazwie jest bardzo podobne do lokalizowania po ID, z tą różnicą, że używamy metody „imię =” zamiast tego przedrostek.

Target Format: nazwa=nazwa elementu

W poniższej demonstracji będziemy teraz używać Mercury Wycieczki, ponieważ wszystkie istotne elementy mają nazwy.

Krok 1) Nawigować do http://demo.guru99.com/test/newtours/ i użyj Firebuga, aby sprawdzić pole tekstowe „Nazwa użytkownika”. Zwróć uwagę na jego atrybut nazwy.

Widzimy tutaj, że nazwa elementu to „userName”.

Krok 2) In Selenium IDE, wpisz „nazwa=nazwa użytkownika” w pliku Target i kliknij przycisk Znajdź. Selenium IDE powinno być w stanie zlokalizować pole tekstowe Nazwa użytkownika poprzez jego podświetlenie.

Jak zlokalizować element według nazwy za pomocą filtrów

Filtrów można używać, gdy wiele elementów ma tę samą nazwę. Filtry to dodatkowe atrybuty służące do rozróżniania elementów o tej samej nazwie.

Target utworzony: nazwa=nazwa_elementu_elementu filtr=wartość_filtra

Zobaczmy przykład –

Krok 1) Zalogować się Mercury Wycieczki.

Zalogować się Mercury Wycieczki z użyciem „samouczka” jako nazwy użytkownika i hasła. Powinno Cię przenieść do strony Flight Finder pokazanej poniżej.

Krok 2) Używając Firebuga, użyj atrybutów VALUE.

Korzystając z Firebuga, zwróć uwagę, że przyciski opcji Podróż w obie strony i W jedną stronę mają tę samą nazwę „tripType”. Mają jednak różne atrybuty VALUE, więc możemy użyć każdego z nich jako naszego filtra.

Krok 3) Kliknij pierwszą linię.

• Najpierw uzyskamy dostęp do przycisku opcji One Way. Kliknij pierwszą linię w Edytorze.
• W polu poleceń Selenium IDE, wprowadź polecenie „kliknij”.
• W Target wpisz „name=tripType value=oneway”. Część „value=oneway” to nasz filtr.

Krok 4) Kliknij przycisk Znajdź.

Zauważ, że Selenium IDE może podświetlić przycisk opcji One Way na zielono – co oznacza, że ​​możemy uzyskać dostęp do elementu za pomocą jego atrybutu VALUE.

Krok 5) Wybierz przycisk opcji W jedną stronę.

Naciśnij klawisz „X” na klawiaturze, aby wykonać polecenie kliknięcia. Zwróć uwagę, że został wybrany przycisk opcji W jedną stronę.

Możesz zrobić dokładnie to samo, korzystając z przycisku opcji Podróż w obie strony, tym razem używając „nazwa=typ podróży wartość=podróż w obie strony” jako celu.

Lokalizowanie według tekstu łącza

Ten typ lokalizatora CSS w Selenium dotyczy wyłącznie tekstów hiperłączy. Uzyskujemy dostęp do linku, poprzedzając nasz cel „link=”, a następnie umieszczając tekst hiperłącza.

Target utworzony: link=tekst_linku

W tym przykładzie uzyskamy dostęp do linku „ZAREJESTRUJ SIĘ” znajdującego się na stronie Mercury Strona główna wycieczek.

Krok 1)

• Najpierw upewnij się, że jesteś wylogowany Mercury Wycieczki.
• Iść do Mercury Strona główna wycieczek.

Krok 2)

• Korzystając z Firebuga, sprawdź link „ZAREJESTRUJ SIĘ”. Tekst łącza znajduje się pomiędzy znacznikami i.
• W tym przypadku tekst naszego linku to „ZAREJESTRUJ SIĘ”. Skopiuj tekst linku.

Krok 3) Skopiuj tekst linku w Firebug i wklej go Selenium IDE Target box. Dodaj prefiks „link=”.

Krok 4) Kliknij przycisk Znajdź i zwróć na to uwagę Selenium IDE było w stanie poprawnie podświetlić link REJESTRACJA.

Krok 5) Aby to sprawdzić, wpisz „clickAndWait” w polu Polecenie i wykonaj polecenie. Selenium IDE powinno móc pomyślnie kliknąć link ZAREJESTRUJ SIĘ i przenieść Cię na stronę rejestracji pokazaną poniżej.

Lokalizowanie według DOM (Document Object Model)

Kurs Model obiektu dokumentu (DOM)Krótko mówiąc, jest to sposób, w jaki zbudowane są elementy HTML. Selenium IDE może używać DOM w uzyskiwaniu dostępu do elementów strony. Jeśli zastosujemy tę metodę, nasz Target pole zawsze będzie zaczynać się od „dom=document…”; jednak prefiks „dom=” jest zazwyczaj usuwany, ponieważ Selenium IDE jest w stanie automatycznie interpretować wszystko, co zaczyna się od słowa kluczowego „dokument”, jako ścieżkę w DOM Selenium anyway.

Istnieją cztery podstawowe sposoby lokalizowania elementu poprzez DOM Selenium:

• pobierzElementById
• pobierzElementyByName
• dom:nazwa (dotyczy tylko elementów w nazwanym formularzu)
• dom:indeks

Lokalizowanie według DOM – getElementById

Skupmy się na pierwszej metodzie – zastosowaniu metody getElementById DOM w Selenium. Składnia byłaby następująca:

Składnia

document.getElementById("id of the element")

• id elementu = jest to wartość atrybutu ID elementu, do którego należy uzyskać dostęp. Wartość tę należy zawsze ująć w nawiasy („”).

Krok 1) Skorzystaj z tej strony demonstracyjnej http://demo.guru99.com/test/facebook.html Przejdź do niego i użyj Firebuga, aby sprawdzić pole wyboru „Keep me signed in” (Zachowaj mnie zalogowanym). Zanotuj jego ID.

Widzimy, że powinniśmy użyć identyfikatora „persist_box”.

Krok 2) Otwarte Selenium IDE i w Target w polu wpisz „document.getElementById(“persist_box”)” i kliknij Znajdź. Selenium IDE powinno być w stanie zlokalizować pole wyboru „Keep me signed in”. Chociaż nie może podświetlić wnętrza pola wyboru, Selenium IDE może nadal otaczać element jasnozieloną ramką, jak pokazano poniżej.

Lokalizowanie według DOM – getElementsByName

Metoda getElementById może uzyskać dostęp tylko do jednego elementu naraz i jest to element o określonym identyfikatorze. Metoda getElementsByName jest inna. Zbiera tablicę elementów o określonej nazwie. Dostęp do poszczególnych elementów można uzyskać za pomocą indeksu rozpoczynającego się od 0.

	pobierzElementById Otrzyma dla Ciebie tylko jeden element. Ten element ma identyfikator określony w nawiasach funkcji getElementById().
	pobierzElementyByName Otrzyma kolekcję elementów, których nazwy są takie same. Każdy element jest indeksowany liczbą zaczynającą się od 0, podobnie jak tablica Możesz określić, do którego elementu chcesz uzyskać dostęp, wpisując jego numer indeksu w nawiasach kwadratowych w składni getElementsByName przedstawionej poniżej.

Składnia

document.getElementsByName(“name“)[index]

• nazwa = nazwa elementu zdefiniowana przez jego atrybut „nazwa”.
• indeks = liczba całkowita wskazująca, który element tablicy getElementsByName zostanie użyty.

Krok 1) Nawigować do Mercury Strona główna Tours i zaloguj się, używając „tutorial” jako nazwy użytkownika i hasła. Firefox powinno przenieść Cię do ekranu Wyszukiwarki lotów.

Krok 2) Korzystając z Firebuga, sprawdź trzy przyciski opcji w dolnej części strony (przyciski opcji Klasa ekonomiczna, Klasa biznes i Klasa pierwsza). Zauważ, że wszystkie mają tę samą nazwę, czyli „servClass”.

Krok 3) Najpierw przejdźmy do przycisku opcji „Klasa ekonomiczna”. Ze wszystkich trzech przycisków opcji ten element jest pierwszy, więc ma indeks równy 0. In Selenium IDE, wpisz „document.getElementsByName(„servClass”)[0]” i kliknij przycisk Znajdź. Selenium IDE powinno być w stanie poprawnie zidentyfikować przycisk opcji klasy ekonomicznej.

Krok 4) Zmień numer indeksu na 1, aby Twój Target zmieni teraz nazwę na document.getElementsByName(“servClass”)[1]. Kliknij przycisk Znajdź i Selenium IDE powinno mieć możliwość podświetlenia przycisku opcji „Klasa biznesowa”, jak pokazano poniżej.

Lokalizowanie według DOM – dom:nazwa

Jak wspomniano wcześniej, ta metoda będzie miała zastosowanie tylko wtedy, gdy element, do którego uzyskujesz dostęp, jest zawarty w nazwanym formularzu.

Składnia

document.forms[“name of the form“].elements[“name of the element“]

• nazwa formularza = wartość atrybutu name znacznika formularza zawierającego element, do którego chcesz uzyskać dostęp
• nazwa elementu = wartość atrybutu name elementu, do którego chcesz uzyskać dostęp

Krok 1) Nawigować do Mercury Strona główna wycieczek http://demo.guru99.com/test/newtours/ i użyj Firebuga, aby sprawdzić pole tekstowe User Name. Zauważ, że jest ono zawarte w formularzu o nazwie „home”.

Krok 2) In Selenium IDE, wpisz „document.forms[„home”].elements[„userName”]” i kliknij przycisk Znajdź. Selenium IDE musi mieć pomyślny dostęp do elementu.

Lokalizowanie według DOM – dom:index

Ta metoda ma zastosowanie nawet wtedy, gdy element nie znajduje się w nazwanym formularzu, ponieważ używa indeksu formularza, a nie jego nazwy.

Składnia

document.forms[index of the form].elements[index of the element]

• indeks formularza = numer indeksu (zaczynający się od 0) formularza w odniesieniu do całej strony
• indeks elementu = numer indeksu (zaczynający się od 0) elementu w odniesieniu do całego formularza, który go zawiera

W tym celu uzyskamy dostęp do pola tekstowego „Telefon”. Mercury Strona rejestracji wycieczek. Formularz na tej stronie nie ma atrybutu nazwy ani identyfikatora, więc będzie to dobry przykład.

Krok 1) Nawigować do Mercury Strona rejestracji wycieczek i sprawdź pole tekstowe Telefon. Zauważ, że formularz je zawierający nie ma atrybutów ID i nazwy.

Krok 2) Wpisz „document.forms[0].elements[3]” w Selenium IDE Target i kliknij przycisk Znajdź. Selenium IDE powinno mieć prawidłowy dostęp do pola tekstowego Telefon.

Krok 3) Alternatywnie możesz użyć nazwy elementu zamiast jego indeksu i uzyskać ten sam wynik. Wpisz „document.forms[0].elements[„phone”]” w Selenium IDE Target pole. Pole tekstowe Telefon powinno nadal być podświetlone.

Lokalizowanie za pomocą XPath

XPath to język używany podczas lokalizowania węzłów XML (Extensible Markup Language). Ponieważ HTML można traktować jako implementację XML, możemy go również użyć XPath w lokalizowaniu elementów HTML.

• Korzyść: Może uzyskać dostęp do prawie każdego elementu, nawet tych bez atrybutów klasy, nazwy lub identyfikatora.
• Niekorzyść: Jest to najbardziej skomplikowana metoda identyfikacji elementów ze względu na zbyt wiele różnych zasad i względów.

Na szczęście Firebug może automatycznie wygenerować XPath Selenium lokalizatory. W poniższym przykładzie uzyskamy dostęp do obrazu, do którego nie można uzyskać dostępu za pomocą metod, które omówiliśmy wcześniej.

Krok 1) Nawigować do Mercury Strona główna Tours i użyj Firebuga, aby sprawdzić pomarańczowy prostokąt po prawej stronie żółtego pola „Linki”. Zobacz poniższy obraz.

Krok 2) Kliknij prawym przyciskiem myszy kod HTML elementu, a następnie wybierz opcję „Kopiuj XPath”.

Krok 3) In Selenium IDE, wpisz jeden ukośnik „/” w pliku Target a następnie wklej ścieżkę XPath, którą skopiowaliśmy w poprzednim kroku. Wpis w Twoim Target pole powinno teraz zaczynać się od dwóch ukośników „//”.

Krok 4) Kliknij przycisk Znajdź. Selenium IDE powinno być w stanie podświetlić pomarańczowe pole, jak pokazano poniżej.