CSS回帰テストツールbackstopjsの使い方

今回は、UI によって生成された画像とフロントエンドによって書き込まれた画像を自動的に比較することができる backstopjs を紹介します。これは非常に使いやすいですが、途中でいくつかの問題も発生します。書き込みプロセスを書き留めて記録してください

まず、

<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

をインストールした後、適切な場所に新しいフォルダーを作成し、

<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

を実行する必要があります。初期化後

backstop_dataフォルダーをクリックします

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 }

次に、Baidu Mapsを例として取り上げます。つまり、シナリオのURLをhttps://map.baidu.com/mobile/webappに変更します。 /index/index/

iponeの形式をエクスポート 基本として幅を375、高さを667に変更します

この時バックストップテスト

を実行すると自動的にページが開きます

この時のbackstop_dataフォルダis

その後、バックストップ承認を実行し、生成されたばかりの画像を標準として使用し、URL を

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

に変更してバックストップ テストを実行します。実行後、2 つのページ間の相違点が
としてマークされます。

この時点の結果が比較の結果であり、比較に従って異なる変更を加えることができます。

この時点で、backstop_data にはさらに bitmaps_reference が含まれています

概要: backstop Approve を実行すると、現在取得されている画像を参照として使用する Backstop Reference を実行することもできます

bitmaps_reference の画像を自分で定義することもできます。参照ピクチャをカスタマイズするということは、UI ピクチャをここに直接配置することを意味します。ただし、ピクチャの命名はバックストップの命名規則に従う必要があるということです。つまり、後で生成されたピクチャ名を直接コピーして名前を付けることができます。テストです

また、最初に先生の指示に従っていたとき、携帯電話で写真を生成できませんでした

もう一度情報を確認したところ、誰かがラベルに名前を書いていたことがわかりました

もう一度テストしましたラベルでも名前でも問題ないことがわかりました

今度は Web ページを比較してみましょう

今書いているのは最も基本的な使い方です。詳しい使い方はgithubにありますので、必要に応じてgithubで確認してください。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 related Reading：

ES6モジュール構文の読み込みインポートエクスポート

css擬似クラスセレクターhtmlのボックスモデルのサマリーhtmlのさまざまな種類のボックスのベースライン

の判断方法

以上がCSS回帰テストツールbackstopjsの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。