Pierwszy test automatyczny – lokalizowanie elementów i wykonywanie akcji
Z tego wpisu dowiesz się jak zlokalizować element na stronie i wykonać na Nim jakąś akcję. Celem naszego testu jest otwarcie nowego okna przeglądarki, pobranie wyszukiwarki bing.com, wyszukanie frazy „kotek”
i przejście do zakładki obrazki.
W jaki sposób lokalizować elementy na stronie?
W celu zlokalizowania elementu na stronie będziemy musieli prześledzić jej strukturę HTML. Selenium dostarcza nam szereg technik, które pozwalają nam znaleźć jakiś element korzystając z pewnych właściwości HTML tego elementu. Do technik lokalizowania elementów na stronie należą między innymi wartość id, nazwa klasy, nazwa tagu, tekst linku czy bardziej skomplikowane techniki jak xpath i css. W naszym przypadku elementy będzie można zlokalizować za pomocą wartości id, która jest najlepszą z technik w przypadku, gdy wartość tego atrybutu jest unikalna.
Jak podejrzeć kod HTML danego elementu?
W celu podejrzenia strukrury HTML musimy skorzystać z narzędzi deweloperskich w przeglądarce internetowej. Otwieramy przeglądarkę, przechodzimy na stronę, której strukturę chcemy sprawdzić i naciskamy na przycisk F12.
Spowoduje to otwarcie tzw. narzędzi deweloperskich, które pozwalają Nam między innymi na podglądanie struktury HTML, ruchu sieciowego czy też korzystanie z konsoli. W celu podejrzenia struktury HTML powinniśmy przejść do zakładki Elements, a naszym oczom powinna ukazać się struktura całej strony.
Możemy ręcznie szukać konkretnego elemetu w całej strukturze. Pole tekstowe to tag „input”, ale takich tagów może być wiele na danej stronie. Jeżeli szukamy konkretnego elementu na danej stronie warto skorzystać z inspektora (ikona oznaczona na czerwono).
Znalezienie pola tekstowego
i wpisanie szukanej wartości
Aby znaleźć konkretny element na stronie za pomocą inspektora wybieramy jego ikonkę w lewym górnym rogu narzędzi deweloperskich ( ikona oznaczona na czerwono) . Następnie najeżdzamy kursorem na interesujący nas element i w niego klikamy. Powoduje to podświetlenie konkretnego fragmentu kodu HTML odpowiedzialnego za dany element na stronie. Pozwala nam to znaleźć charakterystyczną wartość id, klasy czy atrybytu name dla danego elementu na stronie.
W naszym przypadku pole wyszukiwania posiada atrybut id o wartości „sb_form_q”. Wykorzystamy tę wartość w kodzie, aby znaleźć ten element i na niego kliknąć. Jak znaleźć element na stronie korzystając z Selenium? Mamy do tego celu dedykowaną metodę, która pozwala Nam również określić technikę lokalizowania elementu. Metoda ta dostępna jest w obiekcie typu WebDriver i nazywa się findElementBy(). Do tej metody musimy przekazać technikę lokalizowania elementu. W naszym przypadku będzie to id, a konkretnie rzecz ujmując: By.id(„sb_form_q”). W połączeniu z metodą findElementBy() otrzymamy zapis:driver.findElement(By.id("sb_form_q"));
Jeżeli wszystko zrobiliśmy dobrze to nasz kod powinien działać i znajdować element na stronie. Ale to, że znależliśmy jakiś element na stronie nic nam nie daje. Żeby zobaczacyć efekt musimy wykonać na znalezionym elemencie jakąś akcję. Spróbujmy kliknąć na ten element wywołując na nim metodę click().driver.findElement(By.id("sb_form_q")).click();
W kolejnej linijce spróbujemy wprowadzić jakąś frazę w pole wyszukiwania. Aby to zrobić powinniśmy skorzystać z metody sendkeys(„Kotek”). Cała linijka w naszym kodzie będzie wyglądała następująco:driver.findElement(By.id("sb_form_q")).sendKeys("Kotek");
Zasymulowanie naciśnięcie przycisku Enter
Po wpisaniu frazy w pole wyszukiwania musimy w jakiś sposób rozpocząć wyszukiwanie. Mamy na to dwa sposoby. Albo klikniemy na znaczek „lupki”, albo zasymulujemy naciśnięcie przycisku Enter. W celu naciśnięcie „lupki” powinniśmy otworzyć narzędzia deweloperskie i za pomocą inspektora odnaleźć na ekranie kod HTML odpowiedzialny za lupę. Następnie wyszukujemy w strukturze HTML wartość id dla tego elementu i w kodzie próbujemy na niego kliknąć. Druga opcja to zasymulowanie naciśnięcia przycisku Enter. Cała procedura polega na „wysłaniu” przycisku enter do pola tekstowego. Jak to zrobić? Podobnie do wpisywania wartości „kotek”, ale zamiast tekstu do metody przekazujemy Keys.Enter. Cały zapis wygląda następująco:driver.findElement(By.id("sb_form_q")).sendKeys(Keys.ENTER);
Przejście do zakładki obrazki
Po wykonaniu poprzedniej akcji powinniśmy znaleźć się na stronie z wynikami. Tak jak w przeglądarce od Google mamy tutaj również różne zakładki. Druga z nich to obrazki i właśnie do tej zakładki chcielibyśmy przejść. Aby to zrobić musimy znaleźć id tego elementu. Przechodzimy na stronę z wynikami i otwieramy narzędzia deweloperskie, a następnie za pomocą inspektora znajdujemy zakładkę obrazki i kopiujemy wartość id dla tego elementu. W naszym kodzie lokalizacja elementu i kliknięcie na niego będzie realizowane za pomocą następującej linijki \:driver.findElement(By.id("b-scopeListItem-images")).click();
Pobranie tytułu i jego weryfikacja
Teraz spróbujemy zweryfikować czy udało nam się przejść do odpowiedniej zakładki. Możemy to zrobić sprawdzając tytuł naszej strony. Po przejściu do zakładki obrazki tytuł naszej strony powinien być podobny do:”Kotek – Bing images”. Żeby zapisać weryfikację w kodzie musimy najpierw pobrać tytuł strony korzystając z metody driver.getTitle(), a następnie za pomocą asercji z biblioteki TestNG sprawdzimy czy ma on odpowiednią wartość.
Asercja to specjalna metoda która porównuje dla Nas dwie wartości. Jeżeli wartości są różne to test zakończy się niepowodzeniem. Jeżeli wszystko będzie dobrze to test zakończy się sukcesem. Nasza asercja może wyglądać następująco:Assert.assertEquals(driver.getTitle(),"Kotek - Bing images");
Zamknięcie przeglądarki
Gdy wszystko poszło dobrze i posiadasz poprawny kod to Twój test powininen świecić się na zielono. Zauważysz jednak, że po wykonaniu wszystkich akcji okno przeglądarki pozostaje otwarte. Na końcu testu należy zamknąć okno przeglądarki i oczywiście można to zrobić w bardzo łatwy sposób korzystając z metody quit(). driver.quit();
Warto też dodać linijkę kodu, która zabezpieczy Nas przed sytuacją w której strona będzie dłużej się ładowała. Całość kodu naszego testu będzie wyglądała następująco:
@Test
public void openGooglePage() {
System.setProperty("webdriver.chrome.driver","C:\\Users\\downloads\\chrome driver.exe");
WebDriver driver = new ChromeDriver();
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
driver.get("https://www.bing.com");
driver.findElement(By.id("sb_form_q")).click();
driver.findElement(By.id("sb_form_q")).sendKeys("Kotek");
driver.findElement(By.id("sb_form_q")).sendKeys(Keys.ENTER);
driver.findElement(By.id("b-scopeListItem-images")).click();
Assert.assertEquals(driver.getTitle(),"Kotek - Bing images");
driver.quit();
}
Podsumowanie
W tej wiadomości poruszyłem bardzo dużo tematów. Dowiedziałeś/aś się jak zlokalizować element na stronie i jak wykonać na Nim jakąś akcję. Powiedzieliśmy sobie jak sprawdzić strukturę HTML na dowolnej stronie za pomocą narzędzi deweloperskich i jak zlokalizować interesujący nas element za pomocą inspektora.Na końcu dodaliśmy asercję i udało się nam zamknąć przeglądarkę po wykonanym teście. W związku z dużą ilością wiedzy możesz natrafić na pewne problemy, które z chęcią pomogę Ci rozwiązać 🙂
