Devo avere diversi test automatici del selenio per diverse risoluzioni dello schermo?

È improbabile che si catturino le regressioni relative al layout con i test del selenio:

• Le regressioni relative al modo in cui vengono visualizzati gli elementi portano a layout che sembrano rotti, ma hanno ancora tutti gli elementi necessari per eseguire il test. Se chiedi al Selenium di inserire del testo in un campo, fai clic su un pulsante e attendi che il testo specifico appaia in uno specifico <div> , Selenium non sarà in grado di sapere che il pulsante è troppo corto per il suo contenuto o che il testo l'input ha una posizione sbagliata sulla pagina o il testo all'interno di <div> occupa due righe anziché una.

• Le regressioni che spostano gli elementi fuori dall'area di disegno (che porta a errori di test, se, ad esempio, il selenio viene chiesto di fare clic su un pulsante che non è visibile) sono comunque casuali e di solito portano a test a fiocchi.

Tuttavia, puoi utilizzare i test pdiff per rilevare i cambiamenti nel layout: l'obiettivo di questi test è specificamente quello di catturare le regressioni visive. Se scegli come target tre dimensioni dello schermo, è davvero una buona idea eseguire i test per tutte e tre le dimensioni. Non è insolito utilizzare quattro o cinque dimensioni, ed è particolarmente utile dato che gli sviluppatori raramente controllano come le loro modifiche influenzano il layout per schermi molto piccoli o molto grandi.

Utilizzare un test delle specifiche di progettazione per convalidare le proprietà CSS calcolate per ogni punto di interruzione. Ad esempio:

Atthetopofthespecfile,wedefinenamedelementsusingCSSselectors.Thesecanthenbeusedthroughouttorefertoelementsbyname.

Wethengroupelementchecksbyviewportsizesothatwecanmakedifferentchecksatdifferentresponsivebreakpoints.Namedviewportsizeslikesmall,mediumandlargeareentirelycustomisable.Theexactviewportdimensionsarespecifiedinaglobaltestsuitefilethatisn’tshownhere.The*grouprunschecksforallviewportsizes.

Withineachviewportgroup,wethenprovidethenameoftheelementwewanttocheck.Withineachofthesearetheactualcheckswewanttocarryout.Checkstendtofocusondimensionsorrelativepositiontootherelementsinacomponent.ItisalsopossibletodirectlycheckfinalcomputedCSSproperties,liketextcolororfontsize.

Riferimenti

• Perché e come testare la libreria dei pattern - Parte 1: Strategia di test

• Road To Automation: Road per verificare il valore delle proprietà css utilizzando Webdriver

• Richiesta di funzione: trova il punto di interruzione corrente con Javascript · Numero 25124 · twbs / bootstrap

• JavascriptExecutor

• WebdriverIO - getCssProperty

• Galen Framework | Test automatici del design reattivo