Jakiś czas temu Marek Weihs napisał posta „Selenium – upload plików”, do którego dzisiaj chciałbym nawiązać. Marek przedstawił w nim możliwość wykorzystania zewnętrznego narzędzia AutoIT, które umożliwia wykonywanie zadań, niedostępnych z poziomu Selenium. Mimo że AutoIT świetnie radzi sobie z obsługą okienek systemowych, to jest kompatybilny jedynie z systemem Windows. W skrócie –  rozwiązanie to zadziała tylko na Windowsie. Co w przypadku, gdy jednym z wymagań testów automatycznych jest niezależność od platformy/systemu operacyjnego? Co zrobić, aby zautomatyzować upload plików również na Linuxie oraz Macu? Właśnie, co zrobić…?

Rozwiązaniem jest wykorzystanie standardowych poleceń Selenium i wpisanie ścieżki do pliku w element odpowiedzialny za upload plików w aplikacji webowej (o ile umożliwia to technologia, w której aplikacja jest zrealizowana). No dobrze, ale co w przypadku, gdy danego elementu na stronie po prostu nie ma? O ile to możliwe, trzeba go znaleźć.

Jako przykład niech posłuży aplikacja webowa zrealizowana w technologii HTML5.

Powyżej zaprezentowano częściowy zrzut ekranu omawianej aplikacji. Widoczny przycisk Attach otworzy okienko systemowe, a po wyborze pliku, załączy go na stronie. Poza przyciskiem, nie widać elementu, w który można by wpisać ścieżkę do pliku. Sprawdźmy zatem, co kryje się w źródle strony.

Do tego celu skorzystamy z narzędzia Firebug, dodatku do przeglądarki Mozilla Firefox (więcej informacji: https://getfirebug.com/). Po krótkiej chwili, znajdujemy interesujący nas element.

Elementem, który odpowiada za upload plików jest „gwt-FileUpload GA-1WE0BNPB”. Pozostaje sprawdzić, czy zmieniając wartości tego elementu (w tym przypadku nazwę klasy), wpłyniemy na zawartość wyświetlaną na stronie. Po usunięciu nazwy klasy, wynik jest następujący:

Sprawdzamy, czy odkryty element jest widoczny z poziomu Selenium. Uruchamiany Selenium IDE, rozpoczynamy nagrywanie, a następnie załączamy przykładowy plik korzystając z przycisku „Browse”.

Jak widać, Selenium rozpoznaje interesujący nas element i niejako wpisuje „w niego” ścieżkę do pliku, który chcemy załączyć. O ile przekucie tego co zwraca nam Selenium IDE na język programowania, w którym budujemy i rozwijamy testy,  nie jest problemem, o tyle pewnym wyzwaniem jest zaimplementowanie mechanizmu odkrywającego interesujący nas, domyślnie ukryty element.

Rozwiązaniem jest wykorzystanie funkcji języka JavaScript, którą zaimplementujemy w kodzie naszego testu. Jak wiadomo JavaScript umożliwia wykonywanie rozmaitych operacji na elementach znajdujących się na stronie www, chociażby ich lokalizację lub zmianę wartości. Korzystając ze znanego nam źródła strony:

Otrzymujemy prosty skrypt JS:

document.getElementById(‚wd-FileUpload-
56$13631’).getElementsByClassName(‚GA-1WE0BPPB’)[0].children[0].className=”

Pobieramy pierwszy element o id równym ‚wd-FileUpload-56$13631’ i nazwie klasy ‚GA-1WE0BPPB’, a następnie czyścimy wartość nazwy jego klasy.

Ostatnim krokiem jest implementacja wyżej wymienionych kroków (odkrycie ukrytego elementu oraz  upload pliku) w wybranym języku programowania – Javie.

W pierwszym kroku deklarujemy selenijny sterownik przeglądarki Firefox. Następnie deklarujemy JavascriptExecutor, czyli interfejs, który umożliwia wykonywanie skryptów JavaScript z poziomu WebDriver’a i wywołujemy wcześniej omówiony skrypt JS. Ostatnia linia to wpisanie ścieżki do pliku w odkryty element, który rozpoznajemy po nazwie.