Un elemento imprescindibile delle pagine web sono sicuramente le immagini. Queste sono contenuti non solo decorativi ma che rappresentano spesso il risultato di un'elaborazione. Il prodotto reale della pagina web (si pensi ai contenitori di immagini disponibili in Rete), grafici, etc.
È pertanto importantissimo, nelle attività di web testing, imparare a gestire anche queste affrontandone le relative difficoltà. In questa lezione, ce ne occupiamo discutendo alcuni aspetti che necessariamente le distinguono dai contenuti testuali come le maggiori dimensioni, la modalità di visualizzazione sulle pagine ed il loro scaricamento.
Le dimensioni nella gestione delle immagini
Un aspetto molto importante consiste nel modo in cui le immagini vengono visualizzate e come vengono percepite da Selenium. Trattandosi di elementi spesso di grandi dimensioni, ma che devono comunque essere "impaginati" ovvero contribuire al giusto equilibrio dei contenuti di qualsiasi tipologia multimediale siano, spesso vengono adattate per apparire di una dimensione idonea allo scopo.
Pensiamo ad esempio a cosa succede quando in una pagina divulgativa deve apparire di lato al testo un'immagine che ha lo scopo di illustrare ciò di cui si sta parlando. Le immagini non risiedono all'interno della pagina web come il testo stesso ma vengono incorporate fornendo un link esterno che spesso - ma non sempre - appartiene allo stesso spazio web in cui la pagina HTML risiede.
Quello che in genere appare nella pagina, e che quindi Selenium legge, è una miniatura ovvero una versione ridotta dell'originale. Ma quando facciamo il nostro web testing cosa ci interessa? Scaricare la sua miniatura o la versione originale? Ovviamente dipende dal nostro scopo ma qui ci occupiamo di entrambi i casi affrontando anche la questione del salvataggio su disco del contenuto.
Immagini nelle pagine web
Il caso più semplice della gestione di un'immagine consiste nell'inserire un tag img con attributo src:
<img src="mare-montagne.jpg" alt="Mare e montagne" width="640" height="400">Supponiamo che l'immagine completa abbia una dimensione totale di 1280x800px ma che, per motivi di design, sia stata ridotta nel nostro sito a 640x400px come si evince dagli attributi dell'esempio appena riportato.
Se con Selenium andiamo ad individuare l'elemento web che la contiene e a scaricarlo con l'apposito metodo screenshot, otteniamo sì un'immagine ma la sua versione ridimensionata:
from selenium import webdriver
from selenium.webdriver.common.by import By
# definizione del driver
driver = webdriver.Chrome()
# indirizzo web da personalizzare
url='http://...'
driver.get(url)
# individuazione dell'elemento
img=driver.find_element(By.TAG_NAME,'img')
# scaricamento dell'immagine
img.screenshot('immagine-salvata.jpg')
driver.quit()Il metodo screenshot ci permetterà di scaricare facilmente l'immagine così come appare e quindi nelle dimensioni di 640x400px. Ma come fare a scaricare l'immagine di dimensioni complete e salvarla su disco? In Python, esistono varie opzioni legate a librerie specifiche per il trattamento delle immagini.
Qui ci rivolgiamo ad una soluzione tipica e di uso generale che in molti conoscono e che potrà tornare comoda in molti altri casi: la combinazione tra la libreria requests, per il generico download di contenuti, ed uno strumento molto utile, già incluso nella libreria stanrdard di Python, ovvero shutil specializzato nel salvataggio binario di dati su disco.
Ecco cosa proponiamo:
import requests, shutil
from selenium import webdriver
from selenium.webdriver.common.by import By
# definizione del driver
driver = webdriver.Chrome()
# indirizzo web da personalizzare
url='http://....'
driver.get(url)
# individuazione dell'elemento
img=driver.find_element(By.TAG_NAME,'img')
imgurl=img.get_attribute('src')
# scaricamento dell'immagine
file_name=immagine-dimensioni-reali.jpg'
with requests.get(imgurl, stream = True) as res:
if res.status_code == 200:
with open(file_name,'wb') as f:
shutil.copyfileobj(res.raw, f)
print('Immagine salvata correttamente: ',file_name)
else:
print('Qualcosa è andato storto!')
driver.quit()Come notiamo, dopo aver ottenuto l'elemento web img cerchiamo l'indirizzo completo dell'immagine nel campo src e da lì iniziamo un reale scaricamento con gli strumenti che abbiamo scelto (ripetiamo: è solo una delle soluzioni possibili). Ci accertiamo prima di tutto che il contenuto sia disponibile verificando che la connessione (gestita in modalità streaming) restituisca il codice HTTP 200. Successivamente, tramite shutil, avviamo un vero e proprio flusso di byte verso il disco con scrittura binaria nella posizione del file system che abbiamo scelto. Da notare il flag wb all'apertura del file.
Provando entrambi i metodi noteremo sul nostro disco, e nella stessa cartella dello script Python, depositarsi due file con all'interno la stessa immagine ma di dimensioni diverse.
