大規模なWebサイトの運用を長期間行っていると、ちょっとしたCSSの修正が思いもよらぬところに影響を与えてしまうことは少なくありません。更新するたびに全てのページを確認するのはとても大変ですよね。そんなときは「ビジュアルリグレッションテスト」が有効です。リグレッションテストとはプログラムを変更したときに、予想外の影響が表れていないかを検証するためのテストのことで、そのテストを視覚的に、つまりキャプチャをとって行うテストのことをビジュアルリグレッションテストと呼びます。ビジュアルリグレッションテストを導入、運用するのはかなり大変で、チャレンジしたけど挫折した...という方もいらっしゃるのではないでしょうか。今日はそのハードルを取り除くべく、WebdriverIOを利用したビジュアルリグレッションテストの導入についてご紹介します。WebDriverを使用したクロスプラットフォームなテストフレームワークです。テストフレームワークなので基本的にはE2Eテストなどに利用しますが、単純にブラウザを自動操作したい場合にも利用することができます。WebdriverIOではServiceと呼ばれるサードパーティのパッケージや、テストの結果をどう出力するかを制御するReporterをインストールすることでかなり柔軟にテストの構築ができます。v5から使用できる「wdio-image-comparison-service」というServiceを利用してビジュアルリグレッションテストを行います。v8系を利用しているとエラーになることが多いため、v10系にバージョンアップしておくことをオススメします。環境の準備WebdriverIOの基本的な準備を行います。WebdriverIOのCLIパッケージをインストールします。--save-devインストール後、テストを実行する環境などの設定を行います。下記のコマンドを実行するとQA形式で設定ができます。configデフォルトで聞かれる質問の内容は下記のとおりです。machine)テストフレームワークは何を使用するか(mocha)WevdriverIOのコマンドを同期、非同期どちらで実行するか(sync)テストコードをどこに配置するか(./test/specs/*/.js)テスト結果をどのように出力するか(spec)有効にしたいServiceはどれか(chromedriver)テストしたいWebページのベースとなるURL(http://localhost)全ての質問に答えると、wdio.conf.jsという設定ファイルが作成され、必要なパッケージがインストールされます。ビジュアルリグレッションテストを行うためのwdio-image-comparison-serviceはデフォルトではインストールされないので手動で追加します。アサーションライブラリとしてChaiを使用するため、こちらも追加でインストールします。-Dつづいて、作成されたwdio.conf.jsに少し手を加えます。先ほどインストールしたwdio-image-comparison-serviceの設定です。'chromedriver'],このほかにもCSSアニメーションを無効にするオプションなどがあります。options」の項をご覧ください。これで設定は完了です!次は、テストコードを書いていきます。テストコード今回のテストでは、実行するたびにWebページを上から下まで丸ごとキャプチャし、ベースキャプチャと実行時のキャプチャを比較して差分があるかどうかを確認します。ベースキャプチャとなるのは最初の1回目で保存されたキャプチャです。ベースキャプチャを変更する場合は手動でファイルを上書きします。「環境の準備」フェーズで指定した「テストコードをどこに配置するか」で設定したディレクトリにJavaScriptファイルを配置します。});});ページを丸ごとキャプチャする必要がない場合は、単純に画面内だけ、もしくはCSSセレクタで一部の要素だけを指定してキャプチャすることも可能です。準備が整ったら下記のコマンドを実行してみましょう。Chromeが自動で立ち上がり、指定したページが開きます。1度目のテストでは、比較元となる基準のキャプチャがないため、その旨がコンソールに表示されます。2度目以降のテストでは、比較の結果が下記のように表示されます。差分を出すために当社のトップページとサービスカテゴリのインデックスページを比較してみました。0キャプチャを比較した結果、差分がない場合は0になるべきところが、6割くらいの差分が出ているということを指しています。(別のページなので、差分が出て当然ですね)差分がある場合はdiffフォルダが作成され、どこに差分があったかが分かる画像が保存されています。ピンク色になっている箇所が、比較の結果一致しなかった部分です。差分が一目瞭然ですね!これまで私も「ビジュアルリグレッションテスト」と検索して何度も挫折してきましたが、これまで試したどのフレームワークよりも簡単にテストができたと思います。Reporterを使用すれば結果を見やすい形式で出力することもできます。