本記事は デザインウィーク 6日目の記事です。
👩🎨 5日目 ▶▶ 本記事 👨🎨
はじめに
こんにちは、Webデザイン事業部の中平です。
フロントエンド開発の技術向上を目指し、最近は主にモックアップの制作を行っています。
モックアップ制作には必ず「検証（ブラウザテスト）」が伴いますが、これは、実機やエミュレータなどの環境を用意し、手動で検証を行い、バグを起票する、といった非常に手間がかかる作業です。
この作業を振り返るたびに、「もっと効率化ができたらいいのにな～」、「見落としがないか心配だな…品質を落とすわけにはいかないし…」と感じつつも、改善に向けてはなかなか踏み出せずにいました。
そこでテスト自動化ツールの導入が検証作業の効率化に繋げられるのではないかと考え、ツールの調査・比較を行いました。
今回は実際に使用した3つのツールについて紹介します。
ツールの選定
ビジュアルテストは検証工程の中で特に工数がかかる作業であり、現状の目視確認では見落としの発生や担当者による検知精度のばらつきなど、品質への影響が懸念されています。
よって今回はブラウザテストの中でも、デザインや修正前の状態と比較して表示崩れがないかをチェックする「ビジュアルテスト」の自動化に焦点を当て、以下の必須条件を満たすツールから選定しました。
- 表示崩れの検知（ビジュアルテスト）が可能であること
- クロスブラウザテストが可能であること
類似ツールとの比較を経て、最終的に以下の3つを検証対象としました。
- Autify
- mabl
- percy
ツールの特徴・機能の比較
各ツールのビジュアルテストについて、テスト登録から実行までの手順と特徴・機能の比較を行いました。
Autify
テスト登録から実行までの手順
テストの新規作成を選択すると画面操作がレコーディングされる状態で開始されます。
ビジュアルテストの場合はこの状態から登録を進めます。
対象要素をクリックで選択し、「対象の見た目が変わらないことを確認する」コマンドを選択すると登録が完了します。
Autifyは画面全体ではなく要素単位での比較を行う仕様のため、画面内の全要素について同じ手順で登録をしていく必要があり、少し手間がかかります。
テストケースは実行環境と紐づけてプランとして登録し、テスト実行時はプランごとの実行ボタン1つで登録されたテストケースを一括実行できます。
特徴・機能
- 画面全体ではなく要素単位での比較を行う仕様となっており、要素の高さが変わる修正や要素の追加によって上下の配置ずれが発生した場合でも、比較対象の範囲は影響を受けにくい。
- 日本語でサポートが受けられるため不明点が解消しやすく、テスト登録時の技術的なサポートも手厚い。
mabl
テスト登録から実行までの手順
ビジュアルテストの場合は、テストの新規作成から「新規ビジュアルテスト」を選択し、アクセス先のページリストに対象画面のURLを入力すると登録が完了します。
テストケースは実行環境と紐づけてプランとして登録し、テスト実行時はプランごとの実行ボタン1つで登録されたテストケースを一括実行できます。
特徴・機能
- 画面全体での差分比較を行う仕様のため、要素と要素の間の余白値確認や、ビューポートに収まらない要素の表示崩れ確認が可能
- 差分がある箇所が要素単位でハイライトされ判別しやすい。
- 日本語でサポートが受けられるため不明点が解消しやすい。
percy
テスト登録から実行までの手順
percyはビジュアルテストに特化したBrowserStackの機能の1つで、コマンドラインで実行します。
Autifyやmablのようなツール上でのテスト登録作業はありませんが、対象ページのキャプチャを取得するための設定が必要です。
設定は以下のドキュメントを参考に行いました。
Percy basics | BrowserStack Docs
おおまかな手順は以下の通りです。
- 開発環境などにCLI をインストールする
- ダッシュボードからプロジェクトを作成する
- 環境変数を設定し、開発環境とプロジェクトを紐づける
- キャプチャを識別するファイル（キャプチャ取得対象ページの画面名、URLを記載）を作成
設定が完了したら、コマンドでビルドを実行します。
キャプチャが取得されプロジェクトにアップロードされると、ブラウザで実行結果が確認できます。
特徴・機能
- 画面全体での差分比較を行う仕様のため、要素と要素の間の余白値確認や、ビューポートに収まらない要素の表示崩れ確認が可能
- 前回のテスト実行時の状態をベースラインとした比較だけでなく、Figmaからインポートしたデザインとの差分比較が可能
ツールの調査・比較から見えた、今後の期待
ツールの調査・比較の結果、特にビジュアルテストの検知精度とクロスブラウザの対応環境については、現状の課題はあるものの、今後の発展に大きな期待を感じました。
ビジュアルテストについては、要素の高さが変わる修正や要素の追加によって上下の配置ずれが発生した場合に余分な差分が検知されたり、逆に修正を行っているのに差分が検知されなかったりと、ツールによって精度のばらつきが見られました。
ツールが表示要素をパーツ単位で認識し、パーツ単位の表示崩れやパーツ間の余白の変更を検知するようなテストが可能になることで、より精度が高まることが期待されます。
クロスブラウザについては、OS、ブラウザ、画面幅（レスポンシブ対応）の観点で、どのツールもいずれかに不足が見られました。
検証環境はこれらの組み合わせで多岐にわたるため、より柔軟に対応できるようなテスト実行環境が提供されることで、より多くのプロジェクトでの活用が期待されます。
加えて外部からインポートしたデザインとの比較ができるツールが増えると、業務での実用性が高まりそうです。
今後の機能向上に注目し、Web制作の効率化に役立てていければと思います。
活用方法
ツールを使ったビジュアルテストでは、人間の目では気づけないような細かい差分まで検知できるため、例えばステージング環境と本番環境の差異確認のような、全く同じであることを確認するケースで活用できます。
また、今回検証した自動化ツールの中にはリグレッションテストの機能を持つものもあり、普段のモックアップ検証作業の中では以下のようなケースで活用できます。
- モックアップ修正時の動作周りのノンデグレ確認
- コンポーネントやパーツ単位でのテスト
- コンポーネントやパーツ単位でテストケースを登録しておくことで、それらの組み合わせたページ全体のテストケースが容易に作成可能
おわりに
今回ご紹介した3ツールはすべて無料トライアルが可能です。
ぜひみなさんも実際に試して、実業務での活用方法を検討してみてはいかがでしょうか？
