こんにちは。テストオートメーションを担当しているWです。
気が付けば前回自分の担当した[記事]から約1年ぶりの投稿となりました。
今回は自動テストを実装する上でほぼ避けては通れないXPath/CSSセレクタについて、自動テストの安定性と絡めて話していきたいと思います。
はじめに
近年ではユーザの操作をレコーディングしてテストシナリオを作成できる自動テストツールが増えてきてテスト自動化の間口が広がっているのを感じます。
このような自動テストツールはコードが書けなくても自動テストを作成できることが最大の売りですが、万能という訳ではありません。
レコーディングできても実行時にうまく要素が識別できないということがよくあります。
そのような場合にはXPathやCSSセレクタで要素を指定するということが要求されます。
XPathやCSSセレクタを取得するだけならChromeの開発者ツールから簡単に行うことができますが、それをそのまま自動テストに使ってしまうと自動テストの安定性を著しく低下させることになるかもしれません。
本記事では自動テストでXPath/CSSセレクタを使用するときに気をつけるべき点について、自動テストの安定性の観点から検討していきたいと思います。
またそれに合わせて、XPath/CSSセレクタを取得する際に便利なツールの紹介も行います。
Chromeの開発者ツールによるXPathの取得
CSSセレクタについてはここで話をする範囲ではXPathと記載方法が異なるだけになるので、読み替えて確認していただければと思います。
ここでは例として、株式会社AGESTサイトのトップページの検索ボックスをXPathで指定することを考えたいと思います。
XPath自体はChromeの開発者ツールから以下のように簡単に取得することができます。
- ブラウザ上のXPathを取得したい要素を右クリックをして「検証」を選択
- 開発者ツールでXPathを取得したい要素を右クリックして「コピー」→「XPathをコピー」を選択
上記の手順により検索ボックスのXPathを取得すると以下のような文字列が得られます。
//*[@id="wrapper"]/header/div/div[2]/div[2]/form/inputこのXPathで検索ボックスを指定できるのですが、XPathの書き方は何通りもあるため、これはその1つにすぎません。
XPathの詳細については他の様々なサイトで解説されているのでここでは全てを説明しませんが、自動テストの安定性という観点からこのXPathについて簡単に見ていきたいと思います。
- XPathに含まれる
/は階層構造を示す
このXPathは7つの要素が/で繋がっているため、7つの要素の階層構造（下図の赤枠）を指定してテキストボックスを指定していることになります。
これを言い換えると、テキストボックス自体に変更が加えられていなくても、その手前の6階層の要素（下図の黄色枠）のどれかが変更されただけでテキストボックスが特定できなくなる可能性があります。
div[2]はその階層における2番目のdiv要素を示す
このため、div要素の順番が変わってもテキストボックスが特定できなくなります。
これらのことから、このXPathを自動テストで使用すると自動テストの安定性が著しく低くなってしまう事が容易に想像できると思います。
安定性の高いXPathとは？
先に述べたことを踏まえると、自動テストの安定性を高く保つには以下の点に気をつけてXPathを記述しなければなりません。
/を減らす（＝階層構造の指定を避ける）[n]を減らす（＝順番の指定を避ける）
しかしながら、テスト自動化をやり始めたばかりでXPathについてあまり理解していない人がこのようなXPathを書くのは難しいと思います。
そこで、私も実際に使用している便利なXPath/CSSセレクタ自動生成ツールを紹介したいと思います。
POM Builder
私がお勧めするXPath/CSSセレクタ自動生成ツールは、[POM Builder]です。
これは、LogiGear社が提供するブラウザの拡張機能でChromeとEdgeに対応しています。
インストール方法（Chrome）
- [POM Builder公式サイト]へアクセス
- 「Add to Chrome」を選択
- chromeウェブストアが開くので、「Chromeに追加」を選択
- 以下のポップアップが表示される場合は「拡張機能を追加」を選択
使用方法
- ブラウザ上を右クリックをして「検証」を選択
- 「要素」内のタブから「POM Builder」を選択
この時、幅が狭いと折りたたまれているので「>>」をクリックして展開する
- 開発者ツール上でXPathを取得したい要素を選択する
上記の手順で任意の要素のXPathやCSSセレクタの取得が可能になります。
Recommended Locatorには最適なロケータを提示してくれるので、Selenium等でコードをガリガリ書く際にも有用です。
またLOCATOR TESTの欄にXPathやCSSセレクタを入力して検索をすると、そのページ内に該当する要素が何個あるのか表示してくれるので、自分でカスタマイズしたXPathの確認も行うことができます。
ここで株式会社AGESTサイトのトップページの検索ボックスのXPathをPOM Builderで取得してみましょう。
//input[@name='s']どうでしょうか。
開発者ツールから取得したXPathと比べると、階層構造の指定や順番の指定が全く入っておらず、非常にすっきりとしたXPathが取得できました。
このXPathであればname属性の値さえ変えられない限りテキストボックスを検出することができます。
検索ボタンのXPathも比較してみましょう。
開発者ツール：//*[@id="wrapper"]/header/div/div[2]/div[2]/form/button
POM Builder：//button[@class='search-submit']こちらもPOM Builderによって生成されたXPathの方が階層や順番の指定がなく、自動テストの安定性が維持できるものとなっています。
もう一つ、ソリューション・サービス画面の「AQアジャイル品質/QA品質保証」セクションの要素を見てみましょう。
開発者ツール：//*[@id="qa"]
POM Builder：//section[@id='qa']これを自動テストの安定性という視点で考えてみると、どちらもIDの指定をしていますが、POM Builderはタグの種類もsectionに指定しています。
その点、開発者ツールのXPathはタグの種類については指定していません。
この要素についてはタグの種類を変更されても要素を特定できる開発者ツールのXPathの方が安定性が高いようです。
いくつかの要素について具体的にXPathを比較してみましたが、多くの場合においてPOM Builderが安定性の高いXPathを生成してくれることがわかったかと思います。
ただしPOM Builderも万能というわけではないので、開発者ツールとPOM BuilderのXPathを比較して、安定性の高い方を採用するというやり方がおすすめです。
まとめ
- 自動テストの安定性が高くなるXPathについて考察をしました。
- 安定性の高いXPath/CSSセレクタの自動生成ツールのPOM Builderを紹介しました。
- POM Builderを使用して安定性の高いXPath/CSSセレクタを取得する方法について紹介しました。
自動テストの安定性を高めて、保守の負担が少ない自動テストライフを過ごしていきましょう！
