隣接するトピックのリクエストに応じて作成-Yandexで検索をテストする方法。 結果ブロックのスクリーンショットベースのテスト
深いリファクタリングについての物語。
アプリケーションには、ビジネスの夜明けに実装された1つのモジュールがありました。 モジュールは他のモジュールとは異なるパターンを使用して実装され、グローバル変数を利用し、互いに密接に接続された100を超えるjavascriptファイルで構成されていました。 モジュールの作成に使用されたあまり知られていないフレームワークは、他のどこでも使用されていませんでした。 その結果、バグを修正したり新しい機能を追加したりするのに、他のモジュールよりも2〜3倍時間がかかりました。 機能の今後の変更に関連して、このかなり大きなモジュールをリファクタリングする緊急の必要性があります。
この場合の単体テストは適合しませんでした、なぜなら モジュールの変更は、完全にはほどほどではありませんでした。 モジュールの機能テストを自動化するために、 phantomjsが選択されました。
ビジュアルコンポーネントは、アプリケーションの作業において重要です。あらゆる種類の要素、ページ上の正しい場所、データの正しい表示を強調表示します。 視覚的な変化を追跡するために、テスト中にスクリーンショットを撮ることが決定されました。 phantomjsの利点により、これが簡単になります 。
page.render('test0001-after-login.png');
私たちが知っているボリュームの機能をカバーする十分な数のテストが書かれています。 後に判明したように、私たちは十分に知りませんでした:)これらのテストは数百のスクリーンショットを生成しました。 明らかに、写真を互いに比較することは、まったくありがたい仕事です。 これは自動的に行う必要があります。 以前のプロジェクトの1つで、画像の操作（カット、接着、領域の検索、画像の重ね合わせなど）を使用してPythonにいくつかのスクリプトを実装しました。
すべては自転車の発明なしで行きました。 関係する強力なクロスプラットフォームユーティリティパッケージ-ImageMagick
compareは、2つのスクリーンショットを比較し、違いを強調表示して、画面に情報を表示できます。
呼び出し例：
compare.exe -metric AE shots/test-002_opentree.png reference/test-002_opentree.png diff-002.png 2>&1
新鮮なスクリーンショットを撮り、リファレンスと比較し、画面にテキスト情報を表示し、詳細を手動で表示するためにグラフィック情報をファイルに保存します。
これらの2つのスクリーンショットの違いに気付くことは困難です。
しかし、違いが強調表示されている場合、すべてが明らかです。1つのブロックには点線ではなく実線の境界線があります。
最初の2つの写真はphatomjsテストによって撮影され、最後の写真はcompareの結果です。 情報の一部は次のように予約されています プログラムのインターフェースが古くなっていても、公開する公式の許可がありません。
ペンの最後のストロークは、フォルダーを新しいスクリーンショットと比較し、フォルダーを参照画像と比較するpoweshellスクリプトです。比較後、関心のないものを削除します。 スクリプトは、よりプラットフォームに依存しない言語に簡単に変換できます。
コマンドラインから実行する前に、必ずスクリプトを確認してください。 Windowsはデフォルトで、署名されていないスクリプトの起動を許可しません。 それをどうするかはヘッダーに書かれています。
スクリプトはこちら-detectChanges.ps1
脅威。 Pythonを使用してこの問題を解決することに関する誤った情報をおinformationびします。