Une plongée en profondeur dans les tests CSS: Guide Complet du Développeur

Lorsqu’il s’agit de tests frontaux, les tests CSS sont souvent négligés. Il y a sans aucun doute des défis importants dans les tests CSS, mais cela ne signifie pas qu’il doit être considéré comme un outil sans importance dans une stratégie de test globale. Dans cet article, nous vous proposerons un guide sur cette forme de test, afin que vous compreniez les motivations derrière son utilisation et connaissiez les étapes pratiques pour commencer.

Nous ouvrirons le post avec les questions fondamentales:

• Qu’est-ce que le test CSS?
• Pourquoi devriez-vous vous en soucier??
• Comment testez-vous CSS ?

Dès que nous aurons les bases, nous vous guiderons à travers une liste de certains des principaux outils de test CSS. Vous en comprendrez plus sur les différents outils et catégories d’outils de cet espace.

Avant de conclure, nous partagerons quelques réflexions finales, notamment sur la manière dont Testim Automate peut contourner certains des obstacles imposés par CSS lors de tests automatisés de bout en bout.

Allons-y.

Bases des tests CSS

Commençons par répondre aux questions fondamentales.

Qu’est-ce que le test CSS ?

Le test CSS, comme son nom l’indique, est le processus de test de vos feuilles de style. Plus précisément, nous nous référons aux tests CSS automatiques. Après tout, nous sommes en 2021 et l’automatisation des tests est essentielle. Cela est vrai à tous les niveaux, couches et formes de test. Les tests CSS ne sont pas une exception.

Pourquoi Devriez-Vous Vous Soucier Des Tests CSS?

CSS est membre de la trifecta web (HTML, CSS et JavaScript). En tant que tel, il est essentiel pour la qualité d’une application Web. Les problèmes de CSS entraîneront un rendu incorrect de l’application Web / du site Web.

L’interface utilisateur est une zone particulièrement sensible d’une application en ce qui concerne l’expérience utilisateur. Après tout, l’interface est ce que l’utilisateur voit et touche — littéralement, dans le cas d’un mobile.

Ainsi, les tests CSS devraient être un élément crucial des tests d’interface utilisateur si votre organisation souhaite sérieusement offrir à ses utilisateurs une expérience utilisateur agréable.

Comment Testez-Vous CSS ?

Vous pouvez tester CSS de différentes manières. C’est parce que les tests CSS ne sont pas une seule chose; au lieu de cela, il existe différents types. Les quatre principaux types sont:

• Régression
• Syntaxe
• Projet
• Référence

Couvrons maintenant chacun de ces types.

Régression

Le test CSS de régression est le même ancien test de régression appliqué au CSS. Les tests de régression sont moins un type de test — comme les tests unitaires ou les tests de bout en bout – et plus une stratégie. Il consiste à mettre en place une suite de tests pour détecter des régressions ou des bugs après des modifications de la base de code.

Ainsi, les tests de régression CSS vérifient que vous ne cassez pas le style de votre page après avoir modifié la page.

Syntaxe

Cette catégorie fait référence aux techniques et outils de test qui vérifient que votre syntaxe CSS est correcte. En un mot, c’est comme un linter pour CSS.

Projet

La catégorie “projet” signifie vérifier si le CSS respecte les normes du projet et de l’organisation.

Référence

Enfin, le test CSS de référence vérifie si la page implémentée et rendue ressemble à ce qu’elle était censée ressembler. Beaucoup de progrès ont été réalisés dans ce domaine, et les choses sont bien meilleures qu’elles ne l’étaient à l’époque sombre de la domination d’Internet Explorer.

Cependant, cela ne signifie pas qu’il n’y a plus de défis. Bien que la plupart des principaux navigateurs d’aujourd’hui partagent une base commune — le navigateur open-source Chromium — vous aurez probablement du mal à vous assurer que votre page ressemble et se comporte de la même manière sur au moins les navigateurs les plus utilisés.

Outils de test CSS: Voici quelques-uns des principaux

Nous vous guiderons à travers certains des outils disponibles que vous voudrez peut-être consulter.

Comme nous l’avons déjà dit, les tests CSS sont un domaine souvent négligé dans les tests. L’une des implications de cela est le nombre réduit d’outils disponibles par rapport à d’autres types de tests.

Charpie CSS

La charpie CSS est précisément ce que son nom suggère: une charpie pour le code CSS. Vous pouvez y accéder sur son site Web ou l’installer en tant que package npm.

CSS Lint propose une vérification de la syntaxe, en plus d’utiliser des règles pour vérifier que le code ne contient pas de problèmes. Vous pouvez également écrire votre propre ensemble de règles.

BackstopJS

BackstopJS est un outil de régression visuelle pour les applications Web. Il le fait en comparant les captures d’écran DOM prises au fil du temps. Vous pouvez facilement l’installer avec npm:

BackstopJS rend les tests avec Chrome sans tête et peut simuler les interactions des utilisateurs à l’aide de scripts de marionnettistes. Vous pouvez l’ajouter à votre CI, et il est livré avec un rendu Docker intégré.

Quixote

Quixote est un test unitaire et d’intégration pour CSS. En utilisant cette bibliothèque, vous pouvez vérifier comment les éléments HTML sont rendus par le navigateur et vérifier comment les éléments se rapportent les uns aux autres. Quixote fonctionne dans les navigateurs de bureau et mobiles modernes, mais vous pouvez également utiliser un outil tel que Karma pour exécuter des tests Quixote sur plusieurs navigateurs.

Vous pouvez installer cet outil via npm:

CSSCritic

CSS Critic est un outil de test de régression automatique de CSS.

Cela fonctionne en comparant l’état actuel de votre mise en page à une image de référence que vous fournissez. Chaque fois que la mise en page change, les tests échouent.

Vous pouvez obtenir un critique CSS en utilisant npm:

Une limitation importante est que CSSCritic ne fonctionne que dans Firefox et Chrome.

Conclusion

Le test CSS est une forme de test souvent négligée. Ce qui, malheureusement, a du sens puisque CSS a toujours été une sorte de vilain petit canard de la trifecta web.

Cependant, étant donné que les erreurs CSS affectent certainement l’interface d’une application Web — ce qui affecte négativement l’expérience utilisateur — tester vos feuilles de style est d’une importance primordiale si vous souhaitez offrir une excellente expérience utilisateur à vos visiteurs.

Dans cet article, nous avons vu les principes fondamentaux du test CSS: ce que c’est, pourquoi cela compte et comment vous le faites. Nous vous avons également présenté certains des principaux outils, couvrant différentes catégories: linters, tests unitaires, tests de régression et tests de régression visuelle. Vous en savez maintenant plus sur le concept de test CSS et l’outillage à votre disposition.

Avant de conclure, voici une dernière pensée: CSS est important, et pas seulement dans le contexte des tests CSS. Cela compte également pour d’autres types de tests.

Par exemple, les outils de test de bout en bout utilisent souvent des noms de classes CSS comme identifiants. Malheureusement, cette approche peut être fragile. Il est courant que les développeurs utilisent des techniques qui finissent par ajouter des identifiants aléatoires à leurs classes CSS. Les modules CSS sont un exemple d’une telle approche.

L’utilisation de telles techniques se traduit souvent par des tests fragiles. De nombreux outils s’appuient sur des noms de classes pour trouver des éléments dans le DOM. Lorsque les noms de classe changent, les tests échouent, ce qui entraîne une maintenance intensive des tests.

Il existe cependant de meilleures approches. Par exemple, Testim a récemment ajouté une fonctionnalité appelée Filtrage et mappage des localisateurs. Il permet à Testim de filtrer la partie dynamique des noms de classe lors de la détermination des localisateurs pour chaque élément. Cela améliore la précision du localisateur, ce qui rend les cas de test plus robustes. Essayez Testim et filtrez le localisateur. Bon test!