見出し画像

MagicPodの要素検出で検出できなかった要素を指定する方法(XPath編)

こんにちは!株式会社カンリーエンジニア部の影山です。
私は現在、Canlyホームページ開発チームに所属しており、その中でQAを担当しています。
プロダクトやチームの詳細については弊社須藤が投稿しておりますので、ご興味のある方はぜひご覧ください。

今回はテスト自動化を進めている途中でテストケース作成で詰まってしまったことがありますので、その時の解決方法を紹介してみたいと思います!

要素が検出できない…!?

前回の投稿後、テストケースの作成を進めておりましたが、その途中でとある事象に遭遇しました。それは…

要素の検出ができない…!

MAP上に表示されているアイコンを選択したいがMAP全体の領域のみしか選択できません
通常はこのように検出されます

GoogleMap内に設置されているアイコンを押下する手順が必要なのですが、MagicPod内の「要素選択」を押下しても思い通りに検出ができません。
どうしたものかと思い、社内で同じく自動化を進めている方に聞いたところ、該当のXPathを参照すれば可能になるとのこと。
早速試したところ、無事選択することが可能になりました…!

実際にXPathを個別で指定してテストケースを作成してみよう!

それでは実際に前述の方法でテストケースを作成してみましょう!
※今回はGoogleChromeを利用する場合となります。

検証対象画面へ遷移してXPathをコピーする

検証対象画面でDevToolsを起動して、Elementsタブを選択、対象箇所の「…」を押下して「Copy」>「Copy XPath」の順で押下します。

MagicPodの編集画面でロケータを編集する

先ほどコピーしたXPathを適用するため、MagicPodの編集画面に遷移して、MAP全体を検出している要素の編集アイコンを押下します。

そうすると以下のようなロケータを編集するモーダルが展開されます。
ここで、「新しい要素ロケータを追加」プルダウンより「XPath」を選択します。

「追加」ボタン押下で該当プルダウンが展開されます

コピーしてきたXPathを入力エリアにペーストします。
ペーストの中身には「xpath=」を付けなくてOKです。

このタイミングで「名前」も適切なものに編集しておくことをオススメします

編集した要素をテストケースに反映する

先ほど編集を終えた要素「アイコン」を選択してテストケースを作成します。
該当ケースを実行すると、当初の目的だったアイコン押下が自動で可能になります!

まとめ

要素検出が詰まったらとりあえずXPathを指定しよう

MAP以外でも検出ができないことがありましたが、今回紹介した方法でXPathを指定することで解決することができました。勿論、全部がこの方法で解決とはいけませんが、困った時の手段として覚えておくと作業が止まらずに済みます。

MagicPod公式Slackコミュニティに参加する

今回は使用しませんでしたが、前回の記事でも紹介した、MagicPodの公式Slackコミュニティに参加して、コミュニティ内で質問することで解決できる場合もあります。
MagicPod公式サイトの画面下部に参加リンクがありますので、興味のある方は是非参加してみてはいかがでしょうか?



さいごに

株式会社カンリーでは一緒に働く仲間を募集しています!
カンリーのバリューに共感できる方、ちょっと話を聞いてみたいという方、ぜひご応募ください!


この記事が気に入ったらサポートをしてみませんか?