Automatyzacja testowania funkcji za pomocą Selenium WebDriver

Ten artykuł jest przeznaczony dla twórców stron internetowych, którzy chcą spędzać mniej czasu na testowaniu frontonu swoich aplikacji internetowych, ale nadal chcą mieć pewność, że każda funkcja działa poprawnie. Zaoszczędzi to czas, automatyzując powtarzające się zadania online za pomocą Selenium WebDriver. Znajdziesz krok po kroku przykład automatyzacji i testowania funkcji logowania WordPress, ale możesz również dostosować przykład do dowolnego innego formularza logowania.

Co to jest selen i jak może ci pomóc?

Selenium to framework do automatycznego testowania aplikacji internetowych. Używając Selenium, możesz w zasadzie zautomatyzować każde zadanie w przeglądarce tak, jakby wykonywała je prawdziwa osoba. Interfejs używany do wysyłania poleceń do różnych przeglądarek nazywa się Selenium WebDriver. Implementacje tego interfejsu są dostępne dla wszystkich głównych przeglądarek, w tym Mozilla Firefox, Google Chrome i Internet Explorer.

Automatyzacja testowania funkcji za pomocą Selenium WebDriver

Jakim typem programisty internetowego jesteś? Czy jesteś zdyscyplinowanym typem, który testuje wszystkie kluczowe funkcje Twojej aplikacji internetowej po każdym wdrożeniu. Jeśli tak, prawdopodobnie denerwuje Cię, ile czasu zajmuje to powtarzające się testowanie. A może jesteś typem, który po prostu nie zawraca sobie głowy testowaniem kluczowych funkcji i zawsze myśli: „Powinienem testować więcej, ale wolę tworzyć nowe rzeczy”. Jeśli tak, prawdopodobnie znajdziesz błędy tylko przez przypadek lub gdy Twój klient lub szef na nie narzeka.

Od dłuższego czasu pracuję dla znanego sprzedawcy internetowego w Niemczech i zawsze należałem do drugiej kategorii: Myślenie o nowych funkcjach sklepu internetowego było ekscytujące i wcale mi się nie podobało wszystkie poprzednie funkcje ponownie po każdym wdrożeniu nowego oprogramowania. Tak więc strategia polegała mniej więcej na nadziei, że wszystkie kluczowe funkcje będą działać.

Pewnego dnia odnotowaliśmy poważny spadek współczynnika konwersji i zaczęliśmy kopać w narzędziach do analityki internetowej, aby znaleźć źródło tego spadku. Minęło trochę czasu, zanim stwierdziliśmy, że nasza kasa nie działa poprawnie od czasu poprzedniego wdrożenia oprogramowania.

To był dzień, w którym zacząłem prowadzić badania dotyczące automatyzacji procesu testowania aplikacji internetowych i natknąłem się na Selenium i jego WebDriver. Selenium to w zasadzie framework, który pozwala zautomatyzować przeglądarki internetowe. WebDriver to nazwa kluczowego interfejsu, który umożliwia wysyłanie poleceń do wszystkich głównych przeglądarek (mobilnych i stacjonarnych) i pracę z nimi tak, jak zrobiłby to prawdziwy użytkownik.

Przygotowanie pierwszego testu z Selenium WebDriver

Po pierwsze, byłem trochę sceptyczny, czy Selenium będzie odpowiadać moim potrzebom, ponieważ framework jest najczęściej używany w Javie, a ja z pewnością nie jestem ekspertem od Javy. Później dowiedziałem się, że bycie ekspertem od Javy nie jest konieczne, aby wykorzystać moc frameworka Selenium.

Jako pierwszy prosty test przetestowałem logowanie do jednego z moich projektów WordPress. Dlaczego WordPress? Tylko dlatego, że korzystanie z formularza logowania WordPress jest przykładem, który każdy może śledzić łatwiej, niż gdybym miał odnosić się do jakiejś niestandardowej aplikacji internetowej.

Czego potrzebujesz, aby zacząć korzystać z Selenium WebDriver? Ponieważ zdecydowałem się użyć najpopularniejszej implementacji Selenium w Javie, musiałem skonfigurować swoje małe środowisko Java.

Jeśli chcesz pójść za moim przykładem, możesz użyć wybranego przez siebie środowiska Java. Jeśli jeszcze go nie skonfigurowałeś, sugeruję zainstalowanie Eclipse i upewnienie się, że jesteś w stanie uruchomić prosty skrypt „Hello world” w Javie.

Ponieważ chciałem przetestować logowanie w Chrome, upewniłem się, że przeglądarka Chrome jest już zainstalowana na moim komputerze. To wszystko, co zrobiłem w ramach przygotowań.

Pobieranie ChromeDriver

Wszystkie główne przeglądarki zapewniają własną implementację interfejsu WebDriver. Ponieważ chciałem przetestować logowanie do WordPressa w Chrome, potrzebowałem implementacji WebDriver Chrome: ChromeDriver.

Wypakowałem archiwum ZIP i zapisałem plik wykonywalny chromedriver.exe w lokalizacji, którą mogłem zapamiętać na później.

Konfiguracja naszego projektu Selenium w Eclipse

Kroki, które wykonałem w Eclipse, są prawdopodobnie dość podstawowe dla kogoś, kto dużo pracuje z Javą i Eclipse. Ale dla takich jak ja, którzy nie są z tym tak zaznajomieni, omówię poszczególne kroki:

1. Otwórz Zaćmienie.
2. Kliknij ikonę „Nowy”.
   

   

3. Wybierz kreatora, aby utworzyć nowy „Projekt Java” i kliknij „Dalej”.
   

   

4. Nadaj nazwę swojemu projektowi i kliknij „Zakończ”.
   

   

5. Teraz powinieneś zobaczyć swój nowy projekt Java po lewej stronie ekranu.
   

   

Dodawanie biblioteki selenu do naszego projektu

Teraz mamy nasz projekt Java, ale nadal brakuje Selenium. Więc teraz musimy wprowadzić framework Selenium do naszego projektu Java. Oto kroki, które podjąłem:

1. Pobierz najnowszą wersję biblioteki Java Selenium.
   

   

2. Wypakuj archiwum i przechowuj folder w miejscu, które łatwo zapamiętasz.
3. Wróć do Eclipse i przejdź do „Projekt” → „Właściwości”.
   

   

4. W oknie dialogowym przejdź do „Ścieżki budowania Java”, a następnie zarejestruj „Biblioteki”.
5. Kliknij „Dodaj zewnętrzne pliki JAR”.
   

   

6. Przejdź do właśnie pobranego folderu z biblioteką Selenium. Zaznacz wszystkie pliki .jar i kliknij „Otwórz”.
   

   

7. Powtórz to dla wszystkich plików .jar w libs podfolderów.
8. W końcu powinieneś zobaczyć wszystkie pliki .jar w bibliotekach twojego projektu:
   

   

Otóż ​​to! Wszystko, co zrobiliśmy do tej pory, jest zadaniem jednorazowym. Możesz teraz użyć tego projektu do wszystkich różnych testów i nie będziesz musiał ponownie wykonywać całego procesu konfiguracji dla każdego przypadku testowego. Nieźle schludnie, prawda?

Tworzenie naszej klasy testowej i otwieranie jej w przeglądarce Chrome

Teraz mamy nasz projekt Selenium, ale co dalej? Aby sprawdzić, czy to w ogóle działa, chciałem spróbować czegoś naprawdę prostego, na przykład otwarcia przeglądarki Chrome.

Aby to zrobić, musiałem stworzyć nową klasę Javy, z której mógłbym wykonać swój pierwszy przypadek testowy. Do tej klasy wykonywalnej skopiowałem kilka linii kodu Java i wierzcie lub nie, zadziałało! Magicznie przeglądarka Chrome otworzyła się i po kilku sekundach sama się zamknęła.

Spróbuj sam:

1. Kliknij ponownie przycisk „Nowy” (gdy jesteś w folderze nowego projektu).
   

   

2. Wybierz kreatora „Klasa” i kliknij „Dalej”.
   

   

3. Nazwij swoją klasę (na przykład „RunTest”) i kliknij „Zakończ”.
   

   

4. Zastąp cały kod w nowej klasie następującym kodem. Jedyne, co musisz zmienić, to ścieżka do chromedriver.exe na twoim komputerze:
   

    import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; /** * @author Nils Schuette via frontendtest.org */ public class RunTest { static WebDriver webDriver; /** * @param args * @throws InterruptedException */ public static void main(final String[] args) throws InterruptedException { // Telling the system where to find the chrome driver System.setProperty( "webdriver.chrome.driver", "C:/PATH/TO/chromedriver.exe"); // Open the Chrome browser webDriver = new ChromeDriver(); // Waiting a bit before closing Thread.sleep(7000); // Closing the browser and WebDriver webDriver.close(); webDriver.quit(); } }

5. Zapisz plik i kliknij przycisk odtwarzania, aby uruchomić kod.
   

   

6. Jeśli wszystko zrobiłeś poprawnie, kod powinien otworzyć nową instancję przeglądarki Chrome i wkrótce ją zamknąć.
   

   

Testowanie logowania administratora WordPress

Teraz byłem optymistą, że mogę zautomatyzować mój pierwszy mały test funkcji. Chciałem, aby przeglądarka nawigowała do jednego z moich projektów WordPress, zalogowała się do obszaru administracyjnego i sprawdziła, czy logowanie się powiodło. Więc jakich poleceń potrzebowałem, aby wyszukać?

1. Przejdź do formularza logowania,
2. Znajdź pola wejściowe,
3. Wpisz nazwę użytkownika i hasło w polach wejściowych,
4. Naciśnij przycisk logowania,
5. Porównaj nagłówek bieżącej strony, aby sprawdzić, czy logowanie powiodło się.

Ponownie, po wykonaniu wszystkich niezbędnych aktualizacji kodu i kliknięciu przycisku Uruchom w Eclipse, moja przeglądarka zaczęła magicznie działać sama poprzez login WordPress. Pomyślnie przeprowadziłem swój pierwszy automatyczny test strony internetowej!

Jeśli chcesz spróbować sam, zastąp cały kod swojej klasy Java następującym. Później omówię szczegółowo kod. Przed wykonaniem kodu należy zastąpić cztery wartości własnymi:

1. Lokalizacja pliku chromedriver.exe (jak wyżej),

2. Adres URL konta administratora WordPress, które chcesz przetestować,

3. nazwa użytkownika WordPress,

4. Hasło WordPressa.

Następnie zapisz i pozwól mu działać ponownie. Otworzy Chrome, przejdzie do logowania do witryny WordPress, zaloguj się i sprawdzi, czy nagłówek h1 bieżącej strony to „Pulpit nawigacyjny”.

 import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; /** * @author Nils Schuette via frontendtest.org */ public class RunTest { static WebDriver webDriver; /** * @param args * @throws InterruptedException */ public static void main(final String[] args) throws InterruptedException { // Telling the system where to find the chrome driver System.setProperty( "webdriver.chrome.driver", "C:/PATH/TO/chromedriver.exe"); // Open the Chrome browser webDriver = new ChromeDriver(); // Maximize the browser window webDriver.manage().window().maximize(); if (testWordpresslogin()) { System.out.println("Test Wordpress Login: Passed"); } else { System.out.println("Test Wordpress Login: Failed"); } // Close the browser and WebDriver webDriver.close(); webDriver.quit(); } private static boolean testWordpresslogin() { try { // Open google.com webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/"); // Type in the username webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME"); // Type in the password webDriver.findElement(By.id("user_pass")).sendKeys("YOUR_PASSWORD"); // Click the Submit button webDriver.findElement(By.id("wp-submit")).click(); // Wait a little bit (7000 milliseconds) Thread.sleep(7000); // Check whether the h1 equals “Dashboard” if (webDriver.findElement(By.tagName("h1")).getText() .equals("Dashboard")) { return true; } else { return false; } // If anything goes wrong, return false. } catch (final Exception e) { System.out.println(e.getClass().toString()); return false; } } }

Jeśli zrobiłeś wszystko poprawnie, twój wynik w konsoli Eclipse powinien wyglądać mniej więcej tak:

Zrozumienie Kodeksu

Ponieważ prawdopodobnie jesteś programistą stron internetowych i masz przynajmniej podstawową wiedzę na temat innych języków programowania, jestem pewien, że już rozumiesz podstawową ideę kodu: stworzyliśmy osobną metodę, testWordpressLogin , dla konkretnego przypadku testowego, który jest wywoływany z nasza główna metoda.

W zależności od tego, czy metoda zwróci prawdę, czy fałsz, w konsoli pojawi się informacja, czy dany test zakończył się pomyślnie, czy nie.

Nie jest to konieczne, ale w ten sposób możesz łatwo dodać o wiele więcej przypadków testowych do tej klasy i nadal mieć czytelny kod.

Teraz, krok po kroku, oto, co dzieje się w naszym małym programie:

1. Najpierw mówimy naszemu programowi, gdzie może znaleźć konkretny sterownik WebDriver dla Chrome.
   

    System.setProperty("webdriver.chrome.driver","C:/PATH/TO/chromedriver.exe");

2. Otwieramy przeglądarkę Chrome i maksymalizujemy okno przeglądarki.
   

    webDriver = new ChromeDriver(); webDriver.manage().window().maximize();

3. W tym miejscu wskakujemy do naszej podmetody i sprawdzamy, czy zwraca ona prawdę, czy fałsz.
   

    if (testWordpresslogin()) …

4. Poniższa część naszej podmetody może nie być intuicyjna do zrozumienia:
   Bloki try{…}catch{…} . Jeśli wszystko pójdzie zgodnie z oczekiwaniami, tylko kod w try{…} zostanie wykonany, ale jeśli coś pójdzie nie tak podczas wykonywania try{…} , wykonanie będzie kontynuowane w catch{} . Za każdym razem, gdy spróbujesz zlokalizować element za pomocą findElement , a przeglądarka nie będzie w stanie zlokalizować tego elementu, zgłosi wyjątek i wykona kod w catch{…} . W moim przykładzie test zostanie oznaczony jako „nieudany”, gdy coś pójdzie nie tak i zostanie wykonany catch{} .
5. W podmetodzie zaczynamy od przejścia do naszego obszaru administracyjnego WordPress i zlokalizowania pól na nazwę użytkownika i hasło, szukając ich identyfikatorów. W tych polach wpisujemy również podane wartości.
   

    webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/"); webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME"); webDriver.findElement(By.id("user_pass")).sendKeys("YOUR_PASSWORD");

   
   

   

6. Po wypełnieniu formularza logowania odnajdujemy przycisk przesyłania po jego identyfikatorze i klikamy go.
   

    webDriver.findElement(By.id("wp-submit")).click();

7. Aby wizualnie śledzić test, wstawiam tutaj 7-sekundową pauzę (7000 milisekund = 7 sekund).
   

    Thread.sleep(7000);

8. Jeśli logowanie się powiedzie, nagłówek h1 bieżącej strony powinien teraz brzmieć „Dashboard”, odnosząc się do obszaru administracyjnego WordPress. Ponieważ nagłówek h1 powinien występować tylko raz na każdej stronie, użyłem nazwy tagu, aby zlokalizować element. W większości innych przypadków nazwa znacznika nie jest dobrym lokalizatorem, ponieważ nazwa znacznika HTML rzadko jest unikalna na stronie internetowej. Po zlokalizowaniu h1 wyodrębniamy tekst elementu za pomocą getText() i sprawdzamy, czy jest on równy ciągowi „Dashboard”. Jeśli logowanie się nie powiedzie, nie znajdziemy „Dashboard” jako aktualnego h1 . Dlatego zdecydowałem się użyć h1 do sprawdzenia, czy logowanie się powiodło.
   

    if (webDriver.findElement(By.tagName("h1")).getText().equals("Dashboard")) { return true; } else { return false; } 

   
   

   

9. Jeśli coś poszło nie tak w poprzedniej części podmetody, program przeskoczyłby bezpośrednio do następnej części. Blok catch wypisze typ wyjątku, który wystąpił w konsoli, a następnie zwróci false do metody głównej.
   

    catch (final Exception e) { System.out.println(e.getClass().toString()); return false; }

Dostosowanie przypadku testowego

W tym momencie robi się interesująco, jeśli chcesz dostosować i dodać własne przypadki testowe. Widać, że zawsze wywołujemy metody obiektu webDriver , aby zrobić coś z przeglądarką Chrome.

Najpierw maksymalizujemy okno:

 webDriver.manage().window().maximize();

Następnie osobną metodą przechodzimy do naszego obszaru administracyjnego WordPress:

 webDriver.navigate().to("https://www.YOUR-SITE.org/wp-admin/");

Istnieją inne metody obiektu webDriver , których możemy użyć. Oprócz dwóch powyższych, prawdopodobnie będziesz często używać tego:

 webDriver.findElement(By. …)

Metoda findElement pomaga nam znaleźć różne elementy w DOM. Istnieją różne opcje wyszukiwania elementów:

• By.id
• By.cssSelector
• By.className
• By.linkText
• By.name
• By.xpath

Jeśli to możliwe, zalecam używanie By.id , ponieważ identyfikator elementu powinien być zawsze unikalny (w przeciwieństwie na przykład do className ) i zwykle nie ma na to wpływu, jeśli zmieni się struktura twojego DOM (w przeciwieństwie do, powiedzmy, xPath ) .

Uwaga : Możesz przeczytać więcej o różnych opcjach lokalizowania elementów za pomocą WebDriver tutaj.

Jak tylko zdobędziesz element za pomocą metody findElement , możesz wywołać różne dostępne metody elementu. Najczęstsze z nich to sendKeys , click i getText .

Do wypełnienia formularza logowania używamy sendKeys :

 webDriver.findElement(By.id("user_login")).sendKeys("YOUR_USERNAME");

Użyliśmy click , aby przesłać formularz logowania, klikając przycisk Prześlij:

 webDriver.findElement(By.id("wp-submit")).click();

A getText został użyty do sprawdzenia, jaki tekst znajduje się w h1 po kliknięciu przycisku przesyłania:

 webDriver.findElement(By.tagName("h1")).getText()

Uwaga : sprawdź wszystkie dostępne metody, których możesz użyć z elementem.

Wniosek

Odkąd odkryłem moc Selenium WebDriver, moje życie jako web developera się zmieniło. Po prostu to kocham. Im głębiej zagłębiam się we framework, tym więcej możliwości odkrywam — uruchomienie jednego testu jednocześnie w Chrome, Internet Explorerze i Firefoksie, a nawet na smartfonie, lub automatyczne wykonywanie zrzutów ekranu różnych stron i porównywanie ich. Dziś używam Selenium WebDriver nie tylko do celów testowych, ale także do automatyzacji powtarzalnych zadań w sieci. Ilekroć widzę możliwość zautomatyzowania mojej pracy w sieci, po prostu kopiuję mój początkowy projekt WebDriver i dostosowuję go do następnego zadania.

Jeśli uważasz, że Selenium WebDriver jest dla Ciebie, polecam zajrzeć do dokumentacji Selenium, aby dowiedzieć się o wszystkich możliwościach Selenium (takich jak uruchamianie zadań jednocześnie na kilku (mobilnych) urządzeniach z Selenium Grid).

Z niecierpliwością czekam na wiadomość, czy WebDriver jest dla Ciebie równie przydatny jak ja!