et dybt dyk ned i CSS Testing: en Developer’ s Complete Guide

når det kommer til front-End test, er CSS test ofte overset. Der er utvivlsomt betydelige udfordringer i CSS-test, men det betyder ikke, at det skal afvises som et ubetydeligt værktøj i en overordnet teststrategi. I dette indlæg tilbyder vi dig en guide til denne form for test, så du forstår motivationen bag at bruge den og kender de praktiske trin for at komme i gang.

vi åbner indlægget med de grundlæggende spørgsmål:

• Hvad er CSS test?
• hvorfor skal du bekymre dig om det??
• hvordan tester du CSS?

så snart vi får det grundlæggende ud af vejen, leder vi dig gennem en liste over nogle af de vigtigste CSS-testværktøjer. Du vil forstå mere om de forskellige værktøjer og værktøjskategorier i dette rum.

før vi afslutter, deler vi nogle endelige tanker, herunder hvordan Testim Automate kan omgå nogle af de hindringer, som CSS pålægger, når vi udfører automatiseret ende-til-ende-test.

lad os komme til det.

CSS Testing Basics

lad os starte med at besvare de grundlæggende spørgsmål.

Hvad er CSS test?

CSS-test, som navnet antyder, er processen med at teste dine stilark. Mere specifikt henviser vi til automatisk CSS-test. Når alt kommer til alt er dette 2021, og testautomatisering er vigtig. Dette gælder i alle niveauer, lag og former for test. CSS-test er ikke en undtagelse.

hvorfor skal du bekymre dig om CSS-test?

CSS er medlem af internettet trifecta (HTML, CSS og JavaScript). Som sådan er det afgørende for kvaliteten af en internetapplikation. Problemer i CSS vil medføre, at Internet-appen / hjemmesiden ikke gengives korrekt.

brugergrænsefladen er et særligt følsomt område i en applikation, når det kommer til brugeroplevelsen. Når alt kommer til alt er grænsefladen, hvad brugeren ser og rører ved—helt bogstaveligt, i tilfælde af mobil.

så CSS-test bør være en afgørende komponent i UI-test, hvis din organisation er seriøs med at give sine brugere en dejlig brugeroplevelse.

hvordan tester du CSS?

du kan teste CSS på forskellige måder. Det skyldes, at CSS-test ikke er en enkelt ting; i stedet kommer den i forskellige typer. De fire hovedtyper er:

• Regression
• syntaks
• projekt
• Reference

lad os nu dække hver af disse typer.

Regression

Regression CSS test er den samme gamle regressionstest anvendt på CSS. Regressionstest er mindre en type test-lignende, enhedstest eller ende—til-ende-test-og mere af en strategi. Det består i at oprette en testpakke til at fange regressioner eller fejl efter ændringer i kodebasen.

så CSS regressionstest bekræfter, at du ikke bryder din sidestil efter at have ændret siden.

syntaks

denne kategori henviser til testteknikker og værktøjer, der bekræfter, at din CSS-syntaks er okay. I en nøddeskal er det som en linter til CSS.

projekt

kategorien “projekt” betyder at kontrollere, om CSS overholder projektets og organisationens standarder.

Reference

endelig kontrollerer reference CSS-test, om den implementerede og gengivne side ser ud som den skulle se ud. Der er gjort store fremskridt på dette område, og tingene er langt bedre, end de plejede at være i den mørke middelalder af Internet opdagelsesrejsende Dominans.

det betyder dog ikke, at der ikke længere er udfordringer. På trods af at mange af de største bro.sere i dag deler et fælles fundament—Chromium open source-bro. ser—vil du sandsynligvis kæmpe, når du sikrer, at din side ser ud og opfører sig det samme på mindst de mest anvendte bro. sere.

CSS testværktøjer: her er nogle af de vigtigste

vi leder dig gennem nogle af de tilgængelige værktøjer, du måske vil tjekke ud.

som vi sagde før, er CSS-test et ofte overset område i test. En af konsekvenserne heraf er det reducerede antal tilgængelige værktøjer sammenlignet med andre typer test.

CSS Lint

CSS Lint er netop, hvad navnet antyder: en linter til CSS-kode. Du kan få adgang til det på sin hjemmeside eller installere det som en npm-pakke.

CSS Lint tilbyder syntakskontrol, udover at bruge regler til at kontrollere, at koden ikke indeholder problemer. Du kan også skrive dit eget sæt regler.

BackstopJS

BackstopJS er et visuelt regressionsværktøj til internet apps. Det gør det ved at sammenligne DOM-skærmbilleder taget over tid. Du kan nemt installere det med npm:

BackstopJS gør tests med hovedløs Chrome og kan simulere brugerinteraktioner ved hjælp af Puppeteer scripts. Du kan tilføje det til din CI, og det kommer med integreret Docker rendering.

test af enhed og integration for CSS. Ved hjælp af dette bibliotek kan du kontrollere, hvordan HTML-elementer gengives af bro.sereren, og kontrollere, hvordan elementer forholder sig til hinanden. Du kan også bruge et værktøj som f.eks. Karma til at køre test på flere bro. sere.

du kan installere dette værktøj via npm:

CSSCritic

CSS Critic er et værktøj til automatisk regressionstest af CSS.

det virker ved at sammenligne den aktuelle tilstand af dit layout til et referencebillede, du giver. Når layoutet ændres, mislykkes testene.

du kan få CSS-kritiker ved hjælp af npm:

en vigtig begrænsning er, at Csscritic kun virker i Chrome.

konklusion

CSS-test er en ofte overset form for test. Hvilket, desværre, giver mening, da CSS altid har været slags den grimme ælling af nettet trifecta.

da CSS—fejl helt sikkert påvirker en internetapps grænseflade—hvilket igen påvirker brugeroplevelsen negativt-er det af største vigtighed at teste dine stilark, hvis du skal levere en god pris til dine besøgende.

i dette indlæg har vi set de grundlæggende elementer i CSS-test: hvad det er, hvorfor det betyder noget, og hvordan du gør det. Vi har også gennemgået nogle af de vigtigste værktøjer, der dækker forskellige kategorier: linters, enhedstest, regressionstest og visuel regressionstest. Du ved nu mere om begrebet CSS-test og det værktøj, du har til rådighed.

før indpakning, her er en sidste tanke: CSS er vigtig, og ikke kun i forbindelse med CSS test. Det betyder også noget for andre typer test.

for eksempel bruger end-to-end testværktøjer ofte CSS-klassenavne som identifikatorer. Desværre kan det være en skrøbelig tilgang. Det er almindeligt, at udviklere bruger teknikker, der ender med at tilføje tilfældige identifikatorer til deres CSS-klasser. CSS-moduler er et eksempel på en sådan tilgang.

anvendelsen af sådanne teknikker resulterer ofte i skrøbelige tests. Mange værktøjer er afhængige af klassenavne for at finde elementer i DOM. Når klassenavne ændres, mislykkes test, hvilket resulterer i tung testvedligeholdelse.

der er dog bedre tilgange. For eksempel har Testim for nylig tilføjet en funktion kaldet Locator filtrering og kortlægning. Det giver Testim mulighed for at filtrere den dynamiske del af klassenavne, når man bestemmer lokaliseringer for hvert element. Dette forbedrer lokaliseringsnøjagtigheden, hvilket giver mere robuste testsager. Giv Testim en prøve og locator filtrering. Glad test!