Test automatizzati del rendering nei browser

Question

Il selenio o qualsiasi altro strumento automatizzato può verificare il corretto posizionamento degli elementi in una pagina Web?

Ad esempio, quando guardi OnStartups.com in IE 6, il contenuto principale che dovrebbe essere alla destra del menu è invece al di sotto di esso e devi scorrere verso il basso per leggerlo. Puoi eseguire una query e ottenere le coordinate del div così come sono effettivamente visualizzate e puoi ottenere le coordinate del viewport per verificare che l'angolo in alto a sinistra sia effettivamente all'interno dell'area visualizzabile?

Answer 1

Penso che confrontare schermate sia la cosa migliore che puoi fare e temo che non ci siano ancora strumenti affidabili per questo.

Se fossi in te, creerei uno script che naviga attraverso ogni pagina del sito catturando un'immagine su ciascuno e quindi aprirei una cartella con tutti i risultati e probabilmente ci vorrebbe meno di un minuto per controllare 20 o 30 di loro. Sembra davvero stupido, ma a volte l'alternativa più semplice finisce per essere la migliore ...

Answer 2

Temo che il meglio che puoi fare sia selezionare un browser standard e confrontare gli screenshot di altri browser con quello di riferimento.

Non ricordo quello specifico, ma alcuni strumenti come Araxis Merge sono stati in grado di confrontare gli screenshot in un modo abbastanza intelligente.

Answer 3

Il selenio ha delle affermazioni per controllare la posizione e le dimensioni di un elemento:

• assertElementHeight (localizzatore, modello)
• assertElementWidth (localizzatore, modello)
• assertElementPositionLeft (localizzatore, modello)
• assertElementPositionTop (localizzatore, modello)

Un semplice test per verificare il rendering nell'esempio dei PO potrebbe essere quello di scrivere

assertElementPositionTop(//*[@id='main_content'],0)

verificando così se #main_content viene visualizzato nella parte superiore o altrove.