Estendere Selenium per validare pagine web

Come webmaster potreste trovarvi a coordinare un team composto da webdesigner, sviluppatore ed editore. Dovreste quindi verificare per esempio:

  • che il webdesigner abbia aggiustato il css del sito web,
  • che lo sviluppatore abbia realizzato la funzionalità di cercare nel sito o semplicemente quella di ingrandire il testo non appena si prema su un pulsante
  • che l’editore abbia effettivamente inserito un determinato testo nella pagina web.

Tutto ciò è già possibile testarlo con Selenium.

Sempre come webmaster potreste trovarvi nella situazione di validare le vostre pagine web verificando che esse rispettano standard w3c, css o ancora standard di accessibilità. Per fare tutto ciò esistono validatori online per cui indicando l’indirizzo della pagina web vi restituiscono un report di validità (in html o in xml).

Perchè dunque non aggiungere ai vari test fatti da Selenium la possibilità di chiamare i validatori sulla pagina che si sta analizzando ?

Dovete sapere che, poichè i comandi di Selenium sono scritti in javascript, è possibile dunque fare delle chiamate XmlHttpRequest dove indicate l’indirizzo del vostro validatore e farvi restituire il risultato XML da cui per esempio estraete il numero di errori trovato.

Per poter estendere Selenium dovete crearvi un file chiamato user-extensions.js da far caricare al Selenium IDE o da passare come parametro al selenium server. Ricordatevi che dovete caricare tale file nel Selenium IDE ogni qual volta lo modificate (almeno così noto che funziona).

Andiamo ora a vedere un file che definisce il comando ControllaCss che riceve come input l’indirizzo della pagina web da verificare e da come output  uno dei valori presenti nella risposta XML dal css validator:

function chiamaWebService(indirizzo){

 var req  = null;
 if (window.XMLHttpRequest){
 req = new XMLHttpRequest();
 }
 else if (window.ActiveXObject){// per Internet Explorer
 req = new ActiveXObject("Microsoft.XMLHTTP");
 }  

 if (req){
 req.open( "GET", indirizzo, false );
 req.send(null);
 try{
 if ( req.status != 200 ){
 throw { status_code: req.status, status_text: req.statusText, response_text: req.responseText };
 }
 return req.responseXML;
 }
 catch  (e){
 return "errore:"+e.description;
 }
 }
 return "";
};

Selenium.prototype.doControllaCss = function( indirizzo_pagina, risultati ){

 var lista = "uri=" + encodeURIComponent(indirizzo_pagina);    

 var params = [
 {
 "param" : "profile",
 "value" : "css21",
 },
 {
 "param" : "usermedium",
 "value" : "all",
 },
 {
 "param" : "warning",
 "value" : "1",
 },
 {
 "param" : "lang",
 "value" : "en",
 },
 {
 "param" : "output",
 "value" : "soap12",
 },
 ];

 for(var i=0; i<params.length; i++){
 lista +="&" + params[i].param + "=" + encodeURIComponent(params[i].value);
 }

 var url = "http://jigsaw.w3.org/css-validator/validator?";
 var indirizzo = url+lista;

 var rispostaXML = chiamaWebService(indirizzo);

 var array = risultati.split(',');
 for (var i = 0; i < array.length; i++){
 var variabile = array[i].trim();
 var variabile2 = "m:"+variabile;
 storedVars[variabile] = rispostaXML.getElementsByTagName(variabile2)[0].firstChild.nodeValue;
 LOG.info( 'valore ottenuto: ' + storedVars[variabile] );
 }
};

In breve abbiamo una funzione ChiamaWebService che riceve l’indirizzo del web service da chiamare (completo di parametri), effettua l’operazione di GET e restituisce la risposta XML.

La seconda parte definisce il comando ControllaCss (notare il prefisso “do”) e riceve l’indirizzo della pagina da validare e un array di variabili separate da virgola dove memorizzare valori estrapolati dalla rispota XML.

Notate che per i vari parametri chiamo la funzione encodeURIComponent per codificare particolari caratteri.

La parte più importante è l’ultima:

 var array = risultati.split(',');
 for (var i = 0; i < array.length; i++){
 var variabile = array[i].trim();
 var variabile2 = "m:"+variabile;
 storedVars[variabile] = rispostaXML.getElementsByTagName(variabile2)[0].firstChild.nodeValue;
 LOG.info( 'valore ottenuto: ' + storedVars[variabile] );
 }

In pratica dividiamo i vari valori che sono separati dalla virgola, eliminiamo spazi bianchi, aggiungiamo il prefisso “m:” (questo perchè nella risposta xml del validatore css i tag hanno il prefisso “m:”), memorizziamo nell’array storedVars (array usato da Selenium) il valore della variabile estratta con quel particolare tag e poi stampiamo il valore della variabile con il comando di log.

Ora con Selenium IDE carichiamo il file user-extensions.js (vedere tra le opzioni) e creiamo un test case del tipo:

testcss
open /
storeLocation page
controllaCss ${page} validity
verifyExpression ${validity} true

In pratica memorizziamo nella variabile “validity” il valore estratto dalla risposta XML e verifichiamo che tale valore sia “true”. Potremmo anche verificare il valore di “errorcount” per vedere il numero degli errori sia 0.

Come errore dovreste avere qualcosa come:

[error] Actual value 'false' did not match 'true.'

Ora siete pronti a chiamare altri servizi come il w3c validator e Achecker (di cui vi avevo già parlato).

Nota: magari volete installarvi il css validator in locale, potete scaricare il war e farne il deploy su Tomcat o Glassfish (io l’ho fatto su Glassfish 3.0.1, attenzione che dentro il file web-inf.xml dovete invertire le righe mime types con welcome file list).

Achecker, validare le vostre pagine web

Come webmaster vi troverete a migliorare le vostre pagine web sotto diversi punti di vista, uno di questi è di sicuro la validazione delle vostre pagine web per l’accessibilità secondo diversi standard:

  • WCAG 1.0/2.0 A/AA/AAA
  • legge Stanca
  • BITV (standard tedesco)
  • Sezione 508 (standard americano)
  • JIS (standard giapponese)

Probabilmente avrete già la Web Developer Toolbar in Firefox che si aggancia a diversi siti per la validazione WAI e 508.

Tra gli strumenti elencati dal W3C troverete di certo Achecker un software libero sviluppato dall’Advanced Technology Resource Centre dell’Università di Toronto e supportato dalla provincia dell’Ontario (in cui Toronto si trova).

Achecker 1.0 supporta gli standard sopra elencati eccetto JIS, è scritto in PHP (e richiede MySQL) ed è rilasciato con licenza GPL.

Mi sono deciso di installarlo su Xampp la cui ultima versione dispone PHP 5.3 ma a quanto pare Achecker è scritto in PHP 5.2 ho dunque corretto 7 files (fino ad ora) di codice deprecato, principalmente dovrete:

  • Rimuovere il carattere & perchè l’assegnamento in PHP 5.3 avviene già per rifererimento
  • Rimpiazzare la funzione eregi(regularexpression) con preg_match(/regularexpression/i), vedi qui
  • Rimpiazzare la funzione split con explode

Inutile che vi dico i file, vedrete i warning con i vostri occhi durante la fase di installazione. L’installazione è semplice, vi crea in automatico il database e vi chiede di creare una cartella temporanea e i soliti username e password per accedere come amminstratore all’interfaccia.

L’interfaccia è semplice, potete gestire gli utenti/gruppi, le linee guida (quali rendere pubbliche o no), tutti i tipi di controlli da effettuare, in che lingua visualizzare l’interfaccia e il profilo utente.

Nel profilo utente noterete il Web Service ID che è una sorta di chiave per poter usare Achecker in modalità web-service.

Infatti potete passare da url tutti i parametri che volete per la validazione e farvi restituire i risultati in HTML o XML (modalità REST), per esempio:

http://localhost/AChecker/checkacc.php?uri=http%3A%2F%2Fatutor.ca&amp; id=888ca9e3f856baa0120755ecd8ffae6be3142029&output=html&guide=STANCA,WCAG2-AA

dove si passa l’url, il web service id, il tipo di output, le guide da consultare.

Inoltre Achecker viene suggerito come strumento dall’IPG Europeo per testare l’accessibilità dei siti web europei.

Buona validazione !