Simone D'Amico Blog - Web Design Tutorials – jQuery, CSS, PHP, Wordpress

Quella che segue è una guida per la creazione di test case per browser web, per esempio per creare test case che mostrino bug in HTML, CSS, SVG, DOM o JS.

Ci sono sempre eccezioni a tutte le regole quando si creano test case. La cosa più importante è mostrare il bug senza travisamenti. Questo non è qualcosa che si può fare semplicemente seguendo alcuni passi. Dovete essere consapevoli di quello che state facendo.

Ridurre i test case esistenti

FASE UNO: TROVARE UN BUG

La prima fase nella costruzione di un test case è trovare in primo luogo un bug. Ci sono quattro modi per farlo:

1. Farlo fare a qualcun altro. La maggior parte delle volte i test case che scrivete andranno a coprire quei bug che altre persone hanno analizzato. In questo caso avrete di solito una pagina web dalla resa scorretta, un demo, o un effettivo sito web. Tuttavia è anche possibile che la descrizione del bug non abbia una pagina correlata, ma solo una descrizione del problema.
2. Altrimenti potete trovare un bug voi stessi mentre navigate il web. In questo caso avrete un sito web dalla resa scorretta.
3. Potreste inoltre trovare un bug se uno dei test case esistenti fallisce. In questo caso avrete una pagina web dalla resa scorretta.
4. Da ultimo il bug può essere ipotetico. Potreste scrivere una suite di test su una caratteristica senza sapere se la caratteristica ha un bug o meno, allo scopo di trovare bug nella sua implementazione. In questo caso non avete una pagina web, ma solo un’idea sul probabile problema.

Se avete una pagina web che mostra un problema, andate alla fase successiva. Altrimenti dovrete creare un test case iniziale da voi. Questo aspetto viene trattato nella sezione “Creare test case da zero” più avanti.

FASE DUE: RIMUOVERE LE DIPENDENZE

Avete una pagina dalla resa scorretta.

Fate una copia della pagina e di tutti i file in essa usati, e aggiornate i collegamenti in modo da farli puntare tutti alle vostre copie dei file. Assicuratevi che la resa continui ad essere scorretta, ed in caso contrario scoprite il perché. Create una copia dei file originali il più fedele possibile all’ambiente originale, in modo da riprodurre il bug. Per esempio, invece di caricare i file in locale, metteteli sul server e fate le vostre verifiche da li. Assicuratevi che i tipi MIME siano quelli giusti, ecc.

Una volta che avete approntato la vostra pagina con tutte le sue dipendenze, mostrando al contempo lo stesso problema, incorporate le dipendenze una ad una.

Per esempio, cambiate questa marcatura:

<link rel="stylesheet" href="foo.css">

… in questa:

<style type="text/css">
/* contenuto di foo.css */
</style>

Ogni volta che fate questo, verificate di non aver interrotto alcun URI relativo e che la pagina mostri ancora il problema. Se la pagina cessa di mostrare il problema, o avete fatto un errore nell’inserimento dei file esterni oppure avete trovato un bug correlato al modo in cui era collegato un determinato file. Passate al file successivo.

FASE TRE: RIDURRE IL FILE DI TEST

Una volta che avete inserito quante più dipendenze possibili nel file di test, cominciate a ridurre il file.

Andate a metà del file. Cancellate tutto dalla metà fino alla fine ( senza preoccuparvi se il file è ancora valido o no). Verificate che l’errore ricorra ancora. Se l’errore non ricorre più, isolate la parte e rimuovete la metà superiore o una parte più piccola.

Continuate in questo modo finché non avrete rimosso quasi tutto il file e non siano rimaste 20 righe (o meno) di marcatura, o almeno la parte più piccola necessaria a riprodurre il problema.

Ora, cominciate a pensare. Guardate il file. Rimuovete quelle parti che non hanno chiaramente effetti sul bug. Per esempio se il bug consiste nel fatto che il testo “gli investimenti sono buoni” è rosso ma dovrebbe essere verde, sostituite il testo con la sola parola “test” e verificate che sia ancora del colore sbagliato.

Rimuovete tutti gli script. Se c’è bisogno degli script, provate a simulare quello che fanno gli script e quindi rimuoveteli. Per esempio, sostituite questo:

<script>document.write('<p>test<\/p>')</script>;

..con:

<p>test</p>

…e verificate che il bug sia ancora presente.

Unite insieme tutti i blocchi <style>.

Cambiate la marcatura presentazionale con i CSS. Per esempio, cambiate questo:

<font color="red">

…in:

span { color: red; }  /* nel foglio di stile */

<span>          <!-- nella marcatura -->

Fate lo stesso con gli attributi style="" (rimuovete gli attributi, ed inserite il codice in un blocco <style>).

Rimuovete tutte le classi, ed usate invece i nomi di elemento. Per esempio:

.a { color: red; }
.b { color: green; }

<div class="a"><p class="b">This should be green.</p></div>

…diventa:

div { color: red; }
p { color: green; }

<div><p>This should be green.</p></div>

Fate lo stesso con gli ID. Assicuratevi di usare un DOCTYPE strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Rimuovete tutti gli elementi <meta>. Rimuovete tutti gli attributi lang e qualsiasi altra cosa non necessaria a mostrare il bug.

Se avete immagini, sostituitele con immagini molto semplici, ad esempio:

http://hixie.ch/resources/images/sample

Se uno script è necesssario, rimuovete quante più funzioni potete, unite insieme le funzioni e mettete il codice inline invece che nelle funzioni.

FASE QUATTRO: DARE AL TEST UN OVVIA CONDIZIONE DI SUPERAMENTO

La fase finale è garantire che il test possa essere usato rapidamente. Deve essere possibile osservare il test e determinare se è stato superato o no in circa 2 secondi.

Ci sono molti trucchi per farlo, che vengono trattati in altri documenti come le CSS2.1 Test Case Authoring Guidelines:

http://www.w3.org/Style/CSS/Test/guidelines.html

Assicuratevi che il vostro test mostri il fallimento anche se non è in esecuzione alcuno script. Assicuratevi che il test non appaia vuoto se fallisce.

Creare test case da zero

FASE UNO: TROVARE QUALCOSA DA TESTARE

• Leggete le specifiche.
• Leggetele di nuovo.
• Leggetele ancora, assicurandovi di averle lette fino all’ultimo atomo di lettura.
• Leggetele ancora una volta, questa volta verificando tutti i riferimenti incrociati.
• Leggete le specifiche in ordine casuale, assicurandovi di averne capito ogni singola parte.
• Ora trovate una parte che pensate sia stata implementata in modo errato.
• Trovate un modo di creare una pagina in modo che se il browser la visualizza corrrettamente la pagina appaia come se il test fosse stato superato, e se il browser la visualizza in modo errato, come se il test non fosse stato superato.
• Scrivete la pagina.
• Ora tornate alla fase quattro di cui sopra.

Articolo originale: http://hixie.ch/advocacy/writing-test-cases-for-web-browsers

Autore: Ian Hickson

Traduzione: Gabriele Romanato (3 gennaio 2008)