Si vous avez fait un développement sérieux dans votre carrière, vous avez probablement atteint le point lorsque vous avez réalisé l'importance des tests automatisés pendant le développement. Selon votre expérience, cette réalisation pourrait vous frapper dans une grande rafale ou elle peut vous venir doucement au fil du temps, mais elle deviendra éventuellement une seconde nature. Les tests automatiques se présentent sous de nombreuses formes, des tests unitaires, lorsque vous testez des éléments de code isolés, à l'intégration et aux tests fonctionnels, lorsque vous testez comment les différentes parties de votre système se comportent ensemble. Cet article ne concerne pas un aperçu des tests automatiques en général. Il s'agit d'un créneau particulier et relativement nouveau appelé Test de régression visuelle .
Les tests de régression visuelle adoptent une approche alternative pour tester les pages Web. Au lieu de simplement s'assurer qu'un élément ou une valeur de texte est présent dans le DOM, le test ouvre en fait la page et vérifie si ce bloc spécifique ressemble exactement à ce que vous vouliez qu'il soit . Juste pour vous assurer que vous avez pris la différence, permettez-moi de vous donner un exemple. Imaginez que vous voulez que votre site Web salue vos visiteurs avec un message amical:
<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>
Pour vous assurer que cela fonctionne, vous pouvez (et devriez) tester le morceau de code qui produit le message, en vérifiant qu'il insère le nom correct. Vous pouvez également écrire un test fonctionnel à l'aide de sélénium ou de protracteur pour voir si l'élément est réellement présent sur la page avec le texte correct. Mais ce n'est pas suffisant. Nous voulons tester non seulement que le texte est généré correctement ou apparaît dans le DOM mais pour nous assurer que l'élément entier semble correct , c'est-à-dire en s'assurant que l'élément n'est pas masqué par l'affichage: aucun ou que Quelqu'un n'a pas accidentellement remplacé la couleur du texte. Il existe un certain nombre d'outils pour le faire, mais aujourd'hui, nous examinerons une option en particulier - Phantomcss.
PhantoMCSS est un outil Node.js pour effectuer des tests de régression visuelle. Il est open source et développé par les gars de Huddle. PhantoMCSS vous permet d'exécuter un navigateur sans tête, d'ouvrir une page et de prendre une capture d'écran de toute la page ou un élément particulier sur la page. Cette capture d'écran sera stockée en tant qu'image de référence pour référence future. Chaque fois que vous changez quoi que ce soit sur le site Web, vous pouvez exécuter à nouveau des PhantoMCSS. Il faudra une autre capture d'écran et le comparera à l'image d'origine. S'il n'y a aucune différence, le test passera. Si, cependant, les captures d'écran ne correspondent pas, le test échouera et une nouvelle image montrant la différence sera créée pour que vous puissiez examiner. Cette approche rend cet outil parfait pour tester les modifications de CSS.
PhantoMCSS est construit au-dessus de plusieurs composants clés:
PhantoMCSS peut être utilisé avec les Phantomjs et SlimerJS, mais dans cet article, nous utiliserons Phantomjs.
Créons un petit projet de test pour voir comment nous pouvons utiliser cet outil dans la pratique. Pour cela, nous aurons besoin d'une page Web pour tester et un serveur Web Node.js simple pour que Casperjs puisse ouvrir la page.
Créez un fichier index.html avec un exemple de contenu:
<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span> <span><span><span><head</span>></span>
</span> <span><span><span><style</span>></span><span>
</span></span><span><span> <span><span>.tag</span> {
</span></span></span><span><span> <span>color: #fff;
</span></span></span><span><span> <span>font-size: 30px;
</span></span></span><span><span> <span>border-radius: 10px;
</span></span></span><span><span> <span>padding: 10px;
</span></span></span><span><span> <span>margin: 10px;
</span></span></span><span><span> <span>width: 500px;
</span></span></span><span><span> <span>}
</span></span></span><span><span>
</span></span><span><span> <span><span>.tag-first</span> {
</span></span></span><span><span> <span>background: lightcoral;
</span></span></span><span><span> <span>}
</span></span></span><span><span>
</span></span><span><span> <span><span>.tag-second</span> {
</span></span></span><span><span> <span>background: lightskyblue;
</span></span></span><span><span> <span>}
</span></span></span><span><span> </span><span><span></style</span>></span>
</span> <span><span><span></head</span>></span>
</span>
<span><span><span><body</span>></span>
</span> <span><span><span><div</span> class<span>="tag tag-first"</span>></span>The moving finger writes, and having written moves on.<span><span></div</span>></span>
</span> <span><span><span><div</span> class<span>="tag tag-second"</span>></span>Nor all thy piety nor all thy wit, can cancel half a line of it.<span><span></div</span>></span>
</span> <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>Pour installer le serveur Web, initialisez un projet NPM et installez le package HTTP-Server.
<span>npm init </span><span>npm install http-server --save-dev</span>
Pour exécuter le serveur, définissons un simple script NPM. Ajoutez simplement la section Scripts suivante à package.json
<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>
Maintenant, vous pouvez exécuter NPM Start à partir du dossier du projet et la page d'index sera accessible sur l'adresse par défaut http://127.0.0.1:8080. Démarrez le serveur et laissez-le fonctionner pour le moment. Nous en aurons besoin dans un moment.
L'installation de PhantoMCSS est facile, tout ce que vous avez à faire est d'ajouter quelques dépendances à votre projet:
<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span> <span><span><span><head</span>></span>
</span> <span><span><span><style</span>></span><span>
</span></span><span><span> <span><span>.tag</span> {
</span></span></span><span><span> <span>color: #fff;
</span></span></span><span><span> <span>font-size: 30px;
</span></span></span><span><span> <span>border-radius: 10px;
</span></span></span><span><span> <span>padding: 10px;
</span></span></span><span><span> <span>margin: 10px;
</span></span></span><span><span> <span>width: 500px;
</span></span></span><span><span> <span>}
</span></span></span><span><span>
</span></span><span><span> <span><span>.tag-first</span> {
</span></span></span><span><span> <span>background: lightcoral;
</span></span></span><span><span> <span>}
</span></span></span><span><span>
</span></span><span><span> <span><span>.tag-second</span> {
</span></span></span><span><span> <span>background: lightskyblue;
</span></span></span><span><span> <span>}
</span></span></span><span><span> </span><span><span></style</span>></span>
</span> <span><span><span></head</span>></span>
</span>
<span><span><span><body</span>></span>
</span> <span><span><span><div</span> class<span>="tag tag-first"</span>></span>The moving finger writes, and having written moves on.<span><span></div</span>></span>
</span> <span><span><span><div</span> class<span>="tag tag-second"</span>></span>Nor all thy piety nor all thy wit, can cancel half a line of it.<span><span></div</span>></span>
</span> <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>Maintenant, nous avons tout ce dont nous avons besoin pour configurer la première suite de tests. Les suites de test PhantoMCSS sont créées sous la forme de scripts Node.js où vous ouvrez la page requise de votre site Web, prenez des captures d'écran et comparez-les aux images de l'exécution précédente. Nous commençons par un simple cas de test basé sur la démo de Phantomcss lui-même.
<span>npm init </span><span>npm install http-server --save-dev</span>
Le test ouvrira http://127.0.0.1:8080/, prenez une capture d'écran de l'élément corporel et enregistrez-le sous des captures d'écran / body.png.
Une fois que le test lui-même est en place, il ne reste plus que de définir un script pour exécuter le test. Ajoutons le script suivant à package.json Suivant pour démarrer:
<span>"scripts": {
</span> <span>"start": "http-server"
</span><span>},</span>Vous pouvez maintenant l'exécuter en exécutant la commande suivante:
<span>npm install phantomcss casperjs phantomjs-prebuilt --save-dev</span>
La sortie que vous verrez devrait ressembler à quelque chose comme ceci:
<span>var phantomcss = require('phantomcss');
</span>
<span>// start a casper test
</span>casper<span>.test.begin('Tags', function(test) {
</span>
phantomcss<span>.init({
</span> <span>rebase: casper.cli.get('rebase')
</span> <span>});
</span>
<span>// open page
</span> casper<span>.start('http://127.0.0.1:8080/');
</span>
<span>// set your preferred view port size
</span> casper<span>.viewport(1024, 768);
</span>
casper<span>.then(function() {
</span> <span>// take the screenshot of the whole body element and save it under "body.png". The first parameter is actually a CSS selector
</span> phantomcss<span>.screenshot('body', 'body');
</span> <span>});
</span>
casper<span>.then(function now_check_the_screenshots() {
</span> <span>// compare screenshots
</span> phantomcss<span>.compareAll();
</span> <span>});
</span>
<span>// run tests
</span> casper<span>.run(function() {
</span> <span>console.log('\nTHE END.');
</span> casper<span>.test.done();
</span> <span>});
</span><span>});</span>Puisque vous avez exécuté le test pour la première fois, il créera simplement une nouvelle capture d'écran de base et ne fera aucune comparaison. Allez-y et jetez un œil à l'intérieur du dossier des captures d'écran. Vous devriez voir une image comme celle-ci:
Il s'agit de l'étalon d'or de la façon dont votre site Web est censé apparence et les futures exécutions du test comparent leurs résultats à cette image.
Si vous exécutez à nouveau la même commande de test, il rapportera que tous les tests sont passés avec succès:
<span>"test": "casperjs test test.js"</span>
Ceci est à prévoir car nous n'avons rien changé sur le site Web. Brimons quelque chose et rédigeons à nouveau les tests. Essayez de modifier certains styles dans index.html, par exemple, diminuez la taille des blocs à 400px. Maintenant, passons à nouveau le test et voyons ce qui se passe:
<span>npm test</span>
Plusieurs choses importantes se sont produites ici. Premièrement, PhantoMCSS a rapporté que les tests ont échoué en raison d'un décalage pour la capture d'écran body_0.png. L'inadéquation est mesurée à 11,41%. Deuxièmement, la différence entre la version actuelle et la version précédente a été enregistrée dans le dossier des échecs. Si vous l'ouvrez, vous verrez une capture d'écran comme celle-ci:
La capture d'écran met commodément les zones qui ont été modifiées, il est donc facile de repérer la différence.
Maintenant que la différence a été mise en évidence, que devons-nous faire pour accepter le changement? Nous devons en quelque sorte être en mesure de dire à l'outil que nous voulons rester avec la largeur réduite des blocs et accepter la vue actuelle comme la nouvelle norme. Pour ce faire, vous pouvez exécuter la commande de test avec un argument supplémentaire - - Rebase:
<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>
Notez les deux tirets doubles. C'est la façon de NPM de passer un paramètre à la commande sous-jacente. Ainsi, la commande suivante se traduira par Casperjs test test.js --rebase. Maintenant que nous avons accepté le changement, l'image de base précédente sera remplacée par la nouvelle.
Maintenant que vous avez le respect des bases, vous pouvez commencer à penser à intégrer cet outil dans votre propre flux de travail. Je n'imerai pas dans les détails de cela car il est assez spécifique au projet, mais voici quelques questions à réfléchir:
En utilisant cet outil, vous pouvez désormais couvrir les aspects visuels de votre site Web avec des tests automatisés. Avec votre unité et vos tests fonctionnels déjà en place, cette nouvelle stratégie comblera une lacune étroite dans votre frontière de test. Même si vous êtes encore nouveau dans les tests - c'est un bon point de départ!
PhantoMCSS est un outil de test de régression visuelle qui utilise des Phantomjs et ressembler.js pour comparer les captures d'écran des pages Web. Il fonctionne en prenant des captures d'écran de vos pages Web, en les comparant aux images de base et en mettant en évidence les différences. Cela permet aux développeurs d'identifier et de fixer rapidement des incohérences visuelles dans leurs pages Web. PhantoMCSS est particulièrement utile dans les grands projets où les tests manuels peuvent être longs et sujets aux erreurs.
Phantomcss peuvent être installés à l'aide de NPM, le package Node.js directeur. Vous pouvez l'installer globalement en exécutant la commande npm install -g PhantoMCSS. Alternativement, vous pouvez l'ajouter en tant que dépendance de développement à votre projet en exécutant NPM Installer - Save-Dev Phantomcss.
Pour utiliser des phantomcss pour les tests de régression visuelle, vous devez d'abord créer un script de test qui indique aux PhantoMCSS de quoi capturer des captures d'écran de. Ce script peut être écrit en JavaScript ou CoffeeScript. Une fois le script prêt, vous pouvez l'exécuter à l'aide de Phantomjs. Les PhantoMCS captureront ensuite des captures d'écran des éléments spécifiés, les compareront aux images de référence et généreront un rapport montrant les différences.
Oui, PhantomcSS peut être utilisé avec d'autres cadres de test comme Mocha, Jasmine et Qunit. Il peut également être intégré à des systèmes d'intégration continus comme Jenkins et Travis CI.
PhantoMCSS offre plusieurs avantages pour les tests de régression visuelle. Il automatise le processus de capture et de comparaison des captures d'écran, ce qui permet aux développeurs de faire beaucoup de temps. Il fournit également un rapport visuel qui facilite les différences de repère entre la ligne de base et les images de test. De plus, PhantoMCSS prend en charge les tests de conception réactifs, permettant aux développeurs de tester leurs pages Web sur différentes tailles d'écran.
pour mettre à jour les images de base dans PhantoMCSS, Vous devez simplement supprimer les anciennes images de base et exécuter le script de test. PhantoMCSS capturera de nouvelles captures d'écran et les utilisera comme nouvelles images de base.
Oui, les Phantomcss peuvent gérer le contenu dynamique. Il permet aux développeurs de spécifier un retard avant de capturer des captures d'écran, ce qui donne au contenu dynamique suffisamment de temps pour charger. Il prend également en charge l'utilisation de rappels pour attendre des événements spécifiques avant de capturer des captures d'écran.
PhantoMCSS offre plusieurs options pour les tests de débogage. Il peut enregistrer les messages à la console, enregistrer les tests échoués sous forme de fichiers d'image et même créer une vidéo de l'exécution du test. Ces fonctionnalités facilitent l'identification et la résolution des problèmes dans vos tests.
Oui, PhantoMCSS vous permet de personnaliser le processus de comparaison. Vous pouvez définir le type de comparaison, la tolérance de décalage et les paramètres de sortie. Cela vous donne plus de contrôle sur le processus de comparaison et vous permet de l'adapter à vos besoins spécifiques.
Il existe plusieurs alternatives aux PhantomcSS pour tests de régression visuelle, y compris les backstopjs, le wraith et les Gémeaux. Ces outils offrent des fonctionnalités similaires aux PhantoMCSS, mais ils peuvent avoir des forces et des faiblesses différentes en fonction de vos besoins spécifiques.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Caractères d'échappement JavaScript
La différence entre un classeur et une feuille de calcul
Utilisation de getproperty
Quel est le nom de cette voix modifiée ?
Logiciel de surveillance de serveur
Comment définir les éléments de démarrage au démarrage
Format de courrier électronique professionnel
Comment augmenter la vitesse de téléchargement
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
