Zenn
💨

複雑な XPath の作成は AI に任せよう

に公開
AI
E2E
自動テスト
QAエンジニア
MagicPod
tech

はじめに

こんにちは！QA エンジニアの @Daishu です！今回は、E2E 自動テストの Tips について紹介させて頂きます。※実務で利用している関係上、MagicPod にやや特化した内容となります。

XPath について

E2E 自動テストを作成する上で避けて通れないのが、ページ要素を特定する方法です。なぜなら、ページ要素を特定することで対象の UI を操作/検証でき、自動テストとして動かすことができるからです。XPath とは、ページ要素を特定するためのクエリ言語であり、指定した構文に従って対象ページから一致する要素を特定できます。

https://developer.mozilla.org/ja/docs/Web/XML/XPath

XPath の問題点

XPath の構文はパッと見で意味を理解しづらく、非常に扱いづらい点があると思います。また、詳細かつ柔軟に記載できる反面、最適解はあるものの書き方が何通りもあったり、少しの違いで動かなかったりするので、人間が完璧に使いこなすのは難しい印象です。

例：
 - ✅ //div[@class="main"]/p[1] → 最初の <p> を取得
 - ✅ //div[@class="main"]/p[position()=1] → 同じく最初の <p> を取得（遠回りver.）
 - ✅ //div[contains(@class, "main")] → class="main-content" も拾っちゃう

癖が強く扱いづらいと感じてしまう XPath ですが、使いこなせるとノードツリーの深い場所にある複雑なページ要素も特定して、操作/検証できます。

ちなみに、対抗馬としては CSS セレクタがあります。こちらは、ブラウザが最適化しているので、XPath よりもページ要素を特定するスピードが速いです。

E2E テストは実行時間が長くなりやすいので、要素を素早く特定できることは重要です。操作対象の UI に合わせて、CSS セレクタと XPath を使い分けて利用するのが良いと思います。

項目 XPath CSSセレクタ
可読性 複雑で記述が長くなりがち 短くてシンプル
パフォーマンス 遅め (特に//を多用すると) ブラウザが最適化しており速い
自動テストでの利用 複雑な要素の特定に向いている シンプルな要素の特定に向いている

💡今回は、複雑な要素の特定で使う想定で XPath を利用していきます。

AIにXPathを特定させよう

XPath を理解していても、複雑なページ構成にある要素ゆえに自力で構文を組み立てるのに苦労するケースがあります。そこで、今回は「AIを用いてXPathを特定しよう」という、Tips 紹介です。

① 対象ページのxmlファイルを用意

XPath は、XML ドキュメントから要素を検索することが可能です。xml ファイルの取得方法は様々ありますが、私は MagicPod を介して取得しています。

MagicPodを利用する方法

  1. MagicPod で対象ページを開いて UI キャプチャを取得する
  2. UI一覧から対象の「3点リーダ」>「この UI について問い合わせる」を押す
  3. 添付された xml ファイルをダウンロードする (送信しないこと)
UI一覧 UIについて

※ ref. MagicPod ヘルプセンター「XMLファイルをダウンロードして確認する」

② AI に xml ファイルを食わせる

任意の AI ツールに xml ファイルをアップロードします。そのファイルに対して、AIに特定したい要素の XPath に関する質問 (プロンプト) を行います。

基本的に「XX の XPath を教えて」で問題ないですが、特定のキーワードをフックして要素検索したい等あれば、プロンプトに追記します。可変な値を含んだ XPath 構文を作成する際に便利です。

例：「xml を参照して、テキスト XX を用いて、YY を特定する XPath を教えて」
XX を変数にして自動テストに組み込めば、可変な値にも対応したロケータにできます✨

Google の検索ページの xml を渡した例

AIは xml ファイルからノードツリーを解釈して XPath を考えて提案してくれます。

プロンプト AI回答 (Gemini)

③ XPath構文を検証する

AI が作成してくれた XPath 構文が想定通りに使えるか検証します。自動テストにすぐに組み込んでデバッグ実行する方法もありますが、私は SelecutorsHub というアドオンを利用して確認しています。人間が多少手直しするケースもあるので、検証しつつ修正できて便利です。

意図通りに動作しない場合は、手順②に戻ってプロンプトを調整しながら、別の XPath をAIに検討してもらいます。

例：「特定できませんでした。別の案を考えてください。」

④ 自動テストにXPathを組み込む

意図通りに利用できる XPath 構文ができたら、自動テストに組み込んで利用していきます。MagicPod の場合は、新しいロケータとして自作 XPath に置き換えることが可能です。

おわりに

例に挙げたページ要素は非常にシンプルなので、AI を利用する必要はありません。自動テストツールであれば、XPath をサジェストしてくれる機能があるからです。一方で、複雑な要素を操作したい場合や、可変な値を含みたいケースで XPath を自作して組み込みたいと思うことがあります。

最も確実な方法としては、ページ要素に固有な ID を付与して特定する方法がありますが、これはプロダクトコードに手を入れる必要があります。取り急ぎ、手っ取り早く自動テストを作っていきたいシーンにおいて、XPath は非常に強力なので、ぜひ参考にしてみてください！

Discussion