QAのWebテストで使う。ブックマークレットという枯れた技術の水平思考で、MagicPodの画像差分を効率化する

MagicPodを使い始めた当初、画像差分のメンテナンスは「仕方がない作業」だと思っていました。
自動テストなのだから、Webブラウザ上のUIがわずかに変わると多少の差分確認や更新作業が発生するのは当然。
そう自分に言い聞かせながら、毎回差分画像を目視で確認しては、フィルタする箇所を調整する日々が断続的に発生していました。

ところが、テストケースが増え、画面数が増え、差分が増えるにつれて、その「当然」は静かな重荷になっていきました。
差分が本当に問題なのか、それともブラウザの更新による微差なのか。確認するだけで集中力を使い切り、気づけば本来取り組みたかったテスト設計や改善に手が回らなくなっていました。
そんな精神を削る、テスト箇所と関係ない箇所をフィルタする単純作業そのものが、ただただ面倒だな、とボヤきながら手を動かしていました。

「もっと自動化で楽にできないのか」
「これ以上自動化するとフィルタ作業が増えるだけではないか」

そんな相反する気持ちの間で揺れながら、解決策を探し始めたときに立ち返ったのが、発想そのものを変えるという選択でした。
高度なツールを追加するのではなく、完璧な自動化を目指すのでもない。
今や「枯れた技術」とも言われるブックマークレットを使い、人がやっている操作を短くすることに目を向けたのです。

この記事は、スタンバイ Advent Calendar 2025の22日目の記事です。
昨日は、みんな大好き @arata-honda さんの記事でした。

MagicPod社でも、他の自動化ツールと同様JavaScriptの実行は開発（中？）されていますが、JavaScriptの実行というと、僕ら一般QAスタッフでは敷居が高いように感じることも少なくありません。
一方で、MagicPodのロケータ指定の理解と、ブックマークレットによる作業効率化というルートで辿ると、思いの外スムーズに理解が進むものでした。

MagicPod導入初期〜中期にかけて感じた違和感から出発し、ブックマークレットという意外な選択肢にたどり着くまでの思考の過程、そして画像差分の確認作業がどのように変わったのかを、一般QAスタッフの視点で共有します。

ブックマークレットって便利

Webテストにおいて、ブックマークレットが有効なのは、「できることが多い」からではありません。
導入のハードルが極端に低く、テスト作業の流れを壊さない。この一点に価値があります。

まず、インストールが不要です。
ブラウザにブックマークを登録するだけで使えるため、社内端末の制限や権限の壁に引っかかりにくく、QAメンバー全員が同じ条件で利用できます。

環境差分が生まれにくいことは、テストの再現性という観点でも大きな利点です。

次に、「今見ている画面」に直接作用できる点です。
ブックマークレットは、遷移後の画面やテスト実行結果を別ツールに渡す必要がなく、次の操作に移る。
この一連の流れの中に自然に溶け込み、思考を中断させません。

また、QA向けの運用と相性が良い点も見逃せません。
コードは短く、役割も単純なため、「壊れたら直す」「不要になったら消す」という判断がしやすい。
長期保守を前提にしなくてよい点は、テスト自動化の補助ツールとして重要です。

Webテストの現場では、派手さよりも「邪魔をしない道具」が求められます。
ブックマークレットはまさに、枯れているからこそ信頼できる、静かな補助輪のような存在です。

ブックマークレットはAIで作る

高度なツール導入や大規模な仕組み化は、ときに大きな成果を生むことがあります。
一方で、日々のテスト業務の中では「そこまでではないけれど、地味につらい」作業が積み重なっていきます。

今回紹介するブックマークレットの取り組みは、
その“地味なつらさ”に正面から向き合った結果でした。

誰でも使えて
壊れても怖くなくて
やめたくなったら、すぐにやめられる

そんな道具でも、現場の負担は確実に軽くなります。

もし、
「これは仕方ない作業だ」と思いながら続けている操作があるなら、
発想を少しだけ変えてみる価値はあるかもしれません。

派手な自動化ではなく、
人の手を助ける小さな近道としてのブックマークレット。
それは、QAの仕事をもう一度“考える仕事”に戻してくれる、静謐な選択肢でした。

とはいえ、「ブックマークレットを書く」という言葉を聞いた瞬間に、少し身構えてしまう人もいるかもしれません。
JavaScript、DOM操作、ブラウザの仕様……QAの業務から少し距離のある知識に感じられるのは自然なことです。

ここで状況を大きく変えたのが、生成AIのアニキでした。

やりたいことを、そのまま言葉にする。
「この画面で、特定の要素を非表示にしたい」
「画像差分ページで、毎回クリックしているボタンを一括で押したい」

それだけで、動くブックマークレットの原型が返ってきます。
最初に生成されたコードが、そのまま使えないことも少なくありません。それでも、「ゼロから考える」必要がなくなるだけで、心理的なハードルは驚くほど下がりました。

重要なのは、AIに“完成品”を期待しないことです。
あくまで「叩き台を作るアニキ」として使い倒す。
短いコードを試し、動かなければ少し直す。不要なら捨てる。
この平身低頭なアニキという存在のあまりにもAI的な軽さは、ブックマークレットという技術の特性と非常に相性が良いと感じています。

AIとの対話

• 現在のURLとページタイトルをセットでトースト表示し、クリップボードにコピーするブックマークレットを作ってください
• 現在のページに表示されているすべてのアコーディオンを展開するブックマークレットを作ってください
• 入力ボックスの値を一括で変更するブックマークレットを作りたいです
• aタグのリンク先URLを画面上にオーバーレイ表示するブックマークレットを作ってください
• 「検証↔︎本番環境」間で、簡易にURL変更するブックマークレットが欲しいです
• 複数ある要素「//h2」タグの文字列をトースト表示し、クリップボードに改行区切りでコピーするブックマークレットを作成してください

こうした些細な会話の積み重ねが、数秒のストレスを減らし、とめどない打鍵と腱鞘炎の恐怖から守ってくれる、秘密のブックマークレットになるかもしれません。
便利だと感じたブックマークレットは、AIにChrome拡張機能へ変換してもらうのも一案です。

そんなありふれた日常、ふとした瞬間にもう一人の自分が問いかけます。
「あれ？MagicPodのブラウザテストで使えるんじゃね？」

MagicPodとブックマークレットとの邂逅

画像差分の肝は、実際に不要な差分を極力なくすことです。
当たり前ですが、これが難しい。

可変箇所が多いと、本来チェックしたい場所にフォーカスするのが極端に難しくなります。

MagicPod持ち前の、画像差分を部分的に除外するフィルタ機能や差分の許容率も、UI変更によって位置が変わると、スクラップ&ビルドの大仕事になります。
過去のフィルタ箇所なんぞ覚えておらず、更新を重ねながら次の作業時間がある時に解消しようだなんて、そんな大きな決意で後回しにする性格であったなら尚更、今の画像差分が適切な箇所を比較しているかなんて、誰が覚えているのでしょうか。
そんな記憶力がいい人なら、過去の悪い思い出たちが自分を再び傷つけるような、辛い人生を歩んでいるかもしれません。

• 縦スクロールの変化によって、スクロール後の画像差分に微妙な差が出る
  • スクロール幅を可変させてしまう要素を削除するブックマークレット
• チェックしたい箇所以外で高頻度に発生する画像差分（2回目以降の画像差分なども）
  • チェック箇所以外の要素を非表示にするブックマークレット

MagicPodでブックマークレットを実行すればいいじゃないか。
答えはシンプルでした。

MagicPodに実装する

指定したXPathを非表示にするブックマークレットを作ってもらいました。

javascript:(function(){
  var xpaths=[
    "//h1",
    "//h2",
  ];
  function hideByXPath(xpath){
    var r=document.evaluate(xpath,document,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null);
    for(var i=0;i<r.snapshotLength;i++){r.snapshotItem(i).style.display="hidden";}
  }
  for(var j=0;j<xpaths.length;j++){hideByXPath(xpaths[j]);}
})();

display="hidden"をdisplay="none"に変更すれば要素削除になります。
セレクター指定にしたり、日付などの可変要素のテキストを固定値に変えることも可能です。
答えはシンプルでした。

使い方は、

UI要素「aタグ」の属性「href」に、値「上記のようなブックマークレットのコード」をセット
するコマンドを作成し、クリックするだけ。

もしくは、

UI要素「divタグ」の属性「onclick」に、値「javascript:を除いたブックマークレットのコード」をセット

するコマンドを作成し、クリックするだけ。
（MagicPodでJavaScriptの実行が使えるようになったら、そのコマンドを使ってください。）

共有ステップにすぐに入れました。
フィルタなき画像差分の世界へようこそ！です。
アニキさえいれば、答えはシンプルでした。

テスト作業の効率化でブックマークを作成していけば、MagicPodのメンテナンス時間も効率化できた事例の紹介でした。
改修箇所の確認、不具合報告や仕様確認に繋がらない画像差分は悪。
探してたものは こんなシンプルなものだったんだ。

明日のお楽しみは、僕が敬愛してやまない @mick-az さんの記事です。

ではでは。