Lokalizatory w Selenium IDE: Selektor CSS - DOM - XPath - ID

Spisie treści:

Anonim

Co to są lokalizatory?

Lokalizator to polecenie, które informuje Selenium IDE, które elementy GUI (np. Pole tekstowe, przyciski, pola wyboru itp.) Muszą działać. Identyfikacja poprawnych elementów GUI jest warunkiem koniecznym do stworzenia skryptu automatyzacji. Ale dokładna identyfikacja elementów GUI jest trudniejsza niż się wydaje. Czasami kończy się praca z nieprawidłowymi elementami GUI lub brakiem elementów! W związku z tym Selenium zapewnia szereg Lokalizatorów do precyzyjnego lokalizowania elementu GUI

Różne typy lokalizatorów CSS w Selenium IDE

Istnieją polecenia, które nie wymagają lokalizatora (na przykład polecenie „otwórz”). Jednak większość z nich potrzebuje Lokalizatorów elementów w webdriverze Selenium.

Wybór lokalizatora zależy w dużej mierze od testowanej aplikacji . W tym samouczku będziemy przełączać się między Facebookiem, nowymi tours.demoaut na podstawie lokalizatorów obsługiwanych przez te aplikacje. Podobnie w swoim projekcie testowym, wybierzesz dowolny z wyżej wymienionych lokalizatorów elementów w programie Selenium webdriver, w oparciu o obsługę Twojej aplikacji.

Lokalizowanie według identyfikatora

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

Format docelowy: id = id elementu

W tym przykładzie użyjemy Facebooka jako naszej aplikacji testowej, ponieważ Mercury Tours nie używa atrybutów ID.

Krok 1. Od czasu utworzenia tego samouczka Facebook zmienił projekt strony logowania. Użyj tej strony demonstracyjnej http://demo.guru99.com/test/facebook.html do testowania. Sprawdź pole tekstowe „E-mail lub telefon” za pomocą narzędzia Firebug i zanotuj jego identyfikator. W tym przypadku identyfikator to „e-mail”.

Krok 2. Uruchom Selenium IDE i wpisz „id = email” w polu Target. Kliknij przycisk Znajdź i zwróć uwagę, że pole tekstowe „Email or Phone” zostanie podświetlone na żółto i otoczone zielonym, co oznacza, że ​​Selenium IDE było w stanie poprawnie zlokalizować ten element.

Lokalizowanie według nazwy

Lokalizowanie elementów według nazwy jest bardzo podobne do lokalizowania według identyfikatora, z tą różnicą, że zamiast tego używamy przedrostka „name =” .

Format docelowy: nazwa = nazwa elementu

W poniższej demonstracji użyjemy teraz Mercury Tours, ponieważ wszystkie znaczące elementy mają nazwy.

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

Tutaj widzimy, że nazwa elementu to „nazwa_użytkownika”.

Krok 2. W Selenium IDE wprowadź „name = userName” w polu Target i kliknij przycisk Find. Selenium IDE powinno być w stanie zlokalizować pole tekstowe Nazwa użytkownika, podświetlając je.

Lokalizowanie według nazwy przy użyciu filtrów

Filtry mogą być używane, gdy wiele elementów ma tę samą nazwę. Filtry to dodatkowe atrybuty używane do rozróżniania elementów o tej samej nazwie.

Format docelowy : nazwa = nazwa_nazwa_elementu filtr = wartość_filtra

Zobaczmy przykład -

Krok 1 . Zaloguj się do Mercury Tours, używając „tutoriala” jako nazwy użytkownika i hasła. Powinien przenieść się do pokazanej poniżej strony Wyszukiwarki lotów.

Krok 2. Korzystając z programu Firebug, 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.

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

Krok 4 . Kliknij przycisk Znajdź i zwróć uwagę, że Selenium IDE może podświetlić przycisk opcji One Way na zielono - co oznacza, że ​​możemy pomyślnie uzyskać dostęp do elementu przy użyciu jego atrybutu VALUE.

Krok 5. Naciśnij klawisz „X” na klawiaturze, aby wykonać to polecenie kliknięcia. Zwróć uwagę, że został wybrany przycisk opcji Jednokierunkowa.

Możesz zrobić dokładnie to samo za pomocą przycisku opcji Podróż w obie strony, tym razem używając „name = tripType value = roundtrip” jako celu.

Lokalizowanie według tekstu linku

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

Format docelowy : link = link_text

W tym przykładzie uzyskamy dostęp do łącza „REJESTRACJA” znajdującego się na stronie głównej Mercury Tours.

Krok 1.

  • Najpierw upewnij się, że jesteś wylogowany z Mercury Tours.
  • Przejdź do strony głównej Mercury Tours.

Krok 2 .

  • Używając Firebuga, sprawdź link „ZAREJESTRUJ SIĘ”. Tekst linku znajduje się między tagami i.
  • W tym przypadku nasz tekst linku to „REJESTRUJ”. Skopiuj tekst linku.

Krok 3 . Skopiuj tekst łącza w Firebug i wklej go do pola docelowego Selenium IDE. Poprzedź go ciągiem „link =”.

Krok 4. Kliknij przycisk Znajdź i zwróć uwagę, że Selenium IDE było w stanie poprawnie podświetlić łącze REJESTRUJ.

Krok 5. Aby zweryfikować dalej, wpisz „clickAndWait” w polu poleceń i wykonaj je. Selenium IDE powinno mieć możliwość pomyślnego kliknięcia tego łącza REJESTRACJA i przejścia do strony rejestracji pokazanej poniżej.

Lokalizowanie według selektora CSS

Selektory CSS w Selenium to wzorce łańcuchowe używane do identyfikacji elementu na podstawie kombinacji znacznika HTML, identyfikatora, klasy i atrybutów. Lokalizowanie przez selektory CSS w Selenium jest bardziej skomplikowane niż poprzednie metody, ale jest to najczęstsza strategia lokalizowania zaawansowanych użytkowników Selenium, ponieważ może uzyskać dostęp nawet do tych elementów, które nie mają identyfikatora ani nazwy.

Selektory CSS w Selenium mają wiele formatów, ale skupimy się tylko na najpopularniejszych.

  • Tag i identyfikator
  • Tag i klasa
  • Znacznik i atrybut
  • Znacznik, klasa i atrybut
  • Tekst wewnętrzny

Korzystając z tej strategii, zawsze poprzedzamy pole docelowe „css =”, jak zostanie to pokazane w poniższych przykładach.

Lokalizowanie według selektora CSS - tag i identyfikator

W tym przykładzie ponownie użyjemy pola tekstowego Email Facebooka. Jak pamiętasz, ma identyfikator „e-mail” i już uzyskaliśmy do niego dostęp w sekcji „Lokalizowanie według identyfikatora”. Tym razem użyjemy selektora Selenium CSS z identyfikatorem w dostępie do tego samego elementu.

Składnia

Opis

css = tag # id
  • tag = znacznik HTML elementu, do którego uzyskiwany jest dostęp
  • # = znak krzyżyka. Powinno to być zawsze obecne podczas korzystania z selektora Selenium CSS z identyfikatorem
  • id = identyfikator elementu, do którego uzyskiwany jest dostęp

Pamiętaj, że identyfikator jest zawsze poprzedzony znakiem krzyżyka (#).

Krok 1. Przejdź do www.facebook.com. Korzystając z narzędzia Firebug, przyjrzyj się polu tekstowemu „E-mail lub telefon”.

W tym miejscu zwróć uwagę, że znacznik HTML to „wejście”, a jego identyfikator to „e-mail”. Więc nasza składnia będzie wyglądać następująco: „css = input # email”.

Krok 2. Wpisz „css = input # email” w polu Target Selenium IDE i kliknij przycisk Find. Selenium IDE powinno być w stanie wyróżnić ten element.

Lokalizowanie według selektora CSS - znacznik i klasa

Lokalizowanie za pomocą selektora CSS w Selenium przy użyciu znacznika HTML i nazwy klasy jest podobne do używania znacznika i identyfikatora, ale w tym przypadku zamiast znaku krzyżyka używana jest kropka (.).

Składnia

Opis

css = tag. klasa
  • tag = znacznik HTML elementu, do którego uzyskiwany jest dostęp
  • . = kropka. Powinno to być zawsze obecne, gdy używasz selektora CSS z klasą
  • class = klasa elementu, do którego uzyskiwany jest dostęp

Krok 1. Przejdź do strony demonstracyjnej http://demo.guru99.com/test/facebook.html i użyj narzędzia Firebug, aby sprawdzić pole tekstowe „E-mail lub telefon”. Zauważ, że jego znacznik HTML to „input”, a jego klasa to „inputtext”.

Krok 2. W Selenium IDE wpisz „css = input.inputtext” w polu Target i kliknij Find. Selenium IDE powinno być w stanie rozpoznać pole tekstowe Email lub Phone.

Zwróć uwagę, że jeśli wiele elementów ma ten sam znacznik HTML i tę samą nazwę, rozpoznany zostanie tylko pierwszy element w kodzie źródłowym . Używając Firebug, sprawdź pole tekstowe Hasło na Facebooku i zauważ, że ma taką samą nazwę jak pole tekstowe E-mail lub Telefon.

Powodem, dla którego tylko pole tekstowe E-mail lub Telefon zostało wyróżnione na poprzedniej ilustracji, jest to, że znajduje się ono na pierwszym miejscu w źródle strony Facebooka.

Lokalizowanie według selektora CSS - znacznik i atrybut

Ta strategia wykorzystuje znacznik HTML i określony atrybut elementu, do którego ma zostać uzyskany dostęp.

Składnia

Opis

css = tag [atrybut = wartość]
  • tag = znacznik HTML elementu, do którego uzyskiwany jest dostęp
  • [i] = nawiasy kwadratowe, w których zostanie umieszczony określony atrybut i odpowiadająca mu wartość
  • atrybut = atrybut, który ma zostać użyty. Zaleca się użycie atrybutu, który jest unikalny dla elementu, takiego jak nazwa lub identyfikator.
  • wartość = odpowiednia wartość wybranego atrybutu.

Krok 1. Przejdź do strony rejestracji Mercury Tours (http://demo.guru99.com/test/newtours/register.php) i sprawdź pole tekstowe „Nazwisko”. Zanotuj jego znacznik HTML (w tym przypadku „input”) i jego nazwę („lastName”).

Krok 2. W Selenium IDE wprowadź „css = input [name = lastName]” w polu Target i kliknij Find. Selenium IDE powinno mieć dostęp do pola Nazwisko.

Gdy wiele elementów ma ten sam znacznik i atrybut HTML, tylko pierwszy zostanie rozpoznany . To zachowanie jest podobne do lokalizowania elementów za pomocą selektorów CSS z tym samym znacznikiem i klasą.

Lokalizowanie według selektora CSS - znacznik, klasa i atrybut

Składnia Opis
css = tag.class [atrybut = wartość]
  • tag = znacznik HTML elementu, do którego uzyskiwany jest dostęp
  • . = kropka. Powinno to być zawsze obecne, gdy używasz selektora CSS z klasą
  • class = klasa elementu, do którego uzyskiwany jest dostęp
  • [i] = nawiasy kwadratowe, w których zostanie umieszczony określony atrybut i odpowiadająca mu wartość
  • atrybut = atrybut, który ma zostać użyty. Zaleca się użycie atrybutu, który jest unikalny dla elementu, takiego jak nazwa lub identyfikator.
  • wartość = odpowiednia wartość wybranego atrybutu.

Krok 1. Przejdź do strony demonstracyjnej http://demo.guru99.com/test/facebook.html i użyj narzędzia Firebug, aby sprawdzić pola wprowadzania „E-mail lub Telefon” i „Hasło”. Zwróć uwagę na ich znacznik HTML, klasę i atrybuty. W tym przykładzie wybierzemy ich atrybuty „tabindex”.

Krok 2. Najpierw uzyskamy dostęp do pola tekstowego „E-mail lub telefon”. Dlatego użyjemy wartości tabindex równej 1. Wpisz "css = input.inputtext [tabindex = 1]" w polu Target Selenium IDE i kliknij Find. Pole wprowadzania „E-mail lub telefon” powinno być podświetlone.

Krok 3. Aby uzyskać dostęp do pola wprowadzania hasła, po prostu zastąp wartość atrybutu tabindex. Wpisz „css = input.inputtext [tabindex = 2]” w polu Cel i kliknij przycisk Znajdź. Selenium IDE musi być w stanie pomyślnie zidentyfikować pole tekstowe Hasło.

Lokalizowanie według selektora CSS - tekst wewnętrzny

Jak być może zauważyłeś, etykietom HTML rzadko nadaje się identyfikator, nazwę lub atrybuty klasy. Jak więc mamy do nich dostęp? Odpowiedzią jest użycie ich wewnętrznych tekstów. Teksty wewnętrzne to faktyczne wzorce ciągów, które etykieta HTML wyświetla na stronie.

Składnia

Opis

css = tag: zawiera ("tekst wewnętrzny")
  • tag = znacznik HTML elementu, do którego uzyskiwany jest dostęp
  • internal text = wewnętrzny tekst elementu

Krok 1. Przejdź do strony głównej Mercury Tours (http://demo.guru99.com/test/newtours/) i użyj narzędzia Firebug, aby sprawdzić etykietę „Hasło”. Zwróć uwagę na jego znacznik HTML (w tym przypadku „czcionkę”) i zauważ, że nie ma on atrybutów class, id ani name.

Krok 2. Wpisz css = font: includes ("Hasło:") w polu Cel Selenium IDE i kliknij Znajdź. Selenium IDE powinno mieć dostęp do etykiety hasła, jak pokazano na poniższym obrazku.

Krok 3. Tym razem zamień tekst wewnętrzny na „Boston”, tak aby element docelowy stał się teraz „css = font: zawiera („ Boston ”)”. Kliknij Znajdź. Należy zauważyć, że etykieta „Z Bostonu do San Francisco” zostanie podświetlona. To pokazuje, że Selenium IDE może uzyskać dostęp do długiej etykiety, nawet jeśli właśnie wskazałeś pierwsze słowo jego wewnętrznego tekstu.

Lokalizowanie według DOM (Document Object Model)

Model obiektu dokumentu (DOM), mówiąc najprościej, to sposób, w jaki strukturyzowane są elementy HTML. Selenium IDE może używać DOM w dostępie do elementów strony. Jeśli użyjemy tej metody, nasze pole docelowe zawsze będzie zaczynać się od „dom = document…”; jednakże przedrostek „dom =” jest zwykle usuwany, ponieważ Selenium IDE jest w stanie automatycznie interpretować wszystko, co zaczyna się od słowa kluczowego „dokument”, jako ścieżkę w DOM w Selenium i tak.

Istnieją cztery podstawowe sposoby zlokalizowania elementu za pomocą DOM w Selenium:

  • getElementById
  • getElementsByName
  • dom: name (dotyczy tylko elementów w nazwanym formularzu)
  • dom: index

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

Opis

document.getElementById ("id elementu")

id elementu = to jest wartość atrybutu ID elementu, do którego ma zostać uzyskany dostęp. Ta wartość powinna być zawsze umieszczona w nawiasach („”).

Krok 1. Użyj tej strony demonstracyjnej http://demo.guru99.com/test/facebook.html Przejdź do niej i użyj narzędzia Firebug, aby sprawdzić pole wyboru „Nie wylogowuj mnie”. Zwróć uwagę na jego identyfikator.

Widzimy, że ID, którego powinniśmy użyć, to „persist_box”.

Krok 2. Otwórz Selenium IDE iw polu Target wpisz „document.getElementById („ persist_box ”)” i kliknij Znajdź. Selenium IDE powinno być w stanie zlokalizować pole wyboru „Nie wylogowuj mnie”. Chociaż nie może podświetlić wnętrza pola wyboru, Selenium IDE może nadal otaczać element jasnozieloną obwódką, jak pokazano poniżej.

Lokalizowanie według DOM - getElementsByName

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

getElementById

  • Otrzymasz tylko jeden element.
  • Ten element nosi identyfikator określony w nawiasach kwadratowych getElementById ().

getElementsByName

  • Otrzyma zbiór elementów, których nazwy są takie same.
  • Każdy element jest indeksowany liczbą zaczynającą się od 0, tak jak tablica
  • Określasz, do którego elementu chcesz uzyskać dostęp, umieszczając jego numer indeksu w nawiasach kwadratowych w składni getElementsByName poniżej.

Składnia

Opis

document.getElementsByName ("nazwa") [indeks]
  • nazwa = nazwa elementu zdefiniowana przez jego atrybut „nazwa”
  • index = liczba całkowita wskazująca, który element w tablicy getElementsByName zostanie użyty.

Krok 1. Przejdź do strony głównej Mercury Tours i zaloguj się, używając „tutoriala” jako nazwy użytkownika i hasła. Firefox powinien przenieść Cię do ekranu Wyszukiwarki lotów.

Krok 2. Korzystając z programu Firebug, sprawdź trzy przyciski opcji w dolnej części strony (przyciski opcji klasy ekonomicznej, klasy biznes i pierwszej). Zauważ, że wszystkie mają tę samą nazwę, która jest „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. W środowisku 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 cel stał się teraz document.getElementsByName ("servClass") [1]. Kliknij przycisk Znajdź, a Selenium IDE powinno móc podświetlić przycisk 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

Opis

document.forms ["nazwa formularza"] .elements ["nazwa elementu"]
  • nazwa formularza = wartość atrybutu name znacznika formularza zawierającego element, do którego chcesz uzyskać dostęp
  • nazwa elementu = wartość atrybutu nazwy elementu, do którego chcesz uzyskać dostęp

Krok 1. Przejdź do strony głównej Mercury Tours (http://demo.guru99.com/test/newtours/) i użyj narzędzia Firebug, aby sprawdzić pole tekstowe Nazwa użytkownika. Zauważ, że jest zawarty w formie o nazwie „dom”.

Krok 2. W Selenium IDE wpisz "document.forms [" home "]. Elements [" userName "]" i kliknij przycisk Find. 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

Opis

document.forms [indeks formularza] .elements [indeks elementu]
  • 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

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

Krok 1. Przejdź do strony rejestracji Mercury Tours i sprawdź pole tekstowe Telefon. Zwróć uwagę, że formularz, który go zawiera, nie ma atrybutów identyfikatora i nazwy.

Krok 2. Wpisz „document.forms [0] .elements [3]” w polu Cel Selenium IDE i kliknij przycisk Znajdź. Selenium IDE powinno mieć poprawny dostęp do pola tekstowego Telefon.

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

Lokalizowanie przez 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 również używać XPath do lokalizowania elementów HTML.

Zaleta: może uzyskać dostęp do prawie każdego elementu, nawet tych bez atrybutów class, name lub id.

Wada: jest to najbardziej skomplikowana metoda identyfikacji elementów ze względu na zbyt wiele różnych zasad i uwarunkowań.

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

Krok 1. Przejdź do strony głównej Mercury Tours i użyj narzędzia Firebug, aby sprawdzić pomarańczowy prostokąt po prawej stronie żółtego pola „Linki”. Zobacz obrazek poniżej.

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

Krok 3. W Selenium IDE wpisz jeden ukośnik „/” w polu Target, a następnie wklej XPath skopiowany w poprzednim kroku. Wpis w polu Cel powinien 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.

Podsumowanie

Składnia użycia lokalizatora

metoda

Składnia docelowa

Przykład
Według ID id = id_of_the_element id = email
Wg nazwy name = name_of_the_element name = nazwa_użytkownika
Według nazwy przy użyciu filtrów name = name_of_the_element filter = value_of_filter name = tripType value = oneway
Według tekstu linku link = link_text link = ZAREJESTRUJ SIĘ
Tag i identyfikator css = tag # id css = wprowadź # e-mail
Tag i klasa css = tag. klasa css = input.inputtext
Tag i atrybut css = tag [atrybut = wartość] css = input [name = lastName]
Tag, klasa i atrybut css = tag. klasa [atrybut = wartość] css = input.inputtext [tabindex = 1]