Strumento di regressione CSS?

Question

Sto cercando uno strumento di test di regressione visiva per il refactoring CSS e vedere se ci sono o meno comportamenti involontari a cascata in un sito web.

Idealmente, lo strumento che può eseguire la scansione di un sito Web (anche localmente) e prendere istantanee di ogni pagina e memorizzarlo in un unico repository.

Quando viene eseguito per la seconda volta, mostrerà le pagine visivamente diverse dall'ultima volta che è stata eseguita.

Ancora meglio:

1. se può mostrare la vista XOR overlapper della versione 2 della pagina.
2. confrontare i risultati del rendering di diversi browser (quasi come una funzionalità di confronto Web Microsoft Expression automatizzata).

Answer 1

Verificare Litmus.

Scorrà il tuo sito e catturare schermate è dannatamente vicino a tutti i browser che desideri.

In aggiunta alle funzionalità di base Litmus permette anche di tenere traccia bug, accede a siti privati, e ti permette di pubblicare i rapporti di compatibilità dal test.

Answer 2

Check out Browser Shots. Questo è un servizio gratuito.

Esistono alcune restrizioni sul numero di test che è possibile eseguire ogni giorno come utente gratuito. Ma a differenza di Litmus; è possibile eseguire test su tutti i browser supportati: Litmus consente agli utenti di testare i propri siti Web solo su Internet Explorer 7 e Mozilla Firefox 2.

Answer 3

Quello che hai descritto è esattamente ciò che fa Mogotest. Possiamo accedere al tuo sito, fare screenshot per tutte le pagine che hai configurato e fare un confronto automatizzato usando i principi di Web Consistency Testing.

Teniamo anche una traccia completa della cronologia in modo che possiamo dirti esattamente quando qualcosa si è rotto (e ciò che il tuo sito ha guardato in quel momento) e ancora più interessante, possiamo rilevare quando hai riparato qualcosa. Infine, eseguiamo un'istantanea del codice a ogni esecuzione di test, in modo che possiamo mostrarti esattamente cosa è cambiato per ogni problema.

Ci scusiamo per l'autopromozione di questa risposta. Volevo solo essere completo nell'affrontare quello che stai cercando.

Answer 4

Il mio preferito corrente è WebDriverCSS in combinazione con l'API BrowserStack Automate. Questa coppia di strumenti consente di eseguire test di regressione multi-piattaforma e multi-browser su un'ampia gamma di dispositivi supportati da BrowserStack. Richiede la scrittura del codice ma è molto più più completo di qualsiasi soluzione legata a Phantom o Slimer.

Se stai bene con un vecchio WebKit che è il tuo unico test UA, ecco una bella recensione su CSS regression testing utilizzando PhantomCSS. Il loro esempio di base fornisce esattamente ciò che la domanda originale desiderava: le differenze visive tra due commit.

Per uno strumento più semplice che non richiede codifica (solo configurazione YAML), indico le persone verso Wraith più spesso di PhantomCSS. Dai un voto alla risposta di @ ericcraio se ti piacciono i Wraith e non vuoi scrivere il codice di Casper.

Answer 5

So che questa domanda è stata postata per un po 'ma volevo menzionare un nuovo strumento di regressione CSS chiamato wraith da bbc-news.

http://github.com/bbc-news/wraith

Si utilizza strumenti come phantomJS e ImageMagick.

http://responsivenews.co.uk/post/56884056177/wraith

Answer 6

Sto sviluppando uno strumento di test di regressione CSS che si chiama SUCCSS, si tratta di una NPM globale, open source: https://github.com/B2F/Succss. Atm, puoi leggere qui la sua documentazione completa: http://succss.ifzenelse.net