Comment utiliser l'outil de test de régression CSS backstopjs

Cette fois, je vous présente backstopjs. Il peut comparer automatiquement les images produites par l'interface utilisateur avec les images écrites par le front-end. Il est très simple à utiliser, mais vous rencontrerez également des problèmes lors du processus. processus d'écriture. Quelques questions, notez-les maintenant et enregistrez-les

Tout d'abord, vous devez installer le backstop

<pre style="
font-family
: "Microsoft YaHei"; padding: 5px; max-width: 680px !important; 
background-color
: rgb(246, 246, 246); border: 1px dotted rgb(170, 170, 170); 
white-space
: pre-wrap; 
word-wrap
: break-word;">npm install -g backstopjs

Après l'installation. , créez un nouveau fichier dans le dossier approprié, exécutez

<pre style="font-family: "Microsoft YaHei"; padding: 5px; max-width: 680px !important; background-color: rgb(246, 246, 246); border: 1px dotted rgb(170, 170, 170); white-space: pre-wrap; word-wrap: break-word;"> backstop init

Après l'initialisation

cliquez sur le dossier backstop_data

open package.json

<pre style="font-family: "Microsoft YaHei"; padding: 5px; max-width: 680px !important; background-color: rgb(246, 246, 246); border: 1px dotted rgb(170, 170, 170); white-space: pre-wrap; word-wrap: break-word;">{ "id": "backstop_default", "viewports": [ //viewports 为生成的截图的格式，可以写多个，至少为一个
{ "label": "phone", //手机 "width": 320, "height": 480 },
{ "label": "tablet", //平板 "width": 1024, "height": 768 }
], "onBeforeScript": "chromy/onBefore.js", "onReadyScript": "chromy/onReady.js", "scenarios": [
{ "label": "BackstopJS Homepage", "cookiePath": "backstop_data/engine_scripts/cookies.json", "url": "https://garris.github.io/BackstopJS/", //这个路径为我们将要截图的网址 "referenceUrl": "", "readyEvent": "", "readySelector": "", "delay": 0, "hideSelectors": [], "removeSelectors": [], "hoverSelector": "", "clickSelector": "", "postInteractionWait": "", "selectors": [], "selectorExpansion": true, "misMatchThreshold" : 0.1, "requireSameDimensions": true }
], "paths": { "bitmaps_reference": "backstop_data/bitmaps_reference", "bitmaps_test": "backstop_data/bitmaps_test", "engine_scripts": "backstop_data/engine_scripts", "html_report": "backstop_data/html_report", "ci_report": "backstop_data/ci_report" }, "report": ["browser"], "engine": "chrome", "engineFlags": [], "asyncCaptureLimit": 5, "asyncCompareLimit": 50, "debug": false, "debugWindow": false }

Maintenant, prenons Baidu Maps comme exemple, c'est-à-dire changeons l'URL des scénarios en https://map.baidu.com/mobile/webapp/index/index/

En fonction du format d'exportation de l'iPhone, modifiez la largeur à 375 et la hauteur à 667

À ce moment, l'exécution du test de backstop

ouvrira automatiquement une page

Le dossier backstop_data à ce moment est

Ensuite, exécutez l'approbation du backstop. À ce moment, l'image qui vient d'être générée sera utilisée comme standard. Ensuite, nous changeons l'URL en

https://map.baidu.com/mobile/webapp/index/index/qt=cur&wd=%E4%B8%8A%E6%B5%B7%E5%B8%82&from=maponline&tn=m01&ie=utf-8=utf-8/tab=line

puis exécutez le test de backstop. Après l'exécution, la différence entre les deux pages sera Marquez-le

Le résultat à ce moment est le résultat après comparaison, et vous pouvez apporter des modifications en fonction de la différence. en comparaison.

À l'heure actuelle, backstop_data contient plus de bitmaps_reference

Résumé : lors de l'exécution de l'approbation du backstop, vous pouvez également exécuter la référence du backstop, qui utilise l'image actuellement obtenue comme référence,

Vous pouvez également définir votre propre image bitmaps_reference, c'est-à-dire une image de référence personnalisée, c'est-à-dire y placer directement l'image de l'interface utilisateur. Cependant, une chose à noter est que le nom de l'image doit être conforme aux règles de dénomination de. backstop, c'est-à-dire Oui, copiez et nommez simplement le nom de l'image générée après le test

De plus, lorsque j'ai suivi le professeur pour la première fois, je n'ai pas pu générer la photo sur le téléphone portable

J'ai vérifié à nouveau les informations et j'ai découvert que quelqu'un avait écrit l'étiquette comme nom

Je l'ai testé à nouveau et cela a fonctionné. L'étiquette et le nom sont OK

Il est maintenant temps de comparer. les pages Web

I Ce que j'écris maintenant n'est que l'utilisation la plus basique. Il existe des utilisations très détaillées sur github. Vous pouvez le consulter sur github en cas de besoin.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Chargement de la syntaxe du module ES6 import export

Sélecteur de pseudo-classe CSS

Résumé du modèle de boîte en HTML

Comment déterminer la ligne de base de chaque type de boîte en HTML

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!