Klikanie w Selenium WebDriver + C# oraz inne interakcje część 3

Posted by in Testowanie automatyczne

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? 

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();

testingplus.me

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 !