So verwenden Sie das CSS-Regressionstesttool backstopjs

Dieses Mal stelle ich Ihnen backstopjs vor. Es kann die von der Benutzeroberfläche erzeugten Bilder automatisch mit den vom Frontend geschriebenen Bildern vergleichen. Es ist sehr einfach zu verwenden, aber es werden auch Probleme auftreten Schreibvorgang. Einige Fragen, schreiben Sie sie jetzt auf und notieren Sie sie

Zuerst müssen Sie die Rücklaufsperre installieren

<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

Nach der Installation , eine neue Datei im entsprechenden Ordner erstellen, ausführen

<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

Nach der Initialisierung

auf den Ordner „backstop_data“ klicken

Öffnen Sie 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 }

Jetzt nehmen wir Baidu Maps als Beispiel, das heißt, ändern Sie die URL des Szenarios in https://map.baidu.com/mobile/webapp/index/index/

Ändern Sie je nach Format des iPhone-Exports die Breite auf 375 und die Höhe auf 667

Zu diesem Zeitpunkt wird beim Ausführen des Backstop-Tests

automatisch eine Seite geöffnet

Der backstop_data-Ordner ist zu diesem Zeitpunkt

. Führen Sie dann die Backstop-Genehmigung aus. Zu diesem Zeitpunkt wird das gerade generierte Bild als Standard verwendet. Dann ändern wir die URL in

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

und führen Sie dann den Backstop-Test durch. Markieren Sie ihn

. Das Ergebnis zu diesem Zeitpunkt ist das Ergebnis nach dem Vergleich, und Sie können entsprechend der Differenz Änderungen vornehmen im Vergleich.

Zu diesem Zeitpunkt enthalten die Backstop-Daten weitere Bitmap-Referenzen.

Zusammenfassung: Wenn Sie die Backstop-Genehmigung ausführen, können Sie auch die Backstop-Referenz ausführen, die das aktuell erhaltene Bild als Referenz verwendet,

Sie können auch Ihr eigenes bitmaps_reference-Bild definieren, also ein benutzerdefiniertes Referenzbild, das heißt, das UI-Bild direkt darin einfügen. Beachten Sie jedoch, dass die Benennung des Bildes den Benennungsregeln von entsprechen muss Backstop, das heißt, ja, kopieren Sie einfach den nach dem Test generierten Bildnamen und benennen Sie ihn

Als ich dem Lehrer zum ersten Mal folgte, konnte ich das Foto nicht auf dem Mobiltelefon generieren

Ich habe die Informationen noch einmal überprüft und festgestellt, dass jemand das Etikett als Namen geschrieben hat.

Ich habe es hin und her getestet, und es hat funktioniert. Sowohl das Etikett als auch der Name sind in Ordnung.

Jetzt ist es Zeit, das zu vergleichen Webseiten

I Was ich jetzt schreibe, ist nur die grundlegendste Verwendung. Es gibt sehr detaillierte Verwendungen auf Github. Sie können es bei Bedarf auf Github überprüfen.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

ES6-Modulsyntax laden, importieren, exportieren

CSS-Pseudoklassenselektor

Zusammenfassung des Boxmodells in HTML

So bestimmen Sie die Grundlinie jedes Boxtyps in HTML

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das CSS-Regressionstesttool backstopjs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!