Test delle applicazioni Web d3 (e altre basate su SVG)

Ho un'applicazione Web che utilizza la libreria d3 per alcune visualizzazioni SVG complesse.Test delle applicazioni Web d3 (e altre basate su SVG)

Ho prove automatizzate per il mio codice lato server e modelli JavaScript (io uso un'architettura simile a MVC nel mio JavaScript). Questi vengono eseguiti su un server CI Jenkins su ogni commit. Ora ho bisogno di capire come testare le mie opinioni.

Come gli altri affrontano questo problema e quali strumenti utilizzate?

Alcuni pensieri che ho avuto ...

serializzare l'SVG generato in un file e confronta con una linea di base
automaticamente catturare un'immagine del browser e fare un'immagine diff
Qualcos'altro?

Grazie!

fonte

2013-04-04 RichH

Cosa avete finalmente fatto voi ragazzi? Abbiamo problemi simili in cui generiamo grafici con HighCharts in SVG e vogliamo assicurarci che i grafici siano corretti. Stiamo davvero lottando. –

@JohnMcdock - Sono andato con l'approccio che ho salvato sotto con Selenium/ImageMagick e ha funzionato bene. http://stackoverflow.com/a/15823644/16779 – RichH

Suona come Selenium dovrebbe fare quello che stai cercando. Guida il browser Web e quindi ti consente di verificare cosa accade realmente nel browser invece di presupporre che SVG sia reso correttamente. Ti permette di specificare i test unitari come una serie di clic/tratti chiave e si integra abbastanza bene con Jenkins.

fonte

2013-04-04 08:30:31

ma sembra che voglia testare l'output visivo in modo automatico, non solo il comportamento (clic e sequenze di tasti) – explunit

Puoi farlo anche controllando la struttura del documento. Sono d'accordo che potrebbe essere ancora meglio avere una versione serializzata di SVG a causa della sua complessità, ma ciò può essere fatto anche all'interno del framework. –

Ho usato il Selenium 2 piuttosto pesantemente e penso che sia fantastico. In questa situazione ho bisogno di controllare le posizioni, i colori e la trasparenza di migliaia di elementi SVG in modo che i controlli degli elementi risultassero pesanti a meno che non fosse una forma serializzata. Se scendo lungo il percorso di cattura dello schermo, Selenium sarebbe probabilmente una buona scelta per catturare le immagini. – RichH

L'esempio fornito è per testare l'output grafico. Per questo è possibile utilizzare uno strumento diff screenshot come PhantomCSS, Sikuli o roll-up proprio con Resemble.js.

Ma se la tua domanda è più genrally sui test apps d3.js/SVG-based, come suggerisce il titolo, si dovrebbe guardare la D3 test suite. La maggior parte dei test non ha nemmeno bisogno di un dispositivo html perché fondamentalmente sta testando l'API. Se la cosa più importante per te è la consistenza del risultato visivo, vai con uno strumento diff screenshot. Per la navigazione e il flusso UX, si sta meglio con l'automazione del browser come Selenium. Ma per i test unitari, in cui si desidera garantire un'API coerente e un codice modulare, la maggior parte dei framework di test con spie, fixture e capacità di simulazione si occuperanno (ad esempio, , Vows, Mocha).

fonte

2013-04-04 22:25:00 Biovisualize

Ritengo che la suite di test d3 sia simile a come collaudo attualmente i miei modelli. Spingo la maggior parte della logica per la visualizzazione nel modello e la vista in realtà gestisce solo le specifiche del rendering. Uso anche il selenio per la navigazione. Sto esaminando PhantomCSS in questo momento in quanto potrebbe essere un'ottima soluzione per il controllo di visualizzazioni complesse. Grazie! – RichH

La soluzione attualmente sto contemplando è ...

Creare un file semplice (CSV) con un elenco di URL per catturare, insieme a una regione di taglio (vedi 3)
carico ogni degli URL e capture screenshots with Selenium
Ritaglia la visualizzazione fuori dal screenshot con ImageMagick (quindi stiamo solo testare la visualizzazione e non l'interfaccia utente completa)
confrontare le immagini a linee di base usando ImageMagick
generare un report HTML con i vecchi, nuovi e diff immagini (per le immagini che sono diverse)
generare output XML JUnit per il server CI

fonte

2013-04-04 23:45:37 RichH

del browser Cattura e verificando il grafico è un buon test. Ma ritengo che questa sia una responsabilità della D3 stessa rispetto al nostro codice.

Avevo anche una domanda simile. (My Question).Si prega di controllare la risposta che ho postato lì.

fonte

2014-02-17 04:55:31 user1401472

Test delle applicazioni Web d3 (e altre basate su SVG)

risposta

Problemi correlati