Frontend testen met Selenium en Python

2019-01-02

Inleiding

Het is een goed idee om zoveel mogelijk facetten van een applicatie onder automatische test te hebben staan. Meer is beter in dit geval. Je wilt dus ook tests draaien tegen een frontend aan. Sterker nog: bij een applicatie met een frontend zou de ultieme integratietest tegen de frontend aan moeten ‘praten’.

Natuurlijk kun je moderne frameworks zoals Angular en React testen met faciliteiten zoals Jasmine of Mocha. Hiermee worden doorgaans de afzonderlijke componenten van een app getest. Dit zijn dus eigenlijk unit tests. Nog beter is om daarnaast ook de ‘gebruiker van de frontend’ te integreren in het testproces. Dit kan met Selenium. Selenium automatiseert browser acties. Dit gaat van simpelweg het bezoeken van de site tot ook daadwerkelijke interactie, zoals het drukken op een knop.

De opzet is dan als volgt:

Het vereist wat configuratie- en uitzoekwerk om dit aan de praat te krijgen. Dat laatste heb ik al gedaan en deel ik graag met je in deze post :-).

Voorbereiden van Selenium op Debian met Python

Wij draaien onze applicaties op Debian instanties: lekker stabiel en met een enorme community om je eventueel te helpen. Debian heeft alleen standaard geen grafische schil; je kunt dus niet even een browser openen en gebruiken. Gelukkig zijn er browsers die je headless kunt draaien. Dat houdt in dat er net gedaan wordt alsóf een website gerenderd wordt (tot en met javascript aan toe) zonder dat de rendering daadwerkelijk naar RGB kleuren voor pixels wordt omgerekend. PhantumJS is een bekende browser die dit kan, maar omdat daar de ontwikkeling van is gestopt heb ik Chrome gebruikt. Je moet deze wel eventjes installeren:

apt-get install chromium

 

Daarnaast heb je een driver nodig om met de browser te kunnen werken. Deze kun je bijvoorbeeld hier downloaden:

https://chromedriver.storage.googleapis.com/index.html

Zet deze driver op een plek waar je er met de test bij kunt.

Ten slotte - omdat we met Python werken – moet je Selenium voor Python binnenhalen. Deze staat keurig netjes in PyPi, dus:

pip install selenium

 

Hiermee zijn de voorbereidingen getroffen, we kunnen aan de slag!

Python + Selenium test

Vanaf hier ben je vrij om een Python test framework te kiezen, bekende zijn pytest en unittest. Hoe deze frameworks werken laat ik buiten scope, deze blogpost is al lang zat ;-). Wat in elk geval belangrijk is, is dat je de driver opstart met de juiste configuratie:

from selenium import webdriver
from selenium.webdriver.chrome.options import Options

options = Options()
options.add_argument('--headless')
options.add_argument('--disable-gpu')
options.add_argument('--no-sandbox')

driver = webdriver.Chrome(executable_path='/path_naar_driver/chromedriver_linux64',
                 options=options)

 

Nu rest ons alleen nog het opstarten van de browser op het juiste adres. Bijvoorbeeld:

driver.get('http://localhost:8080/chuck_norris')

 

De browser start nu op. Je kunt nu gebruik maken van de Python Selenium API. Je kunt bijvoorbeeld elementen op basis van css class name opvragen (om te testen of ze getoond worden):

elements = Driver.find_elements_by_class_name('awesomeness')

 

En dat is het! Appeltje eitje toch?

Conclusie

Je kunt eenvoudig frontend (integratie)testen met Python en Selenium op Debian. Met wat kennis van CI heb je dit ook in een mum van tijd geautomatiseerd.


Bekijk alle posts van Ramon