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

エレメントアサーション

Eva Ferreira
  • 更新

ブラウザーテストまたはモバイルテストを作成する場合、ページ上のエレメントに対してアサーションを行うことで、アプリケーションが期待どおりに動作することを確認できます。mabl Trainerでは、エレメントのHTMLまたはCSSプロパティを検証するエレメントアサーションを作成し、アサーションの説明を生成AIモデルに送信することで、エレメントに対してアサートすることもできます。 

状況に応じて、次のように複数の方法でエレメントアサーションを作成することができます。

エレメントの属性とプロパティの把握

エレメントのプロパティと属性を把握するのにサポートが必要な場合は、MDNを参照するのが便利です。

アサーションメニューでエレメントを選択する

エレメントアサーションを作成する最も簡単な方法は、アサーションメニューでエレメントを選択することです。

アプリケーションでいくつかの操作を記録した後に、次の手順を実行して、特定のページエレメントに対してアサートします。

  1. アサーションを追加するには、mabl Trainerウィンドウの下にあるチェックマークアイコンをクリックします。ブラウザーウィンドウに [Click on an element] というプロンプトが表示されます。
  2. アサートするエレメントを選択します。また、Shiftキーを押しながら操作すると、クイックアサートや重なり合っているエレメントをターゲットにするなどのオプションが利用できます。

select_element_ja

  1. Trainerウィンドウで、アサーションのタイプ (HTML、CSS (ブラウザーのみ)、またはGenAI) を選択します。
  2. アサーション設定フォームでアサーションの条件を定義します。

assertion_config_ja

  1. [OK] をクリックしてアサーションを保存します。

作成したアサーションステップは、mabl Trainerですぐに実行されます。

これらのアサーションタイプを使用するときは、次の点に留意してください。

  • is not present：要素が存在しないことをアサートする方法はたくさんあります。詳細については、要素が存在しないことをアサートするに関する記事を参照してください。
  • matches regex: mablはJavaScriptの正規表現構文を使用します。パターンをスラッシュで囲み、iのような大文字小文字を区別しない検索やmのような複数行マッチングのオプションフラグを追加できます。スラッシュが省略された場合、mablはフラグが渡されていないかのように提供されたパターンに対してアサーションを行います。

オプションのアサーション設定

追加のアサーション設定には、次のようなものがあります。

  • 大文字と小文字を区別しない設定 (Disable case sensitivity)
  • 失敗時のオプションの設定 (Configure failure options)
  • エレメントのスクリーンショットの取得 (Crop the screenshot to element)

[要素のスクリーンショットを切り抜く] をオンにすると、クラウド実行の間、mablは画面全体ではなく、エレメントのスクリーンショットを取得します。この設定項目は、mablでアサートしたエレメントを細かく確認したり、画面上を移動するアサート対象エレメントを視覚的に比較したりする場合に便利です。

cropped_assertion.png

エレメントのスクリーンショットを取得するアサーションステップの例

記録されたステップからアサーションを作成する

エレメントに対する通常のアサーションの作成が難しい場合は、別の方法として、エレメントを見つける既存の記録されたステップ (クリックステップなど) からアサーションを作成することができます。

  1. アサートするエレメントをターゲットとする記録されたステップの [その他のアクション (...)] をクリックします。
  2. ドロップダウンから [要素でアサート] を選択します。
  3. アサーションのタイプ (HTML、CSS (ブラウザーのみ)、またはAI) を選択します。 
  4. アサーション設定フォームでアサーションの条件を定義します。
  5. [OK] をクリックします。Trainerによって新しいアサーションステップがテストに追加されます。 

assert_on_element_ja

[要素でアサート] オプション

CSSまたはXPathセレクターを使用する

[Configure Find] を使用して正しいエレメントをターゲットにすることができない場合、カスタムのCSSクエリまたはXPath式を使用して、アサートするエレメントを識別できます。カスタム検索アサーションを作成するには、次の手順を実行します。

  1. ＋記号をクリックして、新しいステップを追加します。
  2. [要素の検索] を選択します。
  3. カスタム検索ビューでCSSまたはXPathを使用して、ブラウザーウィンドウのエレメントを識別できます。
  4. アクションとして [Make assertion] を選択します。
  5. [Next] をクリックします。
  6. アサーションのタイプ (HTML、CSS (ブラウザーのみ)、またはGenAI) を選択します。
  7. アサーション設定フォームでアサーションの条件を定義します。
  8. [OK] をクリックします。Trainerによって新しいアサーションステップがテストに追加されます。 

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

CSSまたはXPathを使用する前に、アサーションメニューでアサーションを作成し、[検索の設定] を使用して正しいエレメントを識別することをお勧めします。

[検索の設定] を使用するアサーションの方が保守しやすいため、カスタム検索アサーションは、エレメントを正しく識別するために必要な属性が [検索の設定] に含まれない場合にのみ使用してください。

mablでのエレメントの識別の概要については、エレメントを正しく見つけるを参照してください。

スニペットステップを使用する

ページ上に表示される時間が短くアサーションステップを実行できないエレメントに対してアサーションを行う場合、スニペットステップを使ってエレメントに対してアサートすることができます。スニペットステップは、JavaScriptで記述されたカスタムステップです。

たとえば、短時間でページから消えてしまうトーストメッセージが表示されることをアサートする必要がある場合、スニペットステップを使用すると、トーストメッセージが表示されることをすばやく検証できます。

スニペットステップを使用してエレメントに対してアサートするには、JavaScriptを使ったWebエレメントへのアクセスや、Appiumを介したモバイルエレメントの操作をよく理解している必要があります。ネイティブのアサーションと比べて、スニペットステップを使って作成したアサーションは、メンテナンスの手間が増え、ステップが失敗したときのテスト出力の可視性が低下する可能性があります。

関連記事