Strona główna> Blog free time practice>Selenium WebDriver – akcje na elementach na stronie

03.201509

adasdasd

Selenium WebDriver – akcje na elementach na stronie

W >> poprzednim artykule << zaczęliśmy zabawę z tworzeniem testów. Po sprawdzeniu tytułu strony i urla czas na interakcję z elementami.

Zacznijmy od utworzenia nowego modułu w Eclipsie (tworzenie modułów i paczek było w poprzedniej części), w którym będą znajdować się dzisiejsze testy. Nasz przypadek testowy to:

1. Wejść na stronę główną Testspringa.

2. Kliknąć w przycisk w stopce przekierowujący do strony „Kontakt” (zaznaczony na zrzucie poniżej).

3. Sprawdzić czy tytuł strony jest poprawny.

przycisk

Najpierw kod testu:

 

# -*- coding: utf-8 -*-
import unittest

 

from selenium import webdriver

 

class CheckKontaktTitle(unittest.TestCase):
    
    
    def setUp(self):
        self.driver = webdriver.Chrome()        
        self.driver.implicitly_wait(10)
        self.driver.maximize_window()
        self.driver.get("http://testspring.pl")
    
    def test_check_kontakt_title(self):
        driver = self.driver
        driver.find_element_by_css_selector("ul#contact a").click()
        self.assertEqual(driver.title, "Kontakt | Testspring | testerzy, "
                        + u"testowanie oprogramowania, outsourcing testów, "
                        + "profesjonalny software testing",
                        "Page title is not correct: '" + driver.title + "'")
        
    def tearDown(self):
        self.driver.quit()

 

if __name__ == "__main__":
    unittest.main()

 

W kodzie pojawiły się dwie nowe metody:

 

driver.find_element_by_css_selector("ul#contact a").click()

 

Pierwsza i najważniejsza dla całej automatyzacji w Selenium to find_element_by. Dzięki niej driver lokalizuje element, z którym później będzie wchodził w jakieś interakcje (klikanie, przeciąganie, wpisywanie tekstu itp.). Sama metoda jeszcze nic z elementem nie robi, tylko wyszukuje go na stronie. find_element_by znajduje pierwszy element na stronie, który spełnia podane kryterium. Jeśli elementu na stronie nie ma driver poczeka tyle sekund, ile określiliśmy w implicitly_wait() na jego pojawienie się. Jeśli się nie pojawi, test zakończy się w tym momencie błędem. Żeby zobaczyć błąd zmieńmy linię na:

 

driver.find_element_by_css_selector("ul#andrzej a").click()

 

Test zakończy się błędem:

 

NoSuchElementException: Message: no such element

 

Cofnijmy zmianę, żeby test przechodził. Ok, ale skąd wiedzieć co wpisać przy wyszukiwaniu elementów? W tym momencie na pomoc przychodzą takie narzędzia jak Firebug dla Firefox’a czy konsola w Chromie. FF również posiada wbudowaną konsolę, ale nie mogę się do niej przekonać. Przyzwyczaiłem się do Firebuga, który jest darmowym rozszerzeniem przeglądarki. Żeby z niego skorzystać po zainstalowanie naciskamy prawym przyciskiem na poszukiwany element i wybieramy opcję „Zbadaj element za pomocą Firebuga”. Kod poszukiwanego elementu jest podświetlony. Można też włączyć konsolę Firebuga (klikając w jego ikonkę na górnym pasku lub wciskając F12 na klawiaturze) i z pomocą opcji zaznaczania wybrać element. U mnie wyglądało to >> tak <<.

find_element_by umożliwia zlokalizowanie elementu na kilka różnych sposobów. Poniżej omówienie ich:

find_element_by_class_name – wyszukuje pierwszy element posiadający podaną klasę. W naszym przypadku tag <a> nie posiada klasy, więc nie możemy z tego skorzystać.

find_element_by_css_selector – metoda wykorzystana w teście, wyszukuje element za pomocą ścieżki css. W jaki sposób się ja tworzy możecie przeczytać na stronie, do której odnośnik znajduje się na samym końcu artykułu. Ściężkę można też wygenerować w Firebugu. Kliknij prawym przyciskiem na zaznaczonym elemencie kodu i wybierz „Kopiuj ścieżkę css”. Rezultatem dla wybranego przez nas przycisku jest:

 

html.cufon-active.cufon-ready body div#footer div.box div#data ul#contact.menu li#menu-item-214.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-214 a

 

Trochu przydługie, nie? Chrome radzi sobie z tym dużo lepiej. Metoda działania podobna – prawym przyciskiem na elemencie, wybranie „Zbadaj element”, prawym na zaznaczonym elemencie i wybranie „Copy CSS path”. Najlepiej nauczyć się samemu pisać ścieżki, ma się wtedy większe szanse, że ścieżka pozostanie unikatowa dla elementu po zmianach na stronie. ‚ul#contact a’ oznacza „Pierwszy tag <a> znajdujący się w pierwszym tagu <ul> posiadającym atrybut id=”contact”.”.

find_element_by_id – wyszukuje pierwszy element posiadający wskazany atrybut „id”. W naszym przypadku tag <a> nie posiada id, więc nie możemy tego użyć.

find_element_by_link_text i find_element_by_partial_link_text – wyszukuje pierwszy element, z podanym tekstem (całym lub częścią) pomiędzy tagami <a></a>. W naszym przypadku tekst pomiędzy tagami to „NAPISZ DO NAS”, więc moglibyśmy użyć obydwu selektorów. Spróbujcie podmienić linie w teście na którąś z tych:

 

driver.find_element_by_link_text("NAPISZ DO NAS").click()

 

driver.find_element_by_partial_link_text("DO NAS").click()

 

Test w obydwu przypadkach zakończy się sukcesem. partial_link_text może użyć dowolnej części tekstu, może to być początek, środek lub, jak u nas, koniec.

find_element_by_name – wyszukuje pierwszy element posiadający wskazany atrybut „name”. W naszym przypadku tag <a> nie posiada name, więc nie możemy tego użyć.

find_element_by_tag_name – wyszukuje pierwszy element posiadający wskazany tag. W naszym przypadku jest to tag <a>, ale że nie jest to pierwszy tego typu element trzeba by użyć rozbudowanej składni, więc zostanie to na inny raz ;).

find_element_by_xpath – wyszukuje pierwszy element odpowiadający podanemu wyrażeniu Xpath. Jak tworzy się te wyrażenia można przeczytać w poradniku, do którego odnośnik znajduje się na końcu tekstu. Podobnie jak i ścieżkę css Firebug i Chrome mogą ją wygenerować za nas, po zaznaczeniu elementu prawym przyciskiem klikamy na linii kodu i wybieramy „Kopiuj wyrażenie Xpath” dla Firebuga lub „Copy Xpath” dla Chrome’a. Znów tutaj Chrome radzi sobie lepiej, ale również najlepiej samemu nauczyć się pisać xpathy. ;) U nas w teście może to wyglądać tak:

 

driver.find_element_by_xpath("//ul[@id='contact']//a").click()

 

Każdy z wymienionych wyżej selektorów może być użyteczny, ważne żeby wykorzystywać ten, który pozwoli na znalezienie tego elementu, który jest nam potrzebny. Wraz ze zmianami aplikacji selektory mogą przestać znajdować odpowiednie elementy, np. ustawiamy selektor find_element_by_tag_name(„a”), a po jakimś czasie pojawia się wcześniej tag <a> w kodzie i test nam się wywala. Jak się pracuje z jakąś grupą programistów dłuższy czas można przewidzieć jak ich zmiany mogą wyglądać i przy pierwszym pisaniu testu starać się wybrać odpowiedni selektor, ale w praktyce i tak trzeba co jakiś czas poprawiać testy, żeby znajdowały odpowiednie elementy i trzeba się nauczyć z tym żyć. ;)

Druga z wykorzystanych metod to click(). Jak nietrudno się domyślić tą metodą każemy driverowi kliknąć w wybrany element. ;)

Ok, weszliśmy na stronę „Kontakt”, tytuł jest poprawny, ale może poza tytułem wyświetla się pusta strona? Sprawdźmy więc, czy tekst na stronie jest poprawny. Rozbudujmy nasz test o sprawdzenie czy nagłówek na stronie to „Kontakt” (zaznaczony na zrzucie poniżej).

kontakt

Kod naszego testu wygląda tak:

 

# -*- coding: utf-8 -*-

 

import unittest
from selenium import webdriver

 

class CheckKontaktTitle(unittest.TestCase):
    
    
    def setUp(self):
        self.driver = webdriver.Chrome()        
        self.driver.implicitly_wait(10)
        self.driver.maximize_window()
        self.driver.get("http://testspring.pl")
    
    def test_check_kontakt_title(self):
        driver = self.driver
        driver.find_element_by_xpath("//ul[@id='contact']//a").click()
        self.assertEqual(driver.title, "Kontakt | Testspring | testerzy, "
                        + u"testowanie oprogramowania, outsourcing testów, "
                        + "profesjonalny software testing",
                        "Page title is not correct: '" + driver.title + "'")
        self.assertEqual(driver.find_element_by_tag_name("h1").text, "Kontakt",
                        "Page h1 text is not correct: '" +
                        driver.find_element_by_tag_name("h1").text + "'")
        
    def tearDown(self):
        self.driver.quit()

 

if __name__ == "__main__":
    unittest.main()

 

Pojawia się nowa metoda:

 

driver.find_element_by_tag_name("h1").text

 

.text zwraca jako String cały tekst znajdujący się pomiędzy tagami wybranego elementu. Naszym elementem jest <h1>Kontakt</h1> stąd .text zwraca String „Kontakt”, który potem porównujemy w asercji.

Tyle na na dzisiaj, jest trochę do przetrawienia, zwłaszcza jeśli chodzi o css i xpath. Jak zawsze komentarze, pytania, sugestie mile widziane. W następnej części zabawa z formularzem. :)

Andrzej Poniedziałek

Poradniki:

Tworzenie ścieżki css: https://saucelabs.com/resources/selenium/css-selectors

                                         http://www.w3schools.com/cssref/css_selectors.asp

Tworzenie Xpath:          http://www.w3schools.com/Xpath/

  • justine

    hm znowu mam

    „syntaxError: Non-ASCII character ‚xc3′ in file ” w linii ” + u”testowanie oprogramowania, outsourcing testów, „” niby UTF-8

    ale dodane miałam na różne sposoby ” #!/usr/bin/python
    # -*- coding: utf-8 -*-”

  • Olala

    Do justine > Wiem o co chodzi, miałam to samo i wystarczy przenieść kod # -*- coding: utf-8 -*- do pierwszej linii, u mnie na początku był komentarz z datą utworzenia dokumentu i stąd ten błąd.

  • Olala

    Generalnie super instrukcja ułatwiająca wykonanie pierwszych kroków z selenium webdriver. Czekam na kolejny wpis w tym temacie :) Pozdrawiam

testowanie oprogramowania | outsourcing testów | software testing | testerzy