een diepe duik in CSS Testing: een Developer’ s Complete Guide

als het gaat om front-end testen, wordt CSS testen vaak over het hoofd gezien. Er zijn ongetwijfeld belangrijke uitdagingen in CSS testen, maar dat betekent niet dat het moet worden afgedaan als een onbelangrijk instrument in een algemene teststrategie. In dit bericht bieden we je een handleiding voor deze vorm van testen, zodat je de motivatie achter het gebruik ervan begrijpt en de praktische stappen kent om aan de slag te gaan.

we openen de post met de fundamentele vragen:

• Wat is CSS-testen?
• waarom zou u er om geven??
• hoe test u CSS?

zodra we de basis hebben, nemen we een lijst met enkele van de belangrijkste CSS-testtools door. U zult meer begrijpen over de verschillende tools en tool categorieën in deze ruimte.

voordat we afronden, zullen we een aantal laatste gedachten delen, waaronder hoe Testim Automate sommige obstakels kan omzeilen die door CSS worden opgelegd bij het uitvoeren van geautomatiseerde end-to-end testen.

laten we ter zake komen.

CSS Testing Basics

laten we beginnen met het beantwoorden van de fundamentele vragen.

Wat is CSS-testen?

CSS testen, zoals de naam al doet vermoeden, is het proces van het testen van uw typogrammen. Meer specifiek verwijzen we naar automatische CSS-tests. Dit is immers 2021 en testautomatisering is essentieel. Dit geldt voor alle niveaus, lagen en vormen van testen. CSS testen is geen uitzondering.

waarom zou u CSS-testen belangrijk vinden?

CSS is een lid van de web trifecta (HTML, CSS en JavaScript). Als zodanig, het is van vitaal belang voor de kwaliteit van een webapplicatie. Problemen in CSS zal ervoor zorgen dat de web app / website niet correct worden weergegeven.

de gebruikersinterface is een bijzonder gevoelig gebied van een toepassing als het gaat om de gebruikerservaring. Immers, de interface is wat de gebruiker ziet en aanraakt—heel letterlijk, in het geval van mobiel.

dus, CSS testen zou een cruciaal onderdeel moeten zijn van UI testen als uw organisatie serieus is over het bieden van haar gebruikers met een heerlijke gebruikerservaring.

hoe Test u CSS?

u kunt CSS op verschillende manieren testen. Dat komt omdat CSS testen is niet een ding; in plaats daarvan, het komt in verschillende soorten. De vier hoofdtypen zijn::

• regressie
• syntaxis
• Project
• referentie

laten we nu elk van deze typen behandelen.

regressie

regressie CSS testen is dezelfde oude regressie testen toegepast op CSS. Regressie testen is minder een soort van testen-zoals, unit testen of end-to—end testen-en meer van een strategie. Het bestaat uit het opzetten van een test suite om regressies of bugs te vangen na wijzigingen in de codebase.

dus, CSS regressie testen controleert of u uw pagina stijl niet breken na het veranderen van de pagina.

syntaxis

deze categorie verwijst naar testtechnieken en tools die controleren of uw CSS syntaxis goed is. In een notendop, het is als een linter voor CSS.

Project

Onder “project” wordt verstaan het controleren of de CSS voldoet aan de normen van het project en de organisatie.

referentie

ten slotte controleert het testen van referentie-CSS of de geà mplementeerde en gerenderde pagina eruit ziet zoals het er moest uitzien. Er is veel vooruitgang geboekt op dit gebied, en de dingen zijn veel beter dan ze vroeger in de Middeleeuwen van Internet Explorer dominantie.

dat betekent echter niet dat er geen uitdagingen meer zijn. Ondanks veel van de belangrijkste browsers van vandaag het delen van een gemeenschappelijke basis—de Chromium open-source browser—je bent waarschijnlijk te worstelen bij het waarborgen van uw pagina eruit ziet en gedraagt zich hetzelfde over ten minste de meest gebruikte browsers.

CSS Testing Tools: hier zijn enkele van de belangrijkste

We zullen u door een aantal van de beschikbare tools die u zou willen controleren.

zoals we al eerder zeiden, CSS testen is een vaak over het hoofd gezien gebied in het testen. Een van de implicaties daarvan is het verminderde aantal beschikbare tools in vergelijking met andere soorten testen.

CSS Lint

CSS Lint is precies wat de naam suggereert: een linter voor CSS-code. U kunt het openen op de website of installeren als een NPM-pakket.

CSS Lint biedt syntaxiscontrole, naast het gebruik van regels om te controleren of de code geen problemen bevat. U kunt ook uw eigen set regels schrijven.

BackstopJS

BackstopJS is een visuele regressie tool voor web apps. Het doet dat door het vergelijken van DOM screenshots genomen in de tijd. U kunt het eenvoudig installeren met npm:

BackstopJS maakt tests met headless Chrome en kan gebruikersinteracties simuleren met behulp van Puppeteer scripts. U kunt het toevoegen aan uw CI, en het wordt geleverd met geïntegreerde Docker rendering.

Quichot

Quichot is eenheid en integratie testen voor CSS. Met behulp van deze bibliotheek kunt u controleren hoe HTML-elementen door de browser worden weergegeven en controleren hoe elementen met elkaar verband houden. Quichot werkt in moderne desktop en mobiele browsers, maar je kunt ook een tool zoals Karma gebruiken om Quichot-tests op meerdere browsers uit te voeren.

u kunt deze tool installeren via npm:

CSSCritic

CSS Critic is een hulpmiddel voor automatische regressie testen van CSS.

het werkt door de huidige toestand van uw lay-out te vergelijken met een referentieafbeelding die u opgeeft. Wanneer de lay-out verandert, mislukken de tests.

u kunt CSS-criticus krijgen met npm:

een belangrijke beperking is dat CSSCritic alleen werkt in Firefox en Chrome.

conclusie

CSS testen is een vaak over het hoofd gezien vorm van testen. Wat jammer genoeg logisch is, aangezien CSS altijd het lelijke eendje van de web-trifecta is geweest.

echter, omdat CSS-fouten zeker een impact hebben op de interface van een web app—wat op zijn beurt een negatieve invloed heeft op de gebruikerservaring—is het testen van uw stylesheets van het grootste belang als u een geweldige UX wilt leveren aan uw bezoekers.

in dit bericht hebben we de grondbeginselen van CSS-testen gezien: wat het is, waarom het ertoe doet en hoe je het doet. We hebben u ook door enkele van de belangrijkste tools geleid, die verschillende categorieën bestrijken: linters, unit testing, regression testing en visual regression testing. U weet nu meer over het concept van CSS testen en de tooling tot uw beschikking.

voor het afsluiten, is hier een laatste gedachte: CSS is belangrijk, en niet alleen in de context van CSS testen. Het is ook van belang voor andere soorten tests.

end-to-end testtools gebruiken bijvoorbeeld vaak CSS-klassenamen als identifiers. Helaas kan dat een fragiele aanpak zijn. Het is gebruikelijk voor ontwikkelaars om technieken te gebruiken die uiteindelijk willekeurige identifiers toevoegen aan hun CSS-klassen. CSS modules zijn een voorbeeld van een dergelijke aanpak.

het gebruik van dergelijke technieken resulteert vaak in fragiele tests. Veel tools vertrouwen op klassenamen om elementen in de DOM te vinden. Wanneer klassenamen veranderen, mislukken tests, wat resulteert in zwaar testonderhoud.

er zijn echter betere benaderingen. Bijvoorbeeld, Testim heeft onlangs een functie genaamd Locator Filtering en Mapping toegevoegd. Hiermee kan Testim het dynamische deel van klassenamen filteren bij het bepalen van locators voor elk element. Dit verbetert de nauwkeurigheid van de locator, wat zorgt voor robuustere testcases. Geef Testim een poging en locator filtering. Veel testplezier!