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:

1. 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 !