CSSとXPathの使用

mablでは、CSSクエリまたはXPathを使用して、ページ上の特定の要素を見つける検索ステップを作成できます。特定の要素を見つける検索ステップには、2つのタイプがあります。

1. 特定の要素の検索: CSSクエリまたはXPathに一致する最初または最後の要素に対して、クリックやマウスカーソルを合わせるといったアクションを実行します。
2. 要素数のカウント: CSSクエリまたはXPathに一致するページ上のすべての要素を検索します。要素数についてアサーションを実行するか、要素数を変数に格納します。

📘

Shadow DOM内の要素の検索

対象がShadow DOMの場合、CSSクエリのみターゲット要素として設定できます。Shadow DOMでのテストの詳細については、このガイドを参照してください。

あくまでも、mablトレーナーでアプリケーションを操作するために推奨されるのは、トレーナーでの操作の記録と [検索の設定] で要素を指定する方法です。大半の場合では、mablがもつ(要素の)検索機能に基づいて、メインテナンスが容易でより柔軟なテストを作成・実行することができます。
ただし、もし必要であれば、CSSまたはXPathを使ってページ上の特定の要素を検索することもできます。

このガイドでは、ページ上の特定の要素を検索するステップのユースケース、設定、サポートされる操作について説明します。

ユースケース

特定の要素の検索

特定の要素を検索する検索ステップでは、CSSクエリまたはXPathに一致する、ページ上の最初または最後の要素を検索し、その要素を操作することができます。その要素に対してサポートされている操作は次のとおりです。

• クリック操作: クリック、ダブルクリック、右クリック
• テキストの入力
• アサーションの実行
• 変数の作成
• Hover
• ドロップダウンからのオプションの選択
• キー入力の送信
• ファイルのアップロード
• ドラッグアンドドロップ操作

👍

まず [検索の設定] を試す

CSSクエリやXPathを使用して特定の要素を指定して操作する前に、[検索の設定] を使用して、対象となる要素にあるはずの属性を指定してみてください。

[検索の設定] は、CSSやXPathを使用するステップと同じユースケースを多数処理しますが、問題が発生したとき、トラブルシューティングにCSSやXPathの知識が不要であるため、よりテストのメインテナンスが容易です。

CSSやXPathを使用して特定の要素を見つけるための検索ステップを使用することで、以下のような見つけにくい要素をターゲットにすることができます。

• [検索の設定] では特徴的な属性が現れない要素
• 親以外の他の要素との関係でのみ識別可能な要素。たとえば、特定の単語を囲む<div>に隣接する<div>など。
• 特定のテキストを含まない要素。たとえば、先頭が "Submit" という単語ではないボタンなど。 //button[not(starts-with(text(),"Submit"))]
• 頻繁に変更され、順序以外に区別のための属性を持たない、非常によく似た要素の集合のn番目の要素。たとえば、非常によく似た行を持つ表の5行目など。

🚧

CSSクエリ/XPathをつかった要素検索の制限

これらで検索する要素については、以下の機能がありません。

• 自動修復 (オートヒール)
• インテリジェント待機
• ダウンロードアサーションの実行

要素数のカウント

CSSクエリやXPathに一致するすべての要素を見つけることは、以下のようなテストシナリオで役立ちます。

セットアップ

mablトレーナーで特定の要素を検索するステップを作成するには、次の手順を実行します。

1. プラス記号 (+) をクリックして、新しいステップを追加します。

2. [要素の検索] を選択して、[一致する要素を検索] メニューを開きます。

3. [検索タイプ] で以下のいずれかを選択します。
   • 最初の要素: CSSクエリまたはXPathに一致する最初の要素を検索します。
   • 最後の要素: CSSクエリまたはXPathに一致する最後の要素を検索します。
   • 要素の数: CSSクエリまたはXPathに一致する要素の数をカウントします。
4. [クエリの種類] で、[CSS] または [XPath] を選択します。
5. [クエリ] フィールドに、CSSクエリまたはXPathを入力します。クエリを入力すると、現在のページで一致する要素が識別されます。

📘

mabl変数の構文

特定の要素を検索するステップでは、クエリ内でmabl変数の構文を使用できます。
たとえば、クエリで sample_var という変数を使用して、<div> 要素を以下のようにクラスで検索できます。

• CSS: div.{{@sample_var}}
• XPath: //div[@class="{{@sample_var}}"]

6. アクションを選択します。詳細については、下の「サポートされているアクション」セクションを参照してください。

ステップの設定が完了したら、[OK] をクリックしてステップを保存し、トレーナーで再生します。

サポートされているアクション(要素の操作)

このセクションでは、特定の要素を検索した後のアクション(操作)について説明します。

クリック

特定の要素に対するクリック操作には、クリック、ダブルクリック、右クリックがあります。これらのアクションでは、正しい要素をターゲットにするために正しいCSSクエリまたはXPathを指定する以外に、追加のステップは必要ありません。

テキストの入力

特定の要素にテキストを入力する場合、[入力するテキスト] フィールドにテキストを入力します。

アサーションの実行

mablでは、特定の要素を検索する場合でも、その要素に対するアサーションの実行がサポートされています。

• 特定の要素の検索: [最初の要素] と [最後の要素]
• 要素数のカウント: [要素の数]

アサーションがCSSまたはXPathを使用して特定の要素をターゲットにしている場合、要素に対するアサーションを使用してアサーションを設定することができます。

特定の要素に対する検索へのアサーションでCSSクエリまたはXPathに一致する要素の数をカウントする場合、カウントした数に対して文字列または変数でアサーションを実行できます。

変数の作成

mablでは、すべての特定の要素タイプの検索でカスタム検索変数がサポートされています。

• 特定の要素の検索: [最初の要素] と [最後の要素]
• 要素数のカウント: [要素の数]

CSSまたはXPathを使用して特定の要素の検索をしている場合、ターゲット要素のプロパティを変数に格納することができます。たとえば、CSSまたはXPathを使用してターゲットにした要素のinnerTextを、変数の値として代入することができます。

CSSクエリまたはXPathに一致する要素の数をカウントする場合は、一致する要素の合計数を変数に格納することができます。

Hover ステップ

特定の要素を検索する際のHover ステップでは、正しい要素をターゲットにするために正しいCSSクエリまたはXPathを指定する以外に、追加のステップは必要ありません。

オプションの選択

検索した特定の要素に対して、<select> タグおよび <option> タグを使用するドロップダウンに対するアクションを指定できます。ここで指定できるアクションは、下記の2種類があります。

• Select the where the attribute (該当する属性のオプションを選択)
• Select any option (いずれかのオプションを選択)

[Select the where the attribute] を選択した場合、以下のいずれかの属性に基づいてドロップダウン内のオプションを選択するようにステップを設定できます。

• Value: 値が指定された文字列または変数に等しいオプションを選択します。
• Text: テキストが指定された文字列または変数に等しいオプションを選択します。
• Position: ドロップダウン内の順序に基づいてオプションを選択します。(ドロップダウン内の3番目のオプションを選択する、など)

[Select any option] を選択した場合、利用可能なオプションの中から指定されていないオプションが選択されます。

キー入力の送信

検索した特定の要素に対してキー入力ステップを作成するには、[一致する要素を検索] メニューの[アクション] で [Send keypress] を選択し、[Next] ボタンをクリックします。

トレーナーウィンドウにキー入力メニューが表示され、ステップを設定することができます。キー入力ステップの作成方法の詳細については、キー入力の記録を参照してください。

ドラッグアンドドロップ

ドラッグアンドドロップステップは、mablトレーナーでアクションとして記録することができます。CSSまたはXPathを使用するドラッグアンドドロップアクションを作成する必要がある場合は、以下の2つのアクションを組み合わせます。

• Click and hold: 移動させる要素をターゲットにこのアクションを設定します
• Release: 最初の要素の移動先となる要素をターゲットにこのアクションを設定します

詳細はこちら

• 検索ステップの設定
• CSSセレクターとXPath IDの比較
• CSSマスタークラスウェビナー