en djupdykning i CSS-testning: En Developer’ s Complete Guide

när det gäller front-end testning, CSS testning ofta förbises. Det finns utan tvekan betydande utmaningar i CSS-testning, men det betyder inte att det bör avfärdas som ett oviktigt verktyg i en övergripande teststrategi. I det här inlägget kommer vi att erbjuda dig en guide till denna form av testning, så att du förstår motivationen bakom att använda den och känner till de praktiska stegen för att komma igång.

vi öppnar inlägget med de grundläggande frågorna:

• vad är CSS-testning?
• varför ska du bry dig om det??
• hur testar du CSS?

så snart vi får grunderna ur vägen går vi igenom en lista över några av de viktigaste CSS-testverktygen. Du kommer att förstå mer om de olika verktygen och verktygskategorierna i detta utrymme.

innan vi lägger in delar vi några slutliga tankar, inklusive hur Testim Automate kan kringgå några av de hinder som CSS ålägger när man gör automatiserad end-to-end-testning.

Låt oss komma till det.

CSS Testing Basics

låt oss börja med att svara på de grundläggande frågorna.

vad är CSS-testning?

CSS-testning, som namnet antyder, är processen att testa dina stilark. Mer specifikt hänvisar vi till automatisk CSS-testning. Det är trots allt 2021, och testautomatisering är viktigt. Detta gäller på alla nivåer, lager och testformer. CSS-testning är inget undantag.

varför ska du bry dig om CSS-testning?

CSS är medlem i webben trifecta (HTML, CSS och JavaScript). Som sådan är det viktigt för kvaliteten på en webbapplikation. Problem i CSS kommer att göra att webbappen / webbplatsen inte återges korrekt.

användargränssnittet är ett särskilt känsligt område i en applikation när det gäller användarupplevelsen. När allt kommer omkring är gränssnittet vad användaren ser och berör—ganska bokstavligen, när det gäller mobil.

så CSS-testning bör vara en viktig del av UI-testning om din organisation menar allvar med att ge sina användare en härlig användarupplevelse.

hur testar du CSS?

du kan testa CSS på olika sätt. Det beror på att CSS-testning inte är en enda sak; istället kommer den i olika typer. De fyra huvudtyperna är:

• Regression
• Syntax
• projekt
• referens

Låt oss nu täcka var och en av dessa typer.

Regression

regression CSS-testning är samma gamla regressionstestning som tillämpas på CSS. Regressionstestning är mindre en typ av testning—som enhetstestning eller end-to-end—testning-och mer av en strategi. Den består av att skapa en testsvit för att fånga regressioner eller buggar efter ändringar i kodbasen.

så, CSS regressionstestning verifierar att du inte bryter din sidstil efter att du har ändrat sidan.

Syntax

denna kategori hänvisar till testtekniker och verktyg som verifierar att din CSS-syntax är okej. I ett nötskal är det som en linter för CSS.

projekt

kategorin “projekt” innebär att kontrollera om CSS respekterar projektets och organisationens standarder.

referens

slutligen verifierar referens CSS-testning om den implementerade och renderade sidan ser ut som den skulle se ut. Mycket framsteg har gjorts på detta område, och saker är mycket bättre än de brukade vara i de mörka åldrarna av Internet Explorer dominans.

men det betyder inte att det inte längre finns utmaningar. Trots att många av dagens stora webbläsare delar en gemensam grund-Chromium-webbläsaren med öppen källkod-kommer du sannolikt att kämpa när du ser till att din sida ser ut och beter sig på samma sätt i åtminstone de mest använda webbläsarna.

CSS testverktyg: här är några av de viktigaste

vi går igenom några av de tillgängliga verktygen du kanske vill kolla in.

som vi sa tidigare är CSS-testning ett ofta förbisett område vid testning. En av konsekvenserna av det är det minskade antalet tillgängliga verktyg jämfört med andra typer av testning.

CSS Lint

CSS Lint är precis vad namnet antyder: en linter för CSS-kod. Du kan komma åt den på sin webbplats eller installera den som ett npm-paket.

CSS Lint erbjuder syntaxkontroll, förutom att använda regler för att kontrollera att koden inte innehåller problem. Du kan också skriva din egen uppsättning regler.

BackstopJS

BackstopJS är ett visuellt regressionsverktyg för webbappar. Det gör det genom att jämföra DOM skärmdumpar tagna över tiden. Du kan enkelt installera det med npm:

BackstopJS gör tester med huvudlös Chrome och kan simulera användarinteraktioner med hjälp av Dockskript. Du kan lägga till den i din CI, och det kommer med integrerad Docker rendering.

Quixote

Quixote är enhets-och integrationstestning för CSS. Med det här biblioteket kan du kontrollera hur HTML-element återges av webbläsaren och verifiera hur element relaterar till varandra. Quixote fungerar i moderna stationära och mobila webbläsare, men du kan också använda ett verktyg som Karma för att köra Quixote-tester på flera webbläsare.

du kan installera det här verktyget via npm:

CSSCRITIC

CSS Critic är ett verktyg för automatisk regressionstestning av CSS.

det fungerar genom att jämföra det aktuella läget för din layout till en referensbild du tillhandahåller. När layouten ändras misslyckas testerna.

du kan få CSS-kritiker med npm:

en viktig begränsning är att CSSCritic bara fungerar i Firefox och Chrome.

slutsats

CSS-testning är en ofta förbisedd form av testning. Vilket, tyvärr, är vettigt eftersom CSS alltid har varit den fula ankungen på webben trifecta.

men eftersom CSS—fel verkligen påverkar en webbapps gränssnitt—vilket i sin tur påverkar användarupplevelsen negativt-är det av största vikt att testa dina stilark om du ska leverera en bra UX till dina besökare.

i det här inlägget har vi sett grunderna i CSS-testning: vad det är, varför det spelar roll och hur du gör det. Vi har också gått igenom några av de viktigaste verktygen, som täcker olika kategorier: linters, enhetstestning, regressionstestning och visuell regressionstestning. Du vet nu mer om begreppet CSS-testning och verktyget till ditt förfogande.

innan du lägger in, här är en sista tanke: CSS är viktigt, och inte bara i samband med CSS-testning. Det är också viktigt för andra typer av tester.

till exempel använder end-to-end testverktyg ofta CSS-klassnamn som identifierare. Tyvärr kan det vara ett bräckligt tillvägagångssätt. Det är vanligt att utvecklare använder tekniker som slutar lägga till slumpmässiga identifierare i sina CSS-klasser. CSS-moduler är ett exempel på ett sådant tillvägagångssätt.

användningen av sådana tekniker resulterar ofta i bräckliga tester. Många verktyg är beroende av klassnamn för att hitta element i DOM. När klassnamn ändras misslyckas testerna, vilket resulterar i tungt testunderhåll.

det finns dock bättre tillvägagångssätt. Testim har till exempel nyligen lagt till en funktion som heter Locator Filtering and Mapping. Det gör Testim att filtrera den dynamiska delen av klassnamn när man bestämmer lokaliserare för varje element. Detta förbättrar lokaliseringsnoggrannheten, vilket ger mer robusta testfall. Ge Testim ett försök och locator filtrering. Glad testning!