メインコンテンツへスキップ

カスタム検索ステップの作成

Eva Ferreira
  • 更新

mablでは、Playwrightロケーター、CSSクエリ、またはXPath式を使用してページ上の要素を検索する、カスタム検索ステップを作成できます。この記事では、カスタム検索ステップを使用するタイミングと方法について説明します。

カスタム検索ステップを使用するタイミング

特定の要素を検索するためにカスタムロケーターを使用する前に、まず以下のいずれかの方法をお試しください。

  • 検索の設定 - 検索の設定を使用して、対象の要素が持つべき属性をmablに指定します。
  • カスタムテストID属性 - チームのカスタムテストID属性をmablが認識しない場合は、アプリケーションレベルで宣言してください。詳細については、ブラウザーテストでの正しい要素の検索を参照してください。

検索の設定やカスタムテストID属性を使用して検索ステップを作成すると、ステップのメンテナンスが容易になり、より柔軟なステップになります。

ただし、必要に応じて、カスタム検索ステップを使用して、ターゲットにするのが難しい以下のような要素に対して操作を実行することもできます。

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

要素数のカウント

ロケーターに一致するすべての要素を検索することは、以下のようなテストシナリオで役立ちます。

シナリオ 例
ループ対象の要素数の判定 リスト内のすべてのチェックボックスにチェックを入れる。
特定の数の要素があることのアサート 検索結果ページにデフォルトで50件の結果が表示されることを確認する。
ページフィルターによって、リストの件数が正しい要素数まで減ることの確認 ページフィルターで「20」を選択した場合に、20件の結果が表示されることを確認する。
特定のテキストを含む要素がページ内に存在しないことを確認する：//*[text()[contains(.,"{{@myVar}}")]] ページのどこにも "journey" という単語が現れないことを確認する。

セットアップ

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

  1. 要素の検索ステップを追加します：[+ (ステップを追加)] > [要素の検索]
  2. [ロケーター] フィールドに、CSSクエリ、Playwrightロケーター、またはXPath式を入力します。詳細については、カスタム検索ステップのロケーターの記述を参照してください。
  3. 一致する要素の数を変数に格納する場合は、[一致する要素をカウント] にチェックを入れます。それ以外の場合は、チェックを外したままにします。
  4. 任意: mablがロケーターに一致する要素を見つけられない場合のフォールバックとして、その要素に対するビジュアル検索ステップを記録します。
  5. 一致する要素の数を変数に格納しない場合は、対象の要素に対して実行する アクション を選択する必要があります。

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

サポートされているアクション

このセクションでは、カスタム検索ステップでサポートされているアクションについて説明します。

クリックアクション

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

テキストの入力

テキストを入力するカスタム検索ステップでは、[入力するテキスト] フィールドにテキストを入力します。

アサーションの実行

対象の要素に対してアサーションを実行します。

変数の作成

対象の要素の属性またはプロパティを変数に格納します。たとえば、表内のセルをターゲットにして、そのinnerTextを変数に格納することができます。

Hover ステップ

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

オプションの選択

カスタム検索の選択アクションは、selectタグとoptionタグを使用するドロップダウンを操作します。カスタム検索の選択アクションには、次の2種類があります。

  • 属性が一致するoptionを選択する
  • Select any option (いずれかのオプションを選択)

「属性が一致するoptionを選択する」を選択した場合、以下のいずれかの属性に基づいてドロップダウンのオプションを選択するようにステップを設定できます。

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

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

キー入力の送信

カスタム検索のキー入力ステップを作成するには、[要素の検索] メニューで [Send keypress] を選択し、[Next] ボタンをクリックします。

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

ドラッグアンドドロップ

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

  • Click and hold: 移動させる要素をターゲットにします
  • Release: 最初の要素の移動先となる要素をターゲットにします

ファイル入力の設定

ローカルマシン、mablワークスペース、またはテストの前のステップのファイル変数からファイルをアップロードします。

カスタム検索の制限

カスタム検索ステップには、以下の機能がありません。

Shadow DOM内の要素をターゲットにできるのは、CSSクエリのみです。Shadow DOMでのテストの詳細については、このガイドを参照してください。

詳細はこちら

関連記事