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).
Emidio Stani
Andrea Stani
Recent Comments