コンテンツ
- 01.レイス
- やってみて
- 長所と短所
- 02. PhantomCSS
- やってみて
- 長所と短所
- 03.ジェミニ
- やってみて
- 長所と短所
- 04. WebdriverCSS
- やってみて
- 長所と短所
- 05.スペクター
- やってみて
- 長所と短所
- 佳作
- 次は何？
過去数年にわたって、「視覚的回帰テスト」という用語がWeb開発の会話でますます登場していることに気づきました...そして正当な理由があります。それは、スタイルの問題について自分のサイトを手動でチェックすることにうんざりしている人々に途方もない価値を提供することを約束します。
この人気の高まりとともに、毎月新しいツールがリリースされているようです。それぞれが素晴らしい視覚的回帰テストの自動化を提供することを約束しています。残念ながら、私はほとんどが現実よりも夢であることに気づきました。真実は、これらのタイプのテストは一見複雑に見えるということです。
ただし、群衆から目立つものがいくつかあります。それぞれに長所と短所がありますが、このリストのすべてのツールは一見の価値があると思います。
01.レイス
レイスは数年前から存在しています。これは現場で最初のツールの1つであり、GitHubリポジトリで200を超えるプルリクエストがクローズされ、機能が引き続き強化されています。これは、Rubyで開発するすべての人にとって頼りになるツールです。
やってみて
プロジェクトディレクトリから、を実行します レイスのセットアップ。次に実行します wraithキャプチャconfigs / config.yaml。これにより、BBCホームページの2つの異なるバージョンで一連のテストが実行されます。テストの実行が完了したら、新しく作成したスクリーンショットギャラリーを開いて、スクリーンショットギャラリーを確認してください。 ショット/gallery.html 選択したブラウザのページ。
テストをカスタマイズすることもできます。の中に configs / config.yaml ファイルでは、画面の幅と差分モードを設定するとともに、テストするサイトとページを更新できます。
長所と短所
- YAML構成ファイルは簡単に操作できます
- 2つの異なるURLを比較できます
- Rubyに慣れていない場合、インストールは難しい場合があります
- 個々のページに固有のインタラクションを実行するのは難しい場合があります
02. PhantomCSS
もう1つのベテランオプションであるPhantomCSSは、フロントエンド開発者の間で人気のある選択肢です。その親しみやすさと機能性により、PhantomCSSは、Webサイトのテストの観点から足を伸ばしたいフロントエンドの人々に最適です。 PhantomJS / CasperJSの上に構築されたPhantomCSSは、これら2つのツールによって提供される素晴らしい機能を追加します。
やってみて
次のコードを使用して新しいJavaScriptファイルを作成します。
casper.start（ 'http://the-internet.herokuapp.com/checkboxes'）.then（function（）{phantomcss.screenshot（ '＃checkboxes'、 'before click'）; casper.click（ '＃checkboxes input ：first-child '）; phantomcss.screenshot（' #checkboxes '、'クリック後 '）;}）;
次に、CapserJSCLIを介してファイルを実行します。 casperjsテストmyfile.js。スクリプトはバックグラウンドで実行され、画像はに保存されます スクリーンショット フォルダ。
長所と短所
- それに関する多くのチュートリアルとプレゼンテーション
- CasperJSの上に構築されており、ページアクションをテストに統合できます
- PhantomJSに限定されたテスト
- スクリーンショットを確認/管理するためのインターフェースがありません
03.ジェミニ
Geminiは、従来のSeleniumテストをそれほど複雑ではないインターフェースにパッケージ化しているため、魅力的だと思います。 PhantomCSSと同様に、スクリーングラブの周囲にカスタムアクションを定義できます。 PhantomCSSとは異なり、Geminiは、コードの整理に役立つ「テストスイート」を提供することでさらにいくつかのステップを進めます。
やってみて
を作成します .gemini.yml 次の内容のファイル（SeleniumグリッドサーバーへのURLを置き換えます）：
rootUrl：http：//the-internet.herokuapp.com/checkboxes gridUrl：http：// localhost：4444 / wd / hub browsers：chrome：desiredCapabilities：browserName：chrome
次に、テストファイルを作成し、 ジェミニ プロジェクトのルートにあるフォルダ。ファイルは次のように単純にすることができます。
gemini.suite（ 'yandex-search'、function（suite）{suite.setUrl（ '/ checkboxes'）。setCaptureElements（ '＃checkboxes'）。capture（ 'before click'）。capture（ 'after click'、function（アクション、検索）{actions.click（ '＃checkboxes input：first-child'）;}）;}）;
次に、を実行してベースラインイメージを作成します ジェミニアップデート。 1つのテストに合格したはずです。次の方法で回帰テストを実行できます ジェミニテスト、新しい画像を内部に保存されている画像と比較します ジェミニ/スクリーン ディレクトリ。
長所と短所
- Seleniumの統合により、さまざまなブラウザーやデバイスでテストできます
- さまざまな例を含む十分に文書化されたサイト
- テストをスイートにソートするためのフレームワークを提供します
- Seleniumに直接アクセスできないため、ページで実行できるアクションの種類が制限されます
- 複数の解像度で同じテストを実行するには、高度な構成が必要です
04. WebdriverCSS
まず、注意点です。WebdriverCSSをより最新のモジュールに置き換える努力がなされているため、WebdriverCSSの将来は不確実です。そうは言っても、同じ基本構造が次の実装に引き継がれるので、まだ言及する価値があると思います。
Geminiと同様に、WebdriverCSSはその機能のためにSeleniumに接続します。また、別のツールであるWebdriverIOの上にもあります。これはWebdriverIOエコシステムの一部であるため、フレームワークが提供するすべてのメリットを享受できます。これには、スクリーンショットを撮る前後に、ブラウザに送信できる何百ものコマンドが含まれます。
WebdriverCSSは、Mocha、Jasmine、Cucumber.jsなどのテストフレームワークともうまく統合されます。 Sauce LabsやBrowserstackなどのクラウドSeleniumサービスとの接続を追加すると、視覚的な回帰テストを最上位に持つフル機能の機能テストスイートが得られます。
やってみて
新しいJavaScriptファイルを作成します（test.js）次のコンテンツを含むプロジェクト内：
var client = require（ ’webdriverio’）。remote（{desiredCapabilities：{browserName： ’chrome’}}）require（ ’webdrivercss’）。init（client、{screenWidth：[640,1024]}）; var screenscreenElement = [{name： ’checkboxes’、elem： ’＃checkboxes’}]; client.init（）.url（ 'http://the-internet.herokuapp.com/checkboxes'）.webdrivercss（ 'before-click'、screenshotElement）.click（ '＃checkboxes input：first-child'）。webdrivercss （ 'アフタークリック'、screenshotElement）.end（）;
コマンドラインに次のコマンドを入力して、テストを実行します。 $ノードtest.js。をチェックして作成されたイメージを検証します webdrivercss フォルダ。テストを再度実行してスクリーンショットが変更されると、 差分 フォルダが追加され、それぞれの差分画像がその中にあります。
長所と短所
- WebdriverIOを使用しているため、フレームワークが提供するすべての機能を利用できます。
- さまざまな画面解像度のクイック構成
- スクリーンショットの特定の領域を非表示/マスクできます
- この特定のプラグインはもはや公式に維持されていないため、将来は不確実です
- WebdriverIOの使用方法を学ぶ必要があります
05.スペクター
このリストの他のツールとは異なり、Spectreはテストを実行しません。代わりに、スクリーンショットを管理するための管理インターフェイスとともに、画像比較機能の提供に重点を置いています。
通常の使用では、SpectreをWebdriverIOやPhantomJSなどのツールと組み合わせます。後者はスクリーンショットをキャプチャする作業を行い、Spectreは画像の保存と処理を管理します。私はこれが好きです。関心の分離により、コミュニティとして私たちが選んだテストツールを簡単に入手できるだけでなく、共通の管理インターフェースを構築できるからです。
やってみて
スペクターのウェブサイトで、パスを開きます / tests / new /。そこから、テスト情報をカスタマイズして、最初のスクリーンショットをアップロードできます。テストを送信した後、サイトのメインページに移動すると、「テストプロジェクト」が作成され、1が合格したという通知が表示されます。テストの詳細については、そのページのリンクをクリックしてください。
次に、に戻ります/ tests / new ページを作成し、新しい画像をアップロードします。完了したら、メインページに戻ると、Spectreが比較を実行し、テストの失敗を報告していることがわかります。
長所と短所
- スクリーンショットを管理するためのクリーンでフレンドリーなインターフェース
- テスト環境の特定の領域に焦点を当てて、あまり多くのことをしようとはしません
- Rubyサーバーのセットアップに関する知識が必要です
- RESTAPIを介してデータ/スクリーンショットを送信する方法を知っている必要があります
佳作
上記のリストで注目のスポットを獲得できなかったとしても、言及する価値があると思うツールがいくつかあります。彼らです：
- ガレンフレームワーク
- シューフ
- BackstopJS
このテーマに関するツールと記事の包括的なリストについては、visualregressiontesting.comをご覧ください。
次は何？
「そのリストは素晴らしいですが、使用するツールを教えていただけませんか？」と聞いたことがあります。ええと...いいえ、それはあなたがテストしているものに大きく依存するからです。かなり単純なサイトをチェックしている場合は、WraithまたはGeminiが最適なオプションです。ただし、ユーザーアクションを模倣する必要がある場合は、WebdriverCSSまたはPhantomCSSの方が適しています。
よくわからなくても心配しないでください。 1つ選んで試してみてください。どのツールを選択しても、フロントエンドテストと、それがどれほど強力であるか（複雑ではありますが）についての貴重な教訓を学ぶことができます。
この記事はもともと ネットマガジン 290号; ここで購入!
