Testowanie automatyczne
Klikanie w Selenium WebDriver + C# oraz inne interakcje część 3
Podczas testowania aplikacji internetowych symulujemy zachowanie użytkownika. Do podstawowych interakcji ze stroną www można zaliczyć:
- Klikanie w elementy takie jak przyciski, linki, check-boxy;
- Wypełnianie elementów treścią jak inputs, drop-downs;
- Przewijanie strony
W dzisiejszym wpisie postaram się zautomatyzować niektóre z wymienionych interakcji przy pomocy Selenium.
Czego potrzebujemy?
- Visual Studio
- ReSharper (R#) – Dla studentów R# jest darmowy (osoby posiadające ważną legitymację studencką lub adres e-mail w domenie .edu). W innym wypadku możemy ściągnąć wersje trial do ćwiczeń.
- ChromeDriver – WebDriver for Chrome
- Testowa strona. Ja swoje testy będę tworzył na podstawie bloga znajdującego się pod adresem https://studytestingblog.wordpress.com.
Po czym możemy klikać?
W Selenium każdy obiekt IWebElement posiada metodę Click(), która symuluje kliknięcie elementu.
Zdarza się, że podstawowe metody nie wystarczają. Innym sposobem jest klikanie za pomocą akcji. W Selenium akcje pozwalają m.in.:
- Klikać – prawy/lewy klawisz, podwójne kliknięcia;
Wpisywać tekst, w tym znaki sterujące takie jak TAB, ESCAPE, ENTER
- Przewijać do danego elementu
- DragAndDrop – MouseDown + MouseMove + MouseUp
Plus inne…
Może się zdarzyć, że akcje również są niewystarczające do prawidłowego zasymulowania akcji użytkowania. W ostateczności można do źródła strony wstrzyknąć kod JavaScript.
var elem = driver.FindElement(By.ClassName(“something”));
((IJavaScriptExecutor)driver).ExecuteScript(“arguments[0].scrollIntoView(true);”, elem);
Powyższa metoda wykracza jednak poza ramy niniejszego posta. Zachęcam jednak do samodzielnego zgłębienia tematu.
Czego nauczysz się z tego wpisu?
- Jak kliknąć w tytuł pierwszego posta?
- Jak kliknąć w przycisk?
- Jak klikać za pomocą Actions?
- Jak wpisać tekst w element na stronie za pomocą Selenium?
- Jak przewijać stronę do określonego elementu?
Celem testu będzie:
- Kliknięcie w pierwszy element.
- Powrócenie do głównego ekranu.
- Kliknięcie w drugi wpis
- Scrollowanie do sekcji „Comment”
- Wypełnienie pola tekstem (mail, name, treść posta, website).
Żeby to zrobić musimy stworzyć obiekt drivera wraz z wejściem na stronę www.
var driver=new ChromeDriver();
var pageUrl = “https://studytestingblog.wordpress.com/”;
driver.Navigate().GoToUrl(pageUrl);
driver.Manage().Window.Maximize();
Assert.AreEqual(driver.Url, pageUrl);
Tworzymy obiekt zawierający kolekcje wszystkich tytułów postów
var listOfTitles = driver.FindElements(By.CssSelector(“.entry-title a”));
listOfTitles[0].Click();
driver.Navigate().Back();
Gdy uruchomimy test, WebDriver kliknie w tytuł pierwszego postu.
Za pomocą driver.Navigate().Back();
Wracamy do poprzedniej strony.
Drugi tytuł klikniemy z wykorzystaniem akcji w Selenium. Akcji możemy użyć na dwa sposoby:
- new Actions(driver).Click(listOfTitles[1]).Perform();
Tworzymy nową akcję. Jako parametr w metodzie Click() podajemy IWebElement. Istnieje szansa, iż wykonanie kodu w powyższej postaci wyrzuci StaleElementReferenceException. W dokumentacji Selenium odnośnie wyjątku stale_element_reference możemy znaleźć dwa powszechne powody jego wystąpienia:
- Element został całkowicie usunięty (dynamiczne strony www, single page applications)
- Element nie jest już powiązany z drzewem DOM
W naszym przypadku ma miejsca druga sytuacja. Wyjątek ten spowodowany jest przeładowaniem strony (kliknięcie pierwszego posta i powrót). Selenium straciło referencję do obiektu.
Rozwiązaniem problemu może być ponowne wyszukanie elementu:
new Actions(driver).Click(driver.FindElementsByCssSelector(“.entry-title a”)[1]).Perform();
Gdy używamy Actions, to musimy pamiętać, aby na końcu każdej komendy dopisać Perform(). Jest to metoda, która odpowiada za wykonanie „akcji” i jest niejako wyzwalaczem. Actions zgodnie z nazwą, może posiadać kilka różnych, powiązanych ze sobą operacji. Wykonanie powyższego kodu powoduje klikniecie w „Drugi post”.
Kolejnym krokiem jest przewijanie strony do zadanego elementu. W poniższym przykładzie będziemy scrollować do sekcji „Comment”. Stworzymy do tego celu obiekt typu Actions.
Actions actions = new Actions(driver);
// Tworzę zmienną, która będzie odzwierciedleniem elementu „comment” na stronie
var comment = driver.FindElementById(“comment”);
// Przewinięcie strony do zadanego elementu
actions.MoveToElement(comment).Perform();
// Przypisanie wartości atrybutu elementu do zmiennej
var text = comment.GetAttribute(“placeholder”);
// Weryfikacja poprawności
Assert.AreEqual(text, “Enter your comment here…”);
Poniższy kod dodaje wpis na stronie i zamyka przeglądarkę.
comment.SendKeys(“ciekawy wpis”);
var mail = driver.FindElementById(“email”);
mail.SendKeys(“example@example.com”);
var author = driver.FindElementById(“author”);
author.SendKeys(“Michal”);
var websiteUrl = driver.FindElementById(“url”);
websiteUrl.SendKeys(“www.testingplus.me”);
var submitComment = driver.FindElementById(“comment-submit”);
submitComment.Click();
driver.Close();
Podsumowanie
Dziś nauczyliśmy się m.in. jak scrollować, wpisywać tekst do elementu oraz jak klikać. Pozwala to nam na pisanie coraz bardziej zaawansowanych testów. W następnej części chcę pokazać Wam podstawowe sposoby czekania w Selenium WebDriver.
Serdeczne podziękowania dla Przemka Secha, który pomaga mi merytorycznie korygować wpisy. Jeszcze raz dzięki !