Sinora, in questa guida al web testing con Python, abbiamo imparato per lo più ad individuare elementi in una pagina web e a leggerne proprietà e contenuti. Non dimentichiamo tuttavia che questa è, appunto, una guida al web testing. Pertanto dobbiamo imparare a scrivere programmi che interagiscano con gli elementi come farebbe un essere umano e valutarne i risultati.
In questa lezione, vediamo come svolgere delle azioni su alcuni elementi - ci dedicheremo per il momento ai pulsanti - e a valutare se l'operazione è andata in porto. Avremo quindi degli esempi che si avvicineranno sempre di più al concetto di esecuzione di test.
Un click su un pulsante può infatti essere considerato una forma di input quindi avremo già a che fare con qualcosa che può innescare azioni.
Il test da svolgere: proviamo un tastierino numerico
Prendiamo come caso d'uso un tastierino numerico creato in HTML e animato da JavaScript: digitiamo pulsanti con il mouse e vediamo apparire i caratteri corrispondenti su un campo input, in sola lettura, che svolge il ruolo di display.
Figura 1. II tastierino numerico
Codice del tastierino
Il codice con cui l'abbiamo generato è il seguente:
<!DOCTYPE html>
<html>
<head>
<title>Tastierino Numerico</title>
<style>
table {
width: auto;
margin: auto;
}
td {
text-align: center;
}
.da0a9{
height:70px;
width:70px;
}
.rigaintera{
height: 50px;
width: 200px;
text-align: right;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<table>
<tr>
<td colspan="3"><input class="rigaintera" id="display" readonly></td>
</tr>
<tr>
<td><button class="da0a9">1</button></td>
<td><button class="da0a9">2</button></td>
<td><button class="da0a9">3</button></td>
</tr>
<tr>
<td><button class="da0a9">4</button></td>
<td><button class="da0a9">5</button></td>
<td><button class="da0a9">6</button></td>
</tr>
<tr>
<td><button class="da0a9">7</button></td>
<td><button class="da0a9">8</button></td>
<td><button class="da0a9">9</button></td>
</tr>
<tr>
<td colspan="3"><button class="da0a9">0</button></td>
</tr>
</table>
<script>
$(document).ready(function () {
$('button').click(function () {
$( "#display" ).val( $( "#display" ).val() +$(this).text() );
});
});
</script>
</body>
</html>Lo scopo del nostro test è partire da una sequenza, impostata in una variabile Python, e azionare i pulsanti in maniera automatica per riprodurre la sequenza sul display. Al termine delle operazioni, valuteremo se il contenuto del display sarà uguale alla sequenza richiesta. Quindi andremo davvero a fare un test sulla nostra semplice webapp!
Il test
Per prima cosa dobbiamo scegliere una strategia di accesso ai pulsanti. Notiamo che ogni pulsante ha associata una classe CSS per il suo dimensionamento ma non ha un id. Pertanto dovremo riconoscere dall'etichetta di quale pulsante si tratta.
Perché non abbiamo usato gli id? Perché quando svolgiamo test su pagine web non possiamo decidere il loro contenuto ma è necessario adattarsi alla struttura delle pagine. Quindi - consiglio personale - quando svolgiamo degli esercizi è meglio non abituarci troppo alla comodità!
Inoltre, sarà abbastanza comune fare affidamento sugli attributi degli elementi messi a disposizione appositamente per gli utenti: le etichette dei pulsanti sono tra questi.
Dinamica del test con Python
Il nostro test si svolgerà in questo modo:
- leggiamo i caratteri della sequenza di test uno alla volta, un normalissimo ciclo andrà benissimo;
- per ogni carattere clicchiamo automaticamente il relativo pulsante;
- alla fine del ciclo leggiamo il contenuto del display e lo confrontiamo con la sequenza iniziale. Se combaceranno decreteremo che il test è stato superato.
Visto che vogliamo dare a questo esempio la forma di un test, seppur semplice e fortemente mirato, alla fine staremo attenti ad avere un vero e proprio responso con la risposta stampata in console. Ecco il codice:
from selenium import webdriver
from selenium.webdriver.common.by import By
driver = webdriver.Chrome()
driver.get('http://localhost/tastierino.html')
#sequenza per la sperimentazione
sequenza='78935627'
# leggiamo la sequenza un carattere alla volta
for carattere in sequenza:
# con XPath individuiamo il pulsante e lo clicchiamo
driver.find_element(By.XPATH,f'//button[normalize-space()="{carattere}"]').click()
# la sequenza dovrebbe essere stata riportata correttamente nel diplay: ne leggiamo il contenuto
if driver.find_element(By.XPATH,f'//input[@id="display"]').get_attribute('value')==sequenza:
print("Test superato")
else:
print("Test FALLITO")
driver.quit()Noi abbiamo scelto per l'esempio XPath per l'individuazione dei pulsanti ma si potrà scegliere qualsiasi altra tecnica accessibile tramite Python. Indipendentemente, da quale approccio avremo scelto verrà comunque rinvenuto il componente della pagina e su questo potremo agire con il metodo click.
Anche per la lettura del display abbiamo optato per XPath ma questa volta abbiamo dovuto interrogare il suo attributo value (ci interesseremo molto ai form nel prosieguo delle guida) e questo restituirà una stringa che sarà immediato confrontare con la sequenza iniziale.
Al termine della prova ci verrà stampato il messaggio "Test superato" pertanto avremo condotto con successo la sperimentazione. Qualora avessimo la possibilità di eseguire delle modifiche alle pagine (tipicamente nello svolgimento di esercizi l'avremo sempre) sarà bene anche modificare la pagina per farla sbagliare un po' e controllare che lo sccript si accorga di un test non superato. Ad esempio, nel nostro tastierino potremmo sabotare Javascript sostituendolo con:
if ($(this).text()=="8")
$( "#display" ).val( $( "#display" ).val() +"A" );
else
$( "#display" ).val( $( "#display" ).val() +$(this).text() );per fare in modo che stampi la lettera "A" al posto del numero 8.
Qual è l'utilità dei test con Python?
Visto che abbiamo svolto un vero e proprio test potremmo iniziare a chiederci: qual è l'utilità vera di avere dei test automatici a disposizione? In fin dei conti, per verificare che il tastierino numerico funziona avremmo potuto fare la prova "a mano". Ebbene: l'utilità di un test automatico è proprio che è automatico.
Apportando modifiche alle pagine o agli script di backend o frontend, si introducono nuove caratteristiche ma a volte si rischia di creare involontariamente dei bug. Avere uno script automatico permette di ripetere "automaticamente" il test ad ogni modifica.
Con il tempo quindi, per ogni applicazione web disporremo di una batteria di test automatici che potremo lanciare ad ogni modifica ed essere sereni che il nostro update avrà solo introdotto funzionalità utili e non bug!
