Scrivere i primi test frontend con python? Si Può!

Transcript

1 Scrivere i primi test frontend con python? Si Può! Fiorella De Luca - 04 Maggio

2 Chi sono? Ingegneria informatica presso L Università di Roma Tre partecipante al GSOC ( Google Summer Of Code) 2017 per la community OpenWisp mentore per il Google Code-In 2017 coach e organizzatrice per la community Django Girls organizzatrice della community PyRoma da Ottobre 2017 lavoro come Q/A presso l azienda Nephila

3 Che cosa sono i test Frontend? Il test front-end testa l'interfaccia grafica dell utente(gui), la sua funzionalità e l'usabilità del sito Web o dell'applicazione.

4 Che cos è Selenium? è una suite di test automatizzata per applicazioni Web. non è solo un singolo strumento, ma una suite di software. Ha quattro componenti: Selenium Integrated Development Environment (IDE) Selenium Remote Control (RC) WebDriver Selenium Grid

5 Perchè utilizzare Selenium IDE facile da installare come plugin open source. può creare test case semplicemente registrando la navigazione nel browser. permette l esportazione di test case in Python (non più disponibile con il nuovo aggiornamento).

6 Installare Selenium IDE può essere installato usando il Browser Firefox o Chrome e aggiungendolo alle estensioni Selezionare Add to Firefox

7 Interfaccia di Selenium IDE Tasto registra Comandi di esecuzione interfaccia di inserimento comandi Finestra di Log e Reference

8

9 Esempio

10 Esempio

11 I comandi più utilizzati open - aprire una pagina click - cliccare un' oggetto della pagina type - inserire dei valori nella textarea select - selezionare un valore store - salvare una variabile

12 "Visto che siamo pythonisti, possiamo usare python per fare le stesse cose?"

13 Perchè Python? linguaggio di programmazione ad alto livello semplice da usare e da imparare flessibile, adatto a molti contesti e applicazioni, dalla scienza al web

14 Installazione Disponibile su tutte le piattaforme: Linux : sudo apt-get install python3.6 Windows e Mac Os X : download del pacchetto dal sito ufficiale

15 Splinter Splinter è uno strumento per testare applicazioni web usando Python. Consente di automatizzare le azioni del browser, visitare gli URL e l'interazione con i loro elementi. Documentazione -

16 Splinter Splinter è solo uno strato di astrazione di Selenium. Semplifica la scrittura dei test di automazione per le applicazioni Web.

17 Selenium VS Splinter elem = browser.find_element.by_name('name') elem.send_keys('molly') browser.fill('name', 'molly')

18 Caratteristiche open source semplice da installare supporta la maggior parte dei browser API semplici ed intuitive

19 Installazione Bisogna semplicemente dare questo comando nel prompt dei comandi: $ pip install splinter

20 Splinter : WebDrivers Chrome Web driver Firefox Web driver Remote Web driver

21 Esempio from splinter import Browser with Browser() as browser: url = " browser.visit(url) browser.fill('q', 'Fiorella De Luca twitter') browser.find_by_name('btnk').click()

22 Esempio Come prima cosa importiamo Browser e lo inizializziamo : from splinter import Browser with Browser() as browser:

23 Esempio Per visitare il sito web utilizziamo il metodo browser.visit : url = " browser.visit(url)

24 Esempio Dopo aver caricato la pagina, è possibile eseguire azioni, come il clic, l'inserimento di testo, ecc : browser.fill('q', 'Fiorella De Luca twitter') browser.find_by_name('btnk').click()

25 Esempio Un qualunque elemento, tipo il bottone, può essere identificato tramite: selettori css, xpath, id, tag o name. browser.find_by_name('btnk').click()

26

27 Esempio from splinter.browser import Browser browser = Browser('chrome') url = " browser.visit(url) browser.driver.save_screenshot('screenshot.png') browser.quit()

28

29 Esempio from splinter import Browser with Browser() as browser: # Visit URL url = " browser.visit(url) browser.fill('q', 'Django documentation') # Find and click the 'search' button browser.find_by_name('btnk').click() if browser.is_text_present(' print("yes, the official website was found!") else: print("no, it wasn't found. :( )")

30 E se volessi integrarlo negli unit test? from splinter import Browser from unittest import TestCase class SplinterTest(TestCase): def test_django_docs(self): with Browser() as browser: # Visit URL url = " browser.visit(url) browser.fill('q', 'Django documentation') # Find and click the 'search' button browser.find_by_name('btnk').click() self.asserttrue(browser.is_text_present(' self.assertfalse(browser.is_text_present('

31 Esempio from splinter import Browser from unittest import TestCase import time class SplinterTest(TestCase): def test_login(self): with Browser() as browser: # Visit URL url = " browser.visit(url) browser.fill('username', 'molly') browser.fill('password', 'ff') browser.find_by_value("login").click() self.asserttrue(browser.is_text_present('activate notifications on your devices and give us the opportunity to reach you on your smartphone, too.'))

32 Conclusioni Splinter is cool Splinter è veloce in termini di tempo di sviluppo Splinter è semplice

33