Parliamo ora di Web Testing in Python e form avanzati. Nella lezione precedente abbiamo visto come interagire con i form utilizzando le operazioni principali: inserimento dati nei campi di testo, click sui pulsanti, lettura di valori e - altro aspetto importante - lettura del testo di alert.
I form sono tuttavia ricchi di elementi diversi che permettono agli utenti di formulare al meglio le loro richieste. In questa lezione incontriamo pertanto altre componenti importanti ed impariamo ad interagire con queste mediante Selenium.
Elementi comuni dei form
Oltre a campi di testo in cui possiamo immettere valori mediante il metodo send_keys e pulsanti che possiamo "cliccare" in automatico con click, troveremo molto spesso nei form anche:
- radio button: elementi di forma circolare a mutua esclusione. Tipicamente ne selezioneremo uno e ciò escluderà la possibilità di selezionarne altri dello stesso gruppo;
- checkbox: casella di forma rettangolare che potremo "flaggare" se interessati all'opzione che rappresenta;
- select: il classico menu a tendina drop-down in cui sceglieremo quale voce attivare;
- textarea: campo più esteso per la scrittura di testo.
Form avanzati
Con questi elementi impareremo ad interagire con buona parte delle componenti che troveremo nei form web ma la cosa più interessante è che, senza saperlo, lo sappiamo già fare!
Questi elementi infatti sono essenzialmente tutti pulsanti e campi testo pertanto Selenium ci richiederà di:
- scegliere l'elemento a cui siamo interessati (un radio button, una singola voce del menu a tendina, etc.) utilizzando i classici meccanismi che conosciamo (id, nome del tag, XPath);
- eseguire un click se si tratta essenzialmente di un pulsante (checkbox, option di un menu a discesa, radio button) o immettere dati con
send_keysse è una textarea o un campo di input.
Proviamo subito.
Il form
Scriviamo un semplice form che mostrerà gli elementi menzionati e, al click del button, serializzerà tutto in formato JSON per immetterlo in un div. Da quest'ultimo lo leggeremo e lo stamperemo a console.
Ecco il form:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<form>
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome"><br><br>
<label for="abbonamento">Abbonamento:</label>
<input type="radio" name="abbonamento" id="gold" value="gold">
<label for="gold">Gold</label>
<input type="radio" name="abbonamento" id="premium" value="premium">
<label for="premium">Premium</label> <br><br>
<label for="Titolo di studio">Titolo: </label>
<select name="titolo" id="titolo">
<option>Che studi hai fatto?</option>
<option value="diploma">Diploma</option>
<option value="laurea">Laurea</option>
<option value="laurea_magistrale">Laurea magistrale</option>
</select><br><br>
<label for="commento">Commento:</label><br>
<textarea name="commento" id="commento" cols="35" rows="5"></textarea><br><br>
<input type="checkbox" name="contatto" id="contatto"> Voglio essere contattato<br><br>
<button type="button" value="Invio">Invio</button>
</form>
<div id="risultato"></div>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#risultato").text(
JSON.stringify($('form').serializeArray()))
});
});
</script>
</body>
</html>Come vediamo abbiamo creato una sorta di form per la raccolta di commenti in cui richiediamo alcune informazioni all'utente sfruttando tutti gli elementi delle tipolgie che abbiamo citato.
Il codice Python per i forma avanzati
Partendo dall'ipotesi di avere un oggetto driver pronto, animato con il motore browser che preferiamo, scriviamo questo codice Python:
def test_form(driver):
# ricerchiamo per ID il campo "nome"
nome=driver.find_element(By.ID, "nome")
# selezioniamo per ID il radio button "premium"
driver.find_element(By.ID, "premium").click()
# selezioniamo con XPath l'option corrispondente all'etichetta "Laurea"
driver.find_element(By.XPATH, "//option[text()='Laurea']").click()
# selezioniamo per ID la textarea
commento=driver.find_element(By.ID, "commento")
# selezioniamo la checkbox "contatto"
driver.find_element(By.ID, "contatto").click()
# selezioniamo il pulsante "Invio" per TAG
invio=driver.find_element(By.TAG_NAME, "button")
# inseriamo il testo nel nome e nel commento
nome.send_keys("Achille")
commento.send_keys("Corso molto interessante")
# clicchiamo sul pulsante
invio.click()
# restituiamo il contenuto del form
risultato=driver.find_element(By.ID, "risultato")
return risultato.text
driver.get('http://localhost/form_avanzato.html')
print(test_form(driver))Per comodità di invocazione abbiamo racchiuso il tutto in una funzione e l'abbiamo attivata. In output, vediamo apparire sulla console questa struttura dati:
[{"name":"nome","value":"Achille"},
{"name":"abbonamento","value":"premium"},
{"name":"titolo","value":"laurea"},
{"name":"commento","value":"Corso molto interessante"},
{"name":"contatto","value":"on"}]Come vediamo, siamo riusciti a passare i valori che ci interessano e li abbiamo estrapolati in un array JSON.
I form in realtà, spesso, inviano i dati a backend remoti che attivano elaborazioni. Al momento ci fermiamo qui in quanto il nostro scopo era prevalentemente sperimentare l'interazione a livello di interfaccia visuale ma siamo quasi pronti per poter interagire con una reale applicazione web, completa di più pagine e funzionamento backend in cui inseriremo dati in un form e dovremo capire come creare un test completo per verificarne la corretta elaborazione.
