Lokalizatory selenu: identyfikacja elementów sieci Web za pomocą XPath w selenie (przykłady)

selenium locators identify web elements using xpath selenium

Samouczek dotyczący lokalizatorów selenu: Dowiedz się, jak identyfikować elementy sieci Web za pomocą XPath w selenie z przykładami

w poprzedni tutorial , przedstawiliśmy Ci inne narzędzie do testowania automatyzacji o nazwie Firebug. Stworzyliśmy również własny skrypt automatyzacji ręcznie, korzystając z Firebuga i jego możliwości. Nauczyliśmy się również wprowadzać pożądane modyfikacje do naszego skryptu.

Idąc dalej, w tym samouczku przyjrzymy się plikowi różne typy lokalizatorów w Selenium i technika ich dostępności do budowania skryptów testowych . Ten samouczek zawiera więc szczegółowe wprowadzenie do różnych typów lokalizatorów.

To jest nasze Piąty tutorial w samouczku Selenium seria.

Co to jest lokalizator?

Lokalizator można określić jako adres, który jednoznacznie identyfikuje element sieciowy na stronie internetowej. Lokalizatory to właściwości HTML elementu WWW, które informują Selenium o elemencie WWW, na którym musi wykonać akcję.

Istnieje wiele różnych elementów sieci. Najczęstsze z nich to:

• Pole tekstowe
• Przycisk
• Upuścić
• Hiperłącze
• Pole wyboru
• Przycisk radiowy

Czego się nauczysz:

• Rodzaje lokalizatorów
• Używanie ID jako lokalizatora
• Używanie ClassName jako lokalizatora
• Używanie nazwy jako lokalizatora
• Używanie tekstu łącza jako lokalizatora
• Używanie XPath jako lokalizatora
• Wniosek
• rekomendowane lektury

Rodzaje lokalizatorów

Identyfikacja tych elementów zawsze była bardzo trudnym tematem i dlatego wymaga dokładnego i skutecznego podejścia. Tym samym możemy stwierdzić, że skuteczniejszy lokalizator, stabilniejszy będzie skrypt automatyzacji. Zasadniczo każde polecenie Selenium wymaga lokalizatorów do znalezienia elementów sieci. Tak więc, aby dokładnie i precyzyjnie zidentyfikować te elementy sieci, mamy różne typy lokalizatorów.

Teraz zrozumiemy dalej, ćwicząc każdy z nich niezależnie.

Zanim zaczniemy od lokalizatorów, poświęćmy chwilę na przedstawienie testowanej aplikacji. Używalibyśmy adresu „https://accounts.google.com/” do lokalizowania różnych typów elementów internetowych przy użyciu różnych typów lokalizatorów.

Używanie ID jako lokalizatora

Najlepszą i najpopularniejszą metodą identyfikacji elementu internetowego jest użycie identyfikatora. Przypuszcza się, że identyfikator każdego elementu jest niepowtarzalny.

W tym przykładzie uzyskalibyśmy dostęp do pola tekstowego „E-mail” znajdującego się w formularzu logowania na gmail.com.

Znajdowanie identyfikatora elementu internetowego używając Firebug

qa testowanie pytań i odpowiedzi na rozmowę kwalifikacyjną dla doświadczonych

Krok 1 : Uruchom przeglądarkę internetową (Firefox) i przejdź do „https://accounts.google.com/”.

Krok 2 : Otwórz firebuga (naciskając F12 lub za pomocą narzędzi).

Krok 3 : Kliknij ikonę inspekcji, aby zidentyfikować element sieciowy.

Krok 4 : Najedź na element web (w naszym przypadku pole tekstowe Email), na którym chcemy wykonać jakąś akcję. W sekcji firebug można zobaczyć podświetlone odpowiednie tagi HTML.

Krok 5 : Bądź świadomy atrybutu ID i zanotuj go. Teraz musimy sprawdzić, czy zidentyfikowany identyfikator jest w stanie znaleźć element w sposób jednoznaczny i bezbłędny.

Składnia : id = id elementu

W naszym przypadku identyfikator to „Email”.

Alternatywne podejście:

Zamiast wykonywać kroki od 2 do 4, możemy bezpośrednio zlokalizować / sprawdzić element sieciowy, klikając prawym przyciskiem myszy element sieciowy (pole tekstowe wiadomości e-mail), którego wartość lokalizatora musimy sprawdzić, i klikając opcję „Zbadaj element za pomocą narzędzia Firebug”. Dlatego to zdarzenie kliknięcia wyzwala rozwinięcie sekcji firebuga, a odpowiadający mu tag HTML zostanie podświetlony.

Sprawdź wartość lokalizatora

Zakładając, że przeglądarka jest otwarta i została przekierowana na „https://accounts.google.com/”.

Krok 1 : Uruchom Selenium IDE.

Krok 2 : Kliknij pierwszy wiersz w sekcji edytora.

Krok 3 : Wpisz „id = Email”, tj. Wartość lokalizatora w polu docelowym.

Krok 4 : Kliknij przycisk Znajdź. Jeśli podana wartość lokalizatora jest prawidłowa, pole tekstowe wiadomości e-mail zostanie podświetlone na żółto z fluorescencyjną zieloną obwódką wokół pola. Jeśli podana wartość lokalizatora jest niepoprawna, komunikat o błędzie zostanie wydrukowany w panelu dziennika na dole Selenium IDE.

Przypadek 1 - Wartość lokalizatora = poprawna

Przypadek 2 - Wartość lokalizatora = nieprawidłowa

Krok 5 : W celu dalszej weryfikacji użytkownik może również wykonać polecenie „typ” dla danego celu, podając odpowiednią wartość w polu „Wartość”. Jeśli wykonanie polecenia wprowadzi określoną wartość w polu tekstowym E-mail, oznacza to, że określony typ lokalizatora jest poprawny i dostępny.

Używanie ClassName jako lokalizatora

Istnieje tylko subtelna różnica między używaniem identyfikatora jako lokalizatora a użyciem nazwy klasy jako lokalizatora.

W tym przykładzie uzyskalibyśmy dostęp do „Potrzebujesz pomocy?” hiperłącze na dole formularza logowania na gmail.com.

Znajdowanie nazwy klasy elementu internetowego używając Firebug

Krok 1 : Zlokalizuj / sprawdź element sieciowy (link „Potrzebujesz pomocy?” W naszym przypadku), klikając prawym przyciskiem myszy element sieciowy, którego wartość lokalizatora musimy sprawdzić, i klikając opcję „Sprawdź element za pomocą narzędzia Firebug”.

najlepszy program do czyszczenia komputera dla systemu Windows 10

Krok 2 : Bądź świadomy atrybutu nazwy klasy i zanotuj go. Teraz musimy sprawdzić, czy identyfikowana nazwa klasy jest w stanie znaleźć element w sposób jednoznaczny i dokładny.

Składnia: class = nazwa klasy elementu

W naszym przypadku nazwa klasy to „odwrócić potrzebną pomoc”

Sprawdź wartość lokalizatora

Krok 1 : Wpisz „class = need-help-reverse” w polu docelowym w Selenium IDE.

Krok 2 : Kliknij przycisk Znajdź. Zauważ, że hiperłącze zostanie podświetlone na żółto z fluorescencyjną zieloną obwódką wokół pola.

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

Używanie nazwy jako lokalizatora

Lokalizowanie elementu WWW przy użyciu nazwy jest bardzo analogiczne do dwóch poprzednich typów lokalizatorów. Jedyna różnica polega na składni.

W tym przykładzie uzyskalibyśmy dostęp do pola tekstowego „Hasło” znajdującego się w formularzu logowania na gmail.com.

Składnia: name = nazwa elementu

W naszym przypadku nazwa to „Passwd”.

Sprawdź wartość lokalizatora

Krok 1 : Wpisz „name = Passwd” w polu docelowym i kliknij przycisk Znajdź. Zwróć uwagę, że pole tekstowe „Hasło” zostanie podświetlone.

Używanie tekstu łącza jako lokalizatora

Wszystkie hiperłącza na stronie internetowej można zidentyfikować za pomocą tekstu łącza. Linki na stronie internetowej można określić za pomocą tagu kotwicy ( ). Znacznik kotwicy służy do tworzenia hiperłączy na stronie internetowej, a tekst między początkiem a zamykaniem znaczników kotwicy stanowi tekst łącza ( Jakiś tekst ).

W tym przykładzie uzyskalibyśmy dostęp do linku „Utwórz konto” znajdującego się na dole formularza logowania na gmail.com.

Znajdowanie tekstu linku do elementu sieci za pomocą Firebug

Krok 1 : Zlokalizuj / sprawdź element sieciowy (w naszym przypadku link „Utwórz konto”), klikając prawym przyciskiem myszy element sieciowy, którego wartość lokalizatora musimy sprawdzić, i klikając opcję „Sprawdź element za pomocą narzędzia Firebug”.

Krok 2 : Bądź świadomy tekstu obecnego w tagi i zanotuj to. Stąd ten tekst będzie używany do jednoznacznej identyfikacji odsyłacza na stronie internetowej.

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

Składnia: link = tekst linku do elementu

W naszym przypadku tekst linku to „Utwórz konto”.

Sprawdź wartość lokalizatora

Krok 1 : Wpisz „link = Utwórz konto”, tj. Wartość lokalizatora w polu docelowym w Selenium IDE.

Krok 2 : Kliknij przycisk Znajdź. Zwróć uwagę, że łącze zostanie podświetlone na żółto z fluorescencyjną zieloną obwódką wokół pola.

Używanie XPath jako lokalizatora

Xpath służy do lokalizowania elementu WWW na podstawie jego ścieżki XML. XML to skrót od Extensible Markup Language i służy do przechowywania, organizowania i transportu dowolnych danych. Przechowuje dane w parze klucz-wartość, która jest bardzo podobna do tagów HTML. Oba są językami znaczników, a ponieważ należą do tego samego parasola, xpath może być używany do lokalizowania elementów HTML.

Podstawą lokalizowania elementów za pomocą Xpath jest przechodzenie między różnymi elementami na całej stronie, a tym samym umożliwienie użytkownikowi znalezienia elementu z odniesieniem do innego elementu.

Xpath można utworzyć na dwa sposoby:

Względna ścieżka Xpath

Względna ścieżka Xpath zaczyna się od bieżącej lokalizacji i jest poprzedzona przedrostkiem „//”.

Na przykład: // span (@ class = 'Email')

Absolute Xpath

Absolute Xpath zaczyna się od ścieżki głównej i jest poprzedzony znakiem „/”.

Na przykład: / HTML / body / div / div (@ id = 'Email')

Kluczowe punkty:

• Wskaźnik sukcesu znalezienia elementu za pomocą Xpath jest zbyt wysoki. Wraz z poprzednim stwierdzeniem Xpath może znaleźć względnie wszystkie elementy na stronie internetowej. W ten sposób Xpaths może służyć do lokalizowania elementów bez identyfikatora, klasy ani nazwy.
• Tworzenie prawidłowego Xpath jest trudnym i złożonym procesem. Dostępne są wtyczki do generowania Xpath, ale w większości przypadków wygenerowane Xpath nie potrafią poprawnie zidentyfikować elementu WWW.
• Tworząc xpath, użytkownik powinien być świadomy różnych nomenklatur i protokołów.

Przykłady Selenium XPath:

Xpath Checker

Tworzenie Xpath staje się trochę prostsze dzięki użyciu Xpath Checker. Xpath Checker to dodatek do przeglądarki Firefox, który automatycznie generuje Xpath dla elementu internetowego. Dodatek można pobrać i zainstalować jak każdą inną wtyczkę. Wtyczkę można pobrać ze strony „https://addons.mozilla.org/en-US/firefox/addon/xpath-checker/”.

Zaraz po zainstalowaniu wtyczki można ją zobaczyć w menu kontekstowym, klikając prawym przyciskiem myszy dowolny element, którego ścieżkę x chcemy wygenerować.

Kliknij „View Xpath”, aby zobaczyć wyrażenie Xpath elementu. Pojawi się okno edytora z wygenerowanym wyrażeniem Xpath. Teraz użytkownik może edytować i modyfikować wygenerowane wyrażenie Xpath. Odpowiednie wyniki byłyby aktualizowane łącznie.

Zwróć uwagę, że XPath Checker jest również dostępny dla innych przeglądarek.

Ale powtarzając fakt, że w większości przypadków wygenerowane Xpath nie identyfikują poprawnie elementu internetowego. Dlatego zaleca się tworzenie własnej ścieżki Xpath zgodnie z predefiniowanymi regułami i protokołami.

W tym przykładzie uzyskalibyśmy dostęp do obrazu „Google” znajdującego się u góry formularza logowania na gmail.com.

Tworzenie ścieżki Xpath elementu WWW

Krok 1 : Wpisz „// img (@ class =’ logo ’)”, tj. Wartość lokalizatora w polu docelowym w Selenium IDE.

Składnia: Xpath elementu

gdzie znaleźć klucz bezpieczeństwa sieci do wifi

Krok 2 : Kliknij przycisk Znajdź. Zwróć uwagę, że obraz będzie podświetlony na żółto z fluorescencyjną zieloną obwódką wokół pola.

Wniosek

Oto sedno tego artykułu.

• Lokalizatory to właściwości HTML elementu internetowego, które informują Selenium o elemencie sieciowym, na którym musi wykonywać działania.
• Istnieje wiele elementów sieci, z którymi użytkownik może regularnie korzystać. Niektóre z nich to: pole tekstowe, przycisk, lista rozwijana, hiperłącze, pole wyboru i przycisk opcji.
• Różnorodny zakres elementów internetowych wiąże się z szerokim zakresem strategii / podejść do lokalizowania tych elementów sieci.
• Niektóre z powszechnie używanych typów lokalizatorów to ID, ClassName, Link Text, XPath, CSS Selectors i Name.

Uwaga: Z uwagi na fakt, że tworzenie CSS Selector i XPath wymaga dużego wysiłku i praktyki, dlatego proces ten jest wykonywany tylko przez bardziej wyrafinowanych i przeszkolonych użytkowników.

W tym samouczku poznaliśmy różne typy lokalizatorów, w tym Selenium Xpath.

Następny samouczek nr 6 : Kontynuując ten samouczek dotyczący typów lokalizatorów Selenium, nauczymy się, jak używać Selektor CSS jako lokalizator.

Masz pytania? Daj nam znać w komentarzach. Postaramy się rozwiązać wszystkie.

rekomendowane lektury

• Selenium Find Element By Text Samouczek z przykładami
• 30+ najlepszych samouczków dotyczących selenu: naucz się selenu z prawdziwymi przykładami
• Jak zlokalizować elementy w przeglądarkach Chrome i IE do tworzenia skryptów selenium - Samouczek Selenium # 7
• Obsługa tabel internetowych, ramek i elementów dynamicznych w skrypcie Selenium - samouczek Selenium nr 18
• Wykorzystanie klasy Selenium Select do obsługi elementów rozwijanych na stronie internetowej - Samouczek Selenium nr 13
• Cucumber Selenium Tutorial: Integracja Cucumber Java Selenium WebDriver
• Jak używać selektora CSS do identyfikowania elementów sieci Web dla skryptów selenium - samouczek Selenium nr 6
• Sprawdź widoczność elementów sieci Web przy użyciu różnych typów poleceń WebDriver - samouczek Selenium nr 14