C'è un modo per testare i CSS reattivi con il selenio?

Question

Gli sviluppatori della mia azienda hanno implementato il nostro sito Web come reattivo CSS, e sono confuso su come sfruttare Selenium per testare il loro lavoro. Ho utilizzato Selenium WebDriver (Selenium 2) con Ruby per altri aspetti.

Dopo aver fatto qualche ricerca online, mi sono imbattuto in più strumenti, ma nessuno vale la pena di automatizzare poiché ... aaa ... sono solo strumenti web per controllare manualmente con diverse dimensioni dello schermo.

Alcuni esempi -

1. Device Testing for Resonsive CSS Layouts (Manual)
2. Responsinator
3. Responsive.is
4. Responsivepx (molto meglio come più controllo)

Ma posso realizzare quanto sopra molto facilmente utilizzando Selenio come bene usando sel2/ruby ​​

@driver.manage.window.resize_to(480, 725) #iphone potrait 

---

bisogno di aiuto con

• Come testare in realtà se il CSS è "sensibile" automaticamente?
• Quali sono gli attributi/aspetti comunemente utilizzati per verificare se la pagina risponde al ridimensionamento della finestra?
• Qualcuno ha utilizzato il selenio nel reattivo CSS del QA?

Answer 1

Posso pensare a due modi per farlo.

Uno - per ciascun elemento Web è possibile controllarne dimensioni, posizione, visibilità, ecc. Dopo ogni ridimensionamento è possibile confrontare tali parametri con alcuni valori precedentemente specificati per verificare se il layout è stato modificato.

Secondo confronto immagine. Dopo ogni ridimensionamento puoi prendere uno screenshot della pagina e confrontarlo con il modello precedentemente salvato. Esistono varie librerie di confronto immagini per ottenere ciò. Nella nostra azienda usiamo ImageMagick. Il confronto delle immagini tuttavia non è adatto per le pagine in fase di sviluppo né per quelle con contenuti in evoluzione. È possibile aggirare questo problema nascondendo le parti della pagina che sono soggette a modifiche con javascript (questo è fattibile con WebDriver).

Devo ammettere che non ho mai avuto l'opportunità di testare le pagine reattive né manualmente né automaticamente, quindi quanto sopra sono solo le mie idee. Uso il confronto delle immagini per testare pagine "normali", non sono sicuro che sia adatto anche per le pagine reattive.

EDIT

Purtroppo non so Ruby. Di seguito un esempio in Java Spero che tu possa capirlo e tradurre in Ruby in qualche modo. Il codice stampa semplicemente la dimensione e la posizione di ogni elemento dall'elenco.

org.openqa.selenium.Point point; 
org.openqa.selenium.Dimension dimension; 

List<WebElement> elementsList = driver.findElements(By.xpath("//some/xpath")); 

for (WebElement element : elementsList) 
{ 
    point = element.getLocation(); 
    dimension = element.getSize(); 
    System.out.println("Element name: " + element.getTagName()); 
    System.out.println("Element size: " + dimension.height + "x" + dimension.width); 
    System.out.println("Element location: " + point.x + ":" + point.y); 
} 

nota che ogni chiamata di getLocation() e getSize() causa js da eseguire (per ottenere i valori) e costa tempo.Ecco perché dovresti fare una sola chiamata per elemento, non usare qualcosa come element.getSize(). Height + "x" + element.getSize(). Width - ci vorrebbe il doppio del tempo rispetto all'esempio sopra.

In Ruby i suddetti metodi sono chiamati element.location e element.size

Answer 2

V'è ora una soluzione per test automatizzati di responsive design - Galen quadro. Ho lavorato a uno strumento che permettesse di testare il design reattivo della pagina web e anche il layout del sito Web per la compatibilità cross-browser. Lo strumento è disponibile qui http://galenframework.com

Utilizza il selenio per aprire una pagina Web in un browser, ridimensionare la finestra del browser fino alla dimensione necessaria e quindi ottenere la posizione degli elementi nella pagina. Ha una speciale sintassi per descrivere l'aspetto pagina su dispositivi diversi (dimensioni del browser)

Ecco un piccolo esempio di test di base scheletro pagina web:

# Objects definition 
===================================== 
header     id header 
menu     css #menu 
content     id content 
side-panel    id side-panel 
footer     id footer 
===================================== 


@ all 
------------------------------- 
header 
    inside: screen 0px top left right 

menu 
    centered horizontally inside: screen 
    below: header 0px 

content 
    below: menu 0px 
    inside:screen 0px left 

@ desktop 
-------------------------------- 
side-panel 
    below: menu 0px 
    inside: screen 0px right 
    width: 300px 
    near: content 0px right 
    aligned horizontally top: content 

@ mobile 
-------------------------------- 
content, side-panel 
    width: 100% of screen/width 


side-panel 
    below: content 0px 

Successivamente è possibile eseguire test o in un singolo comando o puoi anche creare una suite di test separata dove hai più azioni da eseguire (ad esempio, inserire javascript personalizzato, o fare qualcosa con WebDriver ecc.). Per eseguire l'esempio precedente con un singolo comando, fai come segue:

galen check homepage.spec --url "http://example.com" --size "400x600" --include "mobile,all" --htmlreport "reports" 

Queste erano solo le basi. Ci sono altri esempi sul sito ufficiale.

Inoltre v'è un articolo introduzione che spiega come utilizzare l'approccio TDD (Test Driven Development) durante la progettazione di una pagina web http://mindengine.net/post/2013-11-16-tdd-for-responsive-design-or-how-to-automate-testing-of-website-layout-for-different-devices/

Answer 3

Possiamo raggiungere questo obiettivo in diversi modi

1. confronto Schermata: Usando il selenio web vai all'URL del sito web indicato e cambia il browser in diverse dimensioni e confronta gli screenshot. Se entrambi gli screenshot sono uguali, il sito Web indicato non risponde. Se entrambi gli screenshot sono diversi, il sito Web indicato è reattivo. Questo metodo non è buono perché supponiamo che le presentazioni siano presenti in un determinato sito web mentre si scattano le schermate di quel sito Web, le immagini della presentazione presenti nel sito Web indicato potrebbero cambiare e otterremo diversi screenshot, quindi se confrontiamo gli screenshots otterremo risultati come entrambe le immagini sono diverse e possiamo ottenere la risposta come il sito indicato è reattivo

2. la larghezza del documento: Utilizzando il selenio WebDriver visitare il sito web URL dato e cambiare il browser alla dimensione dispositivo mobile e eseguire il javascript per ottenere larghezza del documento. Se la larghezza è inferiore a dispositivi mobili larghezza massima si può supporre che il sito indicato è reattivo

larghezza 3. Schermata: Utilizzando il selenio WebDriver visitare il sito web URL dato e cambiare il browser alla dimensione dispositivo mobile e prendere lo screenshot e ottieni la larghezza dell'immagine dello screenshot. Se la larghezza è inferiore alla larghezza massima dei dispositivi mobili, possiamo supporre che il sito Web indicato sia reattivo. Ho testato più siti con questo approccio e ottenuto il risultato atteso. I passaggi per verificare il sito dato sono reattivi o meno.

vedere di più sulla codifica a: http://jagadeeshmanne.blogspot.in/2014/03/checking-website-is-responsive-or-not.html

Answer 4

Se il tuo obiettivo principale è quello di testare le modifiche nell'interfaccia utente e selenio non è un requisito assoluto si potrebbe usare BBC Wraith - https://github.com/BBC-News/wraith molto facile da installare e utilizzare.