Lokalizacja elementów na stronie internetowej

Webowe testy automatyczne w dużej części opierają się na symulacji działań użytkownika ze stroną internetową. Interakcje jakie zachodzą na tej linii to np:

  •  przejście na konkretny adres strony www
  •  kliknięcie w wybrany przycisk
  •  wybranie elementu z listy rozwijanej 
  •  wprowadzenie loginu i hasła w odpowiednie pola na formularzu logowania

 

To tylko przykładowe akcje, które możemy wykonać na stronie webowej. Żeby jednak wykonać jakąś akcję, najpierw musimy zlokalizować element, dzięki któremu dana akcja będzie możliwa. Jeśli np. chcemy się zalogować do jakiegoś serwisu, musimy wpisać  login i hasło w odpowiednie pola a następnie kliknąć przycisk „Zaloguj”. I właśnie pole ‚login’, pole ‚hasło’ czy przycisk ‚Zaloguj’ są elementami, które musimy zlokalizować, aby poprawnie wysłać formularz do serwera i zakończyć proces logowania.

W tym artykule dokładnie wyjaśnię jak efektywnie i jednoznacznie zlokalizować każdy element na stronie internetowej. Do tego celu możemy wykorzystać plugin FireBug oraz FirePath działający na przeglądarce Mozilla FireFox (instalacja, konfiguracja i działanie wspomnianych dodatków była przedstawiana w poprzednim artykule).

Jeszcze jedno krótkie, ale ważne słowo wstępne: jak sugeruje już sam tytuł, cały przedstawiony kod będzie realizowany w oparciu o język Java, więc należy zapamiętać, iż wielkość liter ma znaczenie, a błędy spowodowane niewłaściwą wielkością liter będą skutkować brakiem komplikacji całego kodu!

 

Okay, teraz już zaczynamy!

Aby właściwie, wygodnie i szybko lokalizować elementy na stronie będziemy korzystać z konsoli deweloperskiej przeglądarki internetowej.

Listing 1.0

 

 

 

Wynik listingu 1.0 w przeglądarce             

 

  1.  Lokalizowanie elementu za pomocą atrybutu Id

 

Lokalizacja elementu Login (pole do wprowadzania tekstu)

WebElement login = driver.findElement(By.id("login"));

 

Lokalizacja elementu Password (pole do wprowadzania tekstu w postaci zamaskowanego ciągu znaków)

WebElement password = driver.findElement(By.id("password"));

 

Lokalizacja przycisku zatwierdzającego formularz – Submit

WebElement submit = driver.findElement(By.id("buttonsubmit"));

 

 

2.Lokalizowanie elementu za pomocą atrybutu name

 

Listing 2.0      

Wynik listingu 2.0 w przeglądarce     

 

 

Lokalizacja elementu Login (pole do wprowadzania tekstu)

WebElement login = driver.findElement(By.name("log"));

 

Lokalizacja elementu Password (pole do wprowadzania tekstu)

WebElement password = driver.findElement(By.name("psw"));

 

Lokalizacja przycisku zatwierdzającego formularz – Submit

WebElement submit = driver.findElement(By.name("fieldsubmit"));

 

  1. Lokalizowanie elementu za pomocą atrybutu class

 

Listing 3.0 

 

Wynik listingu 3.0 w przeglądarce

 

Lokalizacja elementu Login (pole do wprowadzania tekstu)

WebElement login = driver.findElement(By.className("login"));

 

Lokalizacja elementu Password (pole do wprowadzania tekstu)

WebElement password = driver.findElement(By.className("password"));

 

Lokalizacja przycisku zatwierdzającego formularz – Submit

WebElement submit = driver.findElement(By.className("buttonsubmit"));
  1. Lokalizowanie elementu za pomocą tagName

 

Poniżej pokaże jak z wykorzystaniem tagName możemy zlokalizować wszystkie obrazki na danej stronie i wypisać w konsoli ich adresy http.

List allImages = driver.findElements(By.tagName("img"));

for (WebElement image : allImages)
{
    System.out.println(image.getAttribute("src"));
}

 

Listing 4.0

 

Najpierw tworzymy listę WebElementów, która będzie przechowywać wszystkie zlokalizowane elementy opisane atrybutem tagName z wartością img. Inaczej mówiąc, tutaj będziemy przechowywać zlokalizowane obrazki, które widnieją na przeszukiwanej stronie.

Kolejne 4 linijki kodu to pętla, która przegląda wcześniej utworzoną listę allImages  (która zawiera już w sobie zlokalizowane elementy) i wypisuje wartość atrybutu src dla każdej pozycji osobno , czyli wypisuje adresy http obrazków, przykład widzimy na Listingu 4.0, który obrazuje przykładowy output na konsoli.

  1. Lokalizowanie elementu za pomocą linkText

 

Listing 5.0

 

Wynik Listingu 5.0 w przeglądarce

 

 

Lokalizowanie linku: Wirtualna Polska

WebElement wirtualnaPolskaLink = driver.findElement(By.linkText("Wirtualna Polska"));

 

Przypominam o tym, o czym pisałem już  na początku:  ważna jest wielkość liter. Dlatego jeśli opis linku w kodzie HTML to Wirtualna Polska, to nie możemy napisać:

driver.findElement(By.linkText("wirtualna Polska"));

ani tak:

driver.findElement(By.linkText("wirtualna polska"));

ani tak:

driver.findElement(By.linkText("Wirtualna polska"));

ani tak:

driver.findElement(By.linkText("WIRTUALNA POLSKA"));

 

 

Poniższy Listing 5.1 pokazuje jak wygląda błąd w konsoli po kompilacji jednej z powyższych z błędnych instrukcji kodu.

Listing 5.1

 

  1. Lokalizowanie elementu za pomocą partialLinkText

 

Listing 6.0

 

Wynik listingu 6.0 w przeglądarce

 

WebElement wirtualnaPolskaLink = driver.findElement(By.partialLinkText("Wirtualna"));

 bądź też:

WebElement wirtualnaPolskaLink = driver.findElement(By.partialLinkText("Polska"));

Jak widzimy wyżej, lokalizacja elementów za pomocą partialLinkText jest bardzo podobna do tej z wykorzystaniem linkText z tą jednak różnicą, że nie musimy podawać pełnej nazwy linku  a wystarczy tylko jej część. Takie rozwiązanie bardzo przydaje się, jeśli nazwa jest bardzo długa bądź jest tworzona dynamicznie i stała jest tylko jej część.

Niemniej jednak nie zapominajmy, że podając tylko część nazwy linku, istnieje prawdopodobieństwo, że „złapiemy” dodatkowo inne linki, w których nazwach zawiera się podana przez nas fraza.

  1. Lokalizowanie elementu za pomocą selektorów CSS

Lokalizowanie elementu za pomocą selektorów CSS – z wykorzystaniem absolute path:

WebElement password = driver.findElement(By.cssSelector("html body div div form input"));

                                 

lub (to samo co wyżej z nieco innym zapisem)

WebElement password = driver.findElement(By.cssSelector("html > body > div > div > form > input"));

 

 Lokalizowanie elementu za pomocą selektorów CSS – z wykorzystaniem relative path:

WebElement password = driver.findElement(By.cssSelector("input"));

Id Selector

 

 Listing 7.0         

 

 

Lokalizacja elementu password

WebElement password = driver.findElement(By.cssSelector("input#password"));

lub krótszy zapis

WebElement password = driver.findElement(By.cssSelector("#password"));

 

Znak # jest odpowiednikiem atrybutu Id

Class Selector

 

Listing 7.1                

 

 

Lokalizacja elementu password

WebElement password = driver.findElement(By.cssSelector("input.password"));

lub krótszy zapis

WebElement password = driver.findElement(By.cssSelector(".password"));

 Znak . jest odpowiednikiem atrybutu class

 

 Bardziej złożone instrukcje selektorów CSS   

 

Listing 7.2

 

 Lokalizacja elementu submit

WebElement password = driver.findElement(By.cssSelector("input[type='submit'][value='Send']"));

 

Jak widzimy, możemy tworzyć bardziej skompilowane instrukcje, złożone z więcej niż jednego warunku. Tym sposobem lepiej doprecyzowujemy o który element nam chodzi a tym samym redukujemy ryzyko pomylenia elementu.

 

  1. Lokalizowanie elementu za pomocą xpath

Lokalizowanie elementu za pomocą xpath – z wykorzystaniem absolute path

WebElement password = driver.findElement(By.xpath("html/body/div /div/form/ input"));

 

Lokalizowanie elementu za pomocą xpath – z wykorzystaniem relative path

WebElement password = driver.findElement(By.xpath("//input"));

Inne przykłady

Ta instrukcja kodu zlokalizuje drugi input w kodzie (gdyż kompilator zawsze przeszukuje kod sekwencyjnie z góry do dołu*)

WebElement password = driver.findElement(By.xpath("//input[2]"));

 *co nie oznacza, że kompilator nie może przeskakiwać z jednego bloku kodu do innego – patrz pętle, if’y, funkcje

 

 Listing 8.0

 

 

Lokalizacja elementu input z id password

WebElement password = driver.findElement(By.xpath("//input[@id=’password’]"));

 

Lokalizacja elementu z type=submit i value=Send

WebElement password = driver.findElement(By.xpath("//input[@type=’submit’][@value=’Send’]"));

 

Xpath to złożony element kodowania, ale jednocześnie czasami bardzo przydatny – bywa że jest jedyną możliwością zlokalizowania elementu. Dlatego odsyłam do bliższego zapoznania się z tym tematem – polecam bardzo dobry materiał video:

 

 Na zakończenie jeszcze jedna ważna rzecz odnośnie priorytetu lokalizatorów. Zawsze powinniśmy  lokalizować elementy w pierwszej kolejności używając – Id elementu.

Dlaczego??

Na dobrze stworzonej stronie www, każdy element powinien mieć swój Id. Id jest zawsze jednoznaczny, ponieważ w kodzie strony www mogą istnieć tylko unikatowe Id, co oznacza, że nigdynie spotkamy się z sytuacją gdy np. dwa elementy input będą miały to samo Id. Wobec powyższego zyskujemy pewność, że kompilator zlokalizuje dokładnie ten element o który nam chodzi.

Niestety nie wszystkie strony są napisane idealnie i nie każdy element ma przydzielone Id, stąd właśnie pozostałe selektory i metody lokalizowania elementów na stronie.

Skoro napisałem już czego powinniśmy używać najczęściej i w pierwszej kolejności przy lokalizowania elementów na stronach internetowych, to powiem również czego powinniśmy unikać, używać najrzadziej bądź w ostateczności. Takim rozwiązaniami są xpath’y oraz cssSelecotor’y.

Dlaczego??

Ponieważ, kiedy używamy xpath bądź cssSelector wówczas podajemy ścieżki do elementu (mowa to głównie o ścieżkach absolutnych). Co w tym złego? Niby nic, Ale.. w przypadku nawet najmniejszej zmiany w kodzie strony wykonanej przez dewelopera (dodanie jakiegoś diva, usunięcie jakiegoś elementu) , ścieżki ulegają zmianie.. i cytując klasyka „cały nasz misterny plan w…”. Wówczas musimy od nowa zaktualizować ścieżki do naszego elementu, biorąc pod uwagę zmiany wprowadzone w kodzie przez dewelopera.

 

 

6 myśli na “Lokalizacja elementów na stronie internetowej”

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *