Un tuffo in profondità CSS Testing: A Developer’s Complete Guide

Quando si tratta di test front-end, test CSS è spesso trascurato. Ci sono indubbiamente sfide significative nei test CSS, ma ciò non significa che dovrebbe essere liquidato come uno strumento non importante in una strategia di test generale. In questo post, ti offriremo una guida a questa forma di test, in modo da capire le motivazioni dietro l’utilizzo e conoscere i passaggi pratici per iniziare.

Apriremo il post con le domande fondamentali:

• Che cos’è il test CSS?
• Perché dovrebbe interessarti??
• Come si fa a testare CSS?

Non appena avremo le basi, ti guideremo attraverso un elenco di alcuni dei principali strumenti di test CSS. Capirai di più sui diversi strumenti e categorie di strumenti in questo spazio.

Prima di concludere, condivideremo alcuni pensieri finali, incluso il modo in cui Testim Automate può aggirare alcuni degli ostacoli imposti dai CSS quando si eseguono test end-to-end automatizzati.

Andiamo ad esso.

CSS Testing Basics

Iniziamo rispondendo alle domande fondamentali.

Che cos’è il test CSS?

Il test CSS, come suggerisce il nome, è il processo di test dei fogli di stile. Più specificamente, ci riferiamo al test CSS automatico. Dopo tutto, questo è il 2021 e l’automazione dei test è essenziale. Questo è vero in tutti i livelli, livelli e forme di test. Il test CSS non è un’eccezione.

Perché dovresti preoccuparti dei test CSS?

CSS è un membro del web trifecta (HTML, CSS e JavaScript). Come tale, è vitale per la qualità di un’applicazione web. I problemi in CSS causeranno il rendering corretto dell’app web/sito web.

L’interfaccia utente è un’area particolarmente sensibile di un’applicazione quando si tratta dell’esperienza utente. Dopo tutto, l’interfaccia è ciò che l’utente vede e tocca—letteralmente, nel caso del cellulare.

Quindi, il test CSS dovrebbe essere una componente cruciale del test dell’interfaccia utente se la tua organizzazione è seriamente intenzionata a fornire ai suoi utenti un’esperienza utente piacevole.

Come si fa a testare CSS?

È possibile testare CSS in una varietà di modi. Questo perché il test CSS non è una singola cosa; invece, è disponibile in diversi tipi. I quattro tipi principali sono:

• Regressione
• Sintassi
• Progetto
• Riferimento

Copriamo ora ciascuno di questi tipi.

Regressione

Il test CSS di regressione è lo stesso vecchio test di regressione applicato ai CSS. Il test di regressione è meno un tipo di test, come test unitari o test end—to-end, e più di una strategia. Consiste nell’impostare una suite di test per rilevare regressioni o bug dopo le modifiche alla base di codice.

Quindi, il test di regressione CSS verifica che non si rompa lo stile della pagina dopo aver modificato la pagina.

Sintassi

Questa categoria si riferisce alle tecniche di test e agli strumenti che verificano che la sintassi CSS sia corretta. In poche parole, è come un linter per CSS.

Progetto

La categoria “progetto” significa verificare se il CSS rispetta gli standard del progetto e dell’organizzazione.

Riferimento

Infine, il test CSS di riferimento verifica se la pagina implementata e renderizzata appare nel modo in cui doveva apparire. Sono stati fatti molti progressi in questo settore, e le cose sono molto meglio di quanto non fossero nei secoli bui del dominio di Internet Explorer.

Tuttavia, ciò non significa che non ci siano più sfide. Nonostante molti dei principali browser di oggi la condivisione di una base comune-il Chromium open-source browser-è molto probabile che a lottare quando garantire la vostra pagina sembra e si comporta lo stesso attraverso almeno i browser più utilizzati.

Strumenti di test CSS: ecco alcuni dei principali

Ti guideremo attraverso alcuni degli strumenti disponibili che potresti voler controllare.

Come abbiamo detto prima, i test CSS sono un’area spesso trascurata nei test. Una delle implicazioni di ciò è il numero ridotto di strumenti disponibili rispetto ad altri tipi di test.

CSS Lint

CSS Lint è esattamente ciò che suggerisce il nome: un linter per il codice CSS. Puoi accedervi sul suo sito web o installarlo come pacchetto npm.

CSS Lint offre il controllo della sintassi, oltre all’utilizzo di regole per verificare che il codice non contenga problemi. Puoi anche scrivere il tuo set di regole.

BackstopJS

BackstopJS è uno strumento di regressione visiva per le applicazioni web. Lo fa confrontando gli screenshot DOM presi nel tempo. Si può facilmente installare con npm:

BackstopJS rende prove con headless Chrome e in grado di simulare le interazioni con l’utente utilizzando Burattinaio script. Puoi aggiungerlo al tuo CI e viene fornito con il rendering Docker integrato.

Quixote

Quixote è test di unità e integrazione per CSS. Utilizzando questa libreria, è possibile verificare come gli elementi HTML sono resi dal browser e verificare come gli elementi si relazionano tra loro. Quixote funziona nei moderni browser desktop e mobili, ma puoi anche utilizzare uno strumento come Karma per eseguire test Quixote su più browser.

È possibile installare questo strumento tramite npm:

CSSCritic

CSS Critico è uno strumento automatico di test di regressione di CSS.

Funziona confrontando lo stato corrente del layout con un’immagine di riferimento fornita. Ogni volta che il layout cambia, i test falliscono.

Puoi ottenere CSS Critic usando npm:

Una limitazione importante è che CSSCritic funziona solo con Firefox e Chrome.

Conclusione

Il test CSS è una forma di test spesso trascurata. Il che, purtroppo, ha un senso dal momento che il CSS è sempre stato una sorta di brutto anatroccolo del trifecta web.

Tuttavia, poiché gli errori CSS hanno certamente un impatto sull’interfaccia di un’app web—che a sua volta influisce negativamente sull’esperienza dell’utente-testare i fogli di stile è di fondamentale importanza se si vuole offrire una grande UX ai visitatori.

In questo post, abbiamo visto i fondamenti del test CSS: cos’è, perché è importante e come lo fai. Abbiamo anche camminato attraverso alcuni degli strumenti principali, che coprono diverse categorie: linters, unit testing, test di regressione, e test di regressione visiva. Ora sai di più sul concetto di test CSS e sugli utensili a tua disposizione.

Prima di concludere, ecco un pensiero finale: CSS è importante, e non solo nel contesto dei test CSS. È importante anche per altri tipi di test.

Ad esempio, gli strumenti di test end-to-end utilizzano spesso nomi di classi CSS come identificatori. Sfortunatamente, questo può essere un approccio fragile. È comune per gli sviluppatori utilizzare tecniche che finiscono per aggiungere identificatori casuali alle loro classi CSS. I moduli CSS sono un esempio di tale approccio.

L’uso di tali tecniche spesso si traduce in test fragili. Molti strumenti si basano su nomi di classi per trovare elementi nel DOM. Quando i nomi delle classi cambiano, i test falliscono, con conseguente manutenzione pesante del test.

Ci sono approcci migliori, però. Ad esempio, Testim ha recentemente aggiunto una funzione chiamata Filtraggio localizzatore e mappatura. Consente a Testim di filtrare la parte dinamica dei nomi delle classi quando si determinano i localizzatori per ciascun elemento. Ciò migliora la precisione del localizzatore, rendendo i casi di test più robusti. Dare Testim una prova e filtraggio localizzatore. Buon test!