※この記事は MagicPodアドベントカレンダー2025 の6日目の記事です。
こんにちは！
ポーラ・オルビスホールディングスのITプロダクト開発チームでスクラムマスターをしている川田です。
私たちのチームでは、MagicPod を導入してテスト自動化を推進しています。
先日、MagicPod社の皆さまに弊社のオフィスまでお越しいただき、導入に至った背景や活用状況についてインタビューしていただきました
詳細は上記のすばらしい記事にまとまっているので、今回は運用で工夫した内容を小ネタとして書こうと思います
縦長のWebページ全体の画像差分チェックを実施したい！
MagicPodには画像差分チェックの機能があります。いわゆるVRT（Visual Regression Test）を行うための機能で、あらかじめ期待する画像を登録しておくことで、テスト時の画面表示が期待値とずれていないかチェックすることができます。
画像差分チェックは手軽で非常に便利ですが、1つ制約があります。差分チェックは現在画面に表示されている内容をキャプチャした画像で実施されるため、縦長のページ全体の差分をチェックすることができません。
公式の回避方法
そのままではチェックできませんが、MagicPodのサポートページに回避方法が載っています。特定のUI要素まで自動的にスクロールする機能を利用して、差分チェック→スクロール→差分チェック・・・と繰り返していく方法です。
公式の方法で対応できないケース
基本的には前述の方法で回避可能ですが、自動スクロールの対象とした特定のUI要素以降の全体が上下方向にずれたり、その要素を含むブロック全体の位置が（意図せず）変更されたりした場合、それらを検知できずにテストが通ってしまうケースがあります。
例えばこのQiita記事で「公式の方法で対応できないケース」セクションまで自動スクロールする設定を行っており、セクションの直前に大量の改行が入ってしまったら、画像差分を行う位置によってはズレを検知できないことがあります。
工夫した点
この問題を解決するために、次の工夫を行いました。縦長のページをチェックするためには、公式のドキュメントにもある通りスクロールと併用するしかありません。しかし、特定のUI要素に依存する形ではなく、常に一定のスクロール量を担保できれば描画のズレを確実にとらえることができます。
一定のスクロールを行うために、キーボードのPageDownを利用します。MagicPodには「キーボードキー入力」というコマンドがあるので、そちらを利用します。
キーボードキー入力を選択するとステップにグレーの四角が表示されるので、そちらをクリックしてショートカットキーの入力ダイアログを表示します。
ダイアログ上でPageDownキーを押すと、右側のようにテキストボックスに押したキーが表示されます。その後OKボタンを押します。
ここで重要なポイントは、PageDownを実行する前に対象のページにフォーカスをあてておく必要がある点です。ページにフォーカスがあたっていないとPageDownが失敗します。よって、ページ内の領域やラベルなど、適当なUI要素をクリックするステップを直前に入れておきましょう。
さいごに
今回はMagicPodの小ネタをご紹介しました。
直近ではMagicPod AutopilotやAIアサーションなど、生成AI関連のアップデートが積極的に行われているので、次回はそれらの活用事例が書けるようにトライしたいと思います！