【第5回】要素の検索を使って画面上のエレメントを抽出する【mablの使い方】

こんにちは、品質ソリューション特集部です。
前回の記事ではランダム変数を用いたテスト作成の方法について説明させていただきました。
前回の記事はこちら↓
今回の記事では、「要素の検索」をご紹介していきたいと思います。
・より高度なmablの使い方が知りたい
・一意な要素の指定方法が知りたい
という方は、ぜひ参考にしてみてください。
「要素の検索」の概要
要素の検索はmablを扱う上で非常に重要な機能の一つです。
mablでテストステップを登録する際に、mablは操作するHTML要素の様々な情報を自動で記録してくれます。
このおかげで、mablでは簡単に操作を記録することができたり、テストの自動修復をしてくれるわけです。
しかし、場合によっては一意に要素を指定する必要があることもあります。
そこで活用できるのが、今回ご紹介する「要素の検索」です。
「要素の検索」を使用して特定の要素を操作する
それでは、実際に「要素の検索」を使用してみましょう。
mablトレーナー上のステップの追加から「要素の検索」を選択すると、以下の画像のような画面になります。
それぞれの項目については以下の通りです。
検索タイプ:抽出した対象要素の中から指定する要素、またはその数
クエリの種類:扱うロケータの種類
アクション:指定した要素に対して実行するアクション
クエリ:指定したい要素のCSSセレクター、またはXPathのクエリ



ユースケース
次に「要素の検索」を使用して要素を抽出してみましょう。
今回は、以前から使用している「mabl sandbox」というmablの練習用サイトを使っていきます。
こちらは「mabl sandbox」を開いた直後の状態です。

そこからmablトレーナー上の「ステップの追加」アイコンから「要素の検索」を追加してあげます。
そうすると以下の画像のように画面がハイライトされ、mablトレーナー上で検索条件を入力する画面になります。

例として、今回は①のようにクエリに「a」と入力してみましょう。こうすることで、画面上のaタグの要素を抽出することができます。
「18 elements found」の表示はこの画面上のaタグの要素の数になります。
また、抽出した要素は実線 or 破線のどちらかで囲まれていますが、これは検索タイプによってどの要素が指定されるかを表したものとなり、今回の例では「最初の要素」を指定しているため②で示しているmablのロゴに対してアクションが実行されることを意味しています。
「OK」をクリックすると、設定した条件でステップが登録されます。

続いて、登録したステップを実際に実行してみましょう。
mablトレーナーからステップを実行すると、アクションの対象になっていた箇所がハイライトされ、クリック処理が実行されていることがわかります。
指定されたmablロゴはクリックすると「mabl sandbox」のトップページに遷移するので画面上に変化はありませんが、適切にステップが実行されたことが確認できました。

以上が「要素の検索」の基本的な使い方となります。
この他にもより高度なクエリの指定をすることで、複雑な構成のサイトでもほとんどの要素を一意に抽出することが可能です。
また、クエリの条件の中に変数を指定することで、その変数の値によって抽出する要素を可変にすることもできます。
高度なクエリ師弟の方法などについてはまた別の記事でご紹介しますので、楽しみにしていてください。
まとめ
以上、「要素の検索」のご紹介でした。
こちらの機能はmablを利用するうえで使う機会がとても多い機能となっています。
一方で、クエリの指定など少し難しい部分もあるので、また別の記事などで詳細な内容をご紹介できたらと思います。
それでは、また次回の記事でお会いしましょう!

現在、mablでは2週間の無料トライアルを実施しており、2週間ほぼすべての機能が無料でお試しできます!
無料トライアル、および製品やサービスにご興味のある方は、以下のリンクからお気軽にお問い合わせください。
また、テクバンの品質ソリューション事業部 特設サイトでは、「ソフトウェアテスト」や「テスト自動化」に関するお役立ち資料を掲載しておりますので、ぜひこちらも合わせてご利用ください!