Synthetics ブラウザテストの実行

シンセティック・ブラウザ・テストを使用して、お客様のサイトとサービスがエンド・ユーザーにとって期待どおりにブラウザ上で動作することを検証します。ブラウザテストは、カートへの追加、サインイン、フォームの送信など、目標に基づいた実際のユーザージャーニーを反映することを目的としています。これは自動機能テストやユニットテストとは異なります。Synthetics はパフォーマンスがユーザーエクスペリエンスに与える影響に焦点を当てています。

このユースケースでの Splunk ソフトウェアの使い方

ブラウザテストの作成には 2 つの方法があります。

GUI でトランザクションとステップを手動で記述します。
レコーダーを使うブラウザでユーザージャーニーをキャプチャし、そのJSONを経由してSplunk Syntheticsにインポートするには API または GUI 経由で。内蔵のChromeレコーダーは、どのような用途に最適です Splunk Synthetic Monitoring テストサポート。詳細については、を参照してください。マルチステップのブラウザテスト用セレクター。
1. ステップ名とトランザクションは引き続き検証する必要があります
2. レコーダーがキャプチャしたものよりも優れたセレクターを作成するために、ドキュメントオブジェクトモデル (DOM) を検査する必要がある場合があります。

どの方法を選択したとしても、ページを右クリックして選択してください。 [検査] ページ上の要素がどのように構築されているかを確認するのに役立ちます。Google には、詳細を知りたい場合に備えてドキュメントがあります。デベロッパーツール。

ベスト・プラクティス

各ステップに人間が読めるラベルを作成すると、特に何かが失敗した場合に、何がテストされているかがわかりやすくなります。
特にシングルページアプリ (SPA) では、トランザクションを使用してステップをグループ化します。これにより、ページ遷移に限定されないユーザーワークフローの指標が可能になります。
使用詳細設定希望するユーザーエクスペリエンスを再現し、Cookie やカスタムヘッダーなどの A/B テストに関するインサイトを提供します。
テストでは、UI で実行したいアクションだけでなく、トランザクションの目標全体が把握されていることを確認してください。たとえば、ユーザーログインブラウザテストを作成する場合、「サインイン」ボタンがクリック可能であることを証明するだけでなく、ユーザーがアプリケーションにタイムリーにサインインできることを証明したいと思うでしょう。そのため、ログインフォームを送信した後に、アサーションか追加クリックステップかを問わず、ユーザーがログインしていることを検証するステップを追加してください。
必要に応じて、認証、ヘッダー、プライベートロケーションを使用して、PRODとPre-Prodの両方でテストします。
期待どおりの結果が得られない場合に警告するように検出器を設定します。検討してみましょう。カスタムダッシュボードチャートからディテクターを作成する方法。
各テストの目標とコンテキストを理解しやすくするために、共通の命名規則に従ってください。これにより、カスタムのダッシュボードグラフでテスト結果を比較するのも簡単になります。

一般的な課題

キャッシュ

ページを検査したりテストを記録したりするときは、特にチェックアウトカートやログインを扱う場合は、可能であればシークレットブラウザウィンドウを使用してください。Selenium テストを再生する場合は、必ずカートを空にするか、サインアウトしてください。

モバイルとデスクトップ

ページを検査したりテストを記録したりするときは、ブラウザーの幅が実装したいビューポートのサイズを反映していることを確認してください。 Splunk Synthetic Monitoring 。モバイル、タブレット、デスクトップでは、ビューポートのサイズによって要素や属性が異なる場合があります。そのため、デスクトップ幅でテストを録画し、それがモバイルでも機能すると予想される場合は、機能しない可能性があります。ウィンドウのサイズを変更するか、Chrome デバイスツールバーを使用してビューポートのサイズを変更します。

新しいタブ

現在、複数ステップのテストは同じブラウザータブで行う必要があるため、クリックする前に新しいタブでリンクを開くターゲットをすべて削除してください。を参照してください。の例 JavaScript 。例えば:
document.querySelector('the_selector').removeAttribute('target')

不安定なセレクター

CSS では、セレクターとは、ルール内の CSS プロパティ値を適用するためにどの HTML 要素を選択すべきかをブラウザーに伝える要素やその他の用語のパターンです。セレクターのセレクターを手動で変更しなければならない場合があります。 Splunk Synthetic Monitoring 。xpath または JavaScript を使用できることを覚えておいてください。詳細については、以下をご覧ください。セレクター選択のベストプラクティス。

一貫性のないポップアップ

ポップアップがブラウザテストの実行の邪魔になる場合は、JavaScript ステップを追加してこれを処理できます。例えば
if(document.querySelector('button[data-click="close"]')){document.querySelector('button[data-click="close"]').click();}

クッキーの取り扱い

ブラウザテストの詳細設定で、任意の A/B テストや Cookie を使って設定したいその他の条件に Cookie を追加できます。また、最適化に Cookie を追加することもできます。新規ユーザーには Cookie を許可するダイアログが表示されるので、そのインタラクションも監視したい場合があることに注意してください。

次のステップ

ブラウザテストで問題が発生した場合は、以下の手順が問題の調査と解決に役立ちます。

Splunk に関する以下のその他のリソースは、このプロダクトヒントの理解と実装に役立つ場合があります。

Splunk ドキュメント: ブラウザテストをセットアップ
はじめに: シンセティックスを始める
ビデオ: Synthetics ブラウザテスト:Chrome レコーダーから JSON をインポートする