マルチステップのブラウザテスト用のセレクター

Splunkソフトウェアがこのユースケースにどのように役立つか

この記事では、Splunk Synthetic Monitoring GUI でテストをゼロから作成するときに追加できるセレクターの例を紹介します。

セレクターの例

エレメント、その属性、その属性の値、場合によってはエレメント自体の中身をターゲットにすることもできます。これは css、xpath、id、JS パス、さらに javascript を使用して行うことができます。Web サイトのレンダリング方法に基づいて最適なセレクターを見つければ、今後のテストの作成が容易になります。

• ザ・ id アトリビュート Web ページごとに重複する値があってはなりません。その場合は、ユニークセレクターとして理想的です。残念ながら常にそうであるとは限らず、すべての要素に id 属性が必要なわけでもありません。エレメントにこの属性があって、その値が static であるなら、これは素晴らしい選択です。
• を使う CSS 要素に信頼できる一意の識別子 (サインインボタンや主要な行動を促すフレーズなど) が付いているセレクター。形式は以下のとおりです。 element[attribute="attributeValue"] 。この構文の詳細については、を参照してください。 CSS 属性セレクターに関する Mozilla ドキュメント 。例:
  • HTML エレメントが次のようになっているとします。 <button aria-label="Sign in" class="buttonPrimary">Access my account</button> このクラスはページ上の任意の数のボタンに適用でき、ボタンのテキストはいつでも変更でき、その要素の A/B テストによって変更されることもあります。 button[aria-label="Sign in"] は、この要素がボタンのままである可能性が高く、aria-label が静的でユニークなままであることがわかっている場合に、合成テストでこの要素を確実に識別できる可能性が最も高いセレクターです。
  • HTML 要素が次のようになっている場合 <a href="https://www.mysite.com/CTA2023" data-testid="header_CTA-text">Get this deal!</a> data-testid は信頼性が高くユニークな属性なので、これは素晴らしいことです。Synthetics テストに適したセレクターとしては、次のようなものがあります。 a[data-testid="header_CTA-text"]
• 以下の例では以下を使用しています。 xpath エレメントに属性があるセレクター 含む 静的値と動的値の両方。Xpath は上記の css と同様に使うこともできますが、ここでは値が静的です。 XPath についてさらに詳しく 。
  • フォーマットは一般的に //element[rule(attribute,'attributeValue')]
  • //input[starts-with(@id,'checkInDate')]
    文字列 'CheckInDate' で始まる ID を持つ入力エレメントを検索します。
    • たとえば、属性値の末尾にユーザーセッションごとに変化する文字列が付加されることがあります。そのため、「start with」を使用すると、そのエレメントがチェックイン日-3489、チェックイン日-2467 などになるかどうかに関係なく、確実にそのエレメントがターゲットになります。
  • //*[contains(text(), 'Registration')]
    テキスト文字列 'Registration' を含むすべてのエレメントを探します。
    • これは曖昧すぎることが多いですが、サイトによってはうまくいくこともあります。
    • 大文字と小文字が区別されます。
  • xpath は、1 つ以上の属性を対象とする静的要素でも使用できます。この例では、同じページに複数のボタンがありますが、これらの属性値の両方を持つボタンは 1 つだけです。 //button[@aria-label='Sign in' and @data-link='alpha']
• 使用 JavaScript ここで、エレメント属性 含む login や testout などの重要な機能や、別の種類のセレクターを使用するのが信頼できない場合に使われる信頼できる文字列です。
  • document.querySelector('a[href*="account/login?checkout"]').click();
    hrefに「account/login?」という文字列を含むアンカー要素を探します。「チェックアウト」
• 使用 条件付き JavaScript エレメントがポップアップで表示される場合など、一貫性がない場合などは、その要素をクリックすべき場所です。
  • if(document.querySelector('button[data-click="close"]')){document.querySelector('button[data-click="close"]').click();}
  • if(document.querySelector('[id^="close-button"]')){document.querySelector('[id^="close-button"]').click();}
    • 属性値が常に存在することが期待される場所 含む 「close-button」ですが、他の文字列が追加/先頭に付加されている可能性があります
  • 別の方法として、 ヘッダーに Cookie を読み込む 該当する場合にはポップアップをバイパスします。
• 要素が "と呼ばれるものにネストされていることがあります シャドードーム 」。これは大規模に開発する場合によくあることで、どのページを使用しても、他の js/css の影響を受けないように保護された再利用可能な要素ツリーを作成できます。「」を参照してください。 Mozilla のドキュメント そしてこれ YouTube チュートリアル 詳細については。
  • コードを調べて、要素を右クリックしてその JS Path をコピーすると、次のような結果になるかもしれません document.querySelector("body > app-root > div > section > app-login").shadowRoot.querySelector("main > section > card > card-content > a.login-anchor"
    • このエレメントのより堅牢なセレクターは document.querySelector("app-login").shadowRoot.querySelector("a.login-anchor") これは入れ子になった要素に頼らずに動作します。

次のステップ

以下に関連するその他のプロセスに興味があるかもしれません。 Splunk シンセティックモニタリングのブラウザテストの実行 :

• ブラウザテスト診断に失敗
• 失敗したブラウザテストステップの確認