1. Real Browser Test

はじめに

このワークショップでは、Chrome DevTools Recorder を使用して、Splunk デモインスタンスに対する Synthetic トランザクションを作成する方法を説明します。

Chrome DevTools Recorder からエクスポートした JSON を使用して、Splunk Synthetic Monitoring の Real Browser Test を作成します。

また、API Test や Uptime Test など、他の Splunk Synthetic Monitoring チェックについても学びます。

前提条件

Google Chrome ブラウザがインストールされていること
Splunk Observability Cloud へのアクセス権があること

1.1 テストの記録

開始 URL を開く

ワークショップの開始 URL を Chrome で開きます。以下の適切なリンクをクリックして、新しいタブでサイトを開きます。

メモ

ワークショップの開始 URL は EMEA と AMER/APAC で異なります。お住まいの地域に応じて正しい URL を使用してください。

https://online-boutique-eu.splunko11y.com/

https://online-boutique-us.splunko11y.com/

Chrome DevTools Recorder を開く

次に、（上記で開いた新しいタブで）Developer Tools を開きます。Windows では Ctrl + Shift + I、Mac では Cmd + Option + I を押し、トップレベルメニューまたは More tools フライアウトメニューから Recorder を選択します。

注意

サイトの要素はビューポートの幅によって変わる場合があります。記録する前に、作成するテストの種類（デスクトップ、タブレット、モバイル）に応じてブラウザウィンドウを適切な幅に設定してください。必要に応じて、DevTools の「dock side」を別ウィンドウとしてポップアウトさせると便利です。

新しい記録を作成

DevTools ウィンドウで Recorder パネルを開いた状態で、Create a new recording ボタンをクリックして開始します。

Recording Name には、イニシャルを接頭辞として使用します（例: <your initials> - Online Boutique）。Start Recording をクリックして、アクションの記録を開始します。

記録が開始されたら、サイトで以下のアクションを実行します:

Vintage Camera Lens をクリック
Add to Cart をクリック
Place Order をクリック
Recorder パネルの End recording をクリック

記録のエクスポート

Export ボタンをクリックします:

フォーマットとして JSON を選択し、Save をクリックします。

おめでとうございます！ Chrome DevTools Recorder を使用した記録の作成に成功しました。次に、この記録を使用して Splunk Synthetic Monitoring で Real Browser Test を作成します。

JSON ファイルを表示するにはここをクリック

{
    "title": "RWC - Online Boutique",
    "steps": [
        {
            "type": "setViewport",
            "width": 1430,
            "height": 1016,
            "deviceScaleFactor": 1,
            "isMobile": false,
            "hasTouch": false,
            "isLandscape": false
        },
        {
            "type": "navigate",
            "url": "https://online-boutique-eu.splunko11y.com/",
            "assertedEvents": [
                {
                    "type": "navigation",
                    "url": "https://online-boutique-eu.splunko11y.com/",
                    "title": "Online Boutique"
                }
            ]
        },
        {
            "type": "click",
            "target": "main",
            "selectors": [
                [
                    "div:nth-of-type(2) > div:nth-of-type(2) a > div"
                ],
                [
                    "xpath//html/body/main/div/div/div[2]/div[2]/div/a/div"
                ],
                [
                    "pierce/div:nth-of-type(2) > div:nth-of-type(2) a > div"
                ]
            ],
            "offsetY": 170,
            "offsetX": 180,
            "assertedEvents": [
                {
                    "type": "navigation",
                    "url": "https://online-boutique-eu.splunko11y.com/product/66VCHSJNUP",
                    "title": ""
                }
            ]
        },
        {
            "type": "click",
            "target": "main",
            "selectors": [
                [
                    "aria/ADD TO CART"
                ],
                [
                    "button"
                ],
                [
                    "xpath//html/body/main/div[1]/div/div[2]/div/form/div/button"
                ],
                [
                    "pierce/button"
                ],
                [
                    "text/Add to Cart"
                ]
            ],
            "offsetY": 35.0078125,
            "offsetX": 46.4140625,
            "assertedEvents": [
                {
                    "type": "navigation",
                    "url": "https://online-boutique-eu.splunko11y.com/cart",
                    "title": ""
                }
            ]
        },
        {
            "type": "click",
            "target": "main",
            "selectors": [
                [
                    "aria/PLACE ORDER"
                ],
                [
                    "div > div > div.py-3 button"
                ],
                [
                    "xpath//html/body/main/div/div/div[4]/div/form/div[4]/button"
                ],
                [
                    "pierce/div > div > div.py-3 button"
                ],
                [
                    "text/Place order"
                ]
            ],
            "offsetY": 29.8125,
            "offsetX": 66.8203125,
            "assertedEvents": [
                {
                    "type": "navigation",
                    "url": "https://online-boutique-eu.splunko11y.com/cart/checkout",
                    "title": ""
                }
            ]
        }
    ]
}

1.2 Real Browser Test の作成

Splunk Observability Cloud で Synthetics に移動し、Add new test をクリックします。

ドロップダウンから Browser test を選択します。

Browser test content 設定ページが表示されます。

1.3 JSON のインポート

テストの設定を開始するには、Chrome DevTools Recorder からエクスポートした JSON をインポートする必要があります。Import ボタンを有効にするには、まずテストに名前を付ける必要があります（例: <your initials> - Online Boutique）。

Import ボタンが有効になったら、クリックして Chrome DevTools Recorder からエクスポートした JSON ファイルをドロップするか、ファイルをアップロードします。

JSON ファイルがアップロードされたら、Continue to edit steps をクリックします。

テストを編集する前に、まず設定を構成します。< Return to test をクリックします。

1.4 設定

シンプル設定では、テストの基本を構成できます:

Name: テストの名前（例: RWC - Online Boutique）
Details:
- Locations: テストを実行するロケーション
- Device: 異なるデバイスと接続速度をエミュレート。選択したデバイスに合わせてビューポートも調整されます
- Frequency: テストの実行頻度
- Round-robin: 複数のロケーションを選択した場合、すべてのロケーションで同時に実行するのではなく、一度に1つのロケーションからテストを実行します
- Active: テストをアクティブまたは非アクティブに設定

![Return to Test]このワークショップでは、モニタリングを行うロケーションを設定します。Locations フィールドをクリックすると、グローバルロケーションのリスト（合計50以上）が表示されます。

以下のロケーションを選択します:

AWS - N. Virginia
AWS - London
AWS - Melbourne

完了したら、下にスクロールして Submit をクリックしてテストを保存します。

これで、選択した3つのロケーションから5分ごとにテストが実行されるようスケジュールされます。スケジュールの作成には数分かかります。

テストのスケジュール作成を待つ間、Edit test をクリックして Advanced 設定を確認しましょう。

1.5 Advanced 設定

Advanced をクリックします。これらの設定はオプションで、テストをさらに詳細に構成するために使用できます。

メモ

このワークショップでは、これらの設定は情報提供のみを目的としており、実際には使用しません。

Security:
- TLS/SSL validation: 有効にすると、SSL/TLS 証明書の有効期限切れ、無効なホスト名、信頼できない発行者の検証を強制します
- Authentication: 企業ネットワーク内など、追加のセキュリティプロトコルを必要とするサイトで認証するための資格情報を追加します。Authentication フィールドで concealed global variables を使用することで、資格情報のセキュリティレイヤーを追加し、チェック間で資格情報を共有しやすくなります
Custom Content:
- Custom headers: 各リクエストで送信するカスタムヘッダーを指定します。たとえば、リクエストに特定のヘッダーを送信することで、バックエンドの分析からリクエストを除外するヘッダーを追加できます。カスタムヘッダーを使用して Cookie を設定することもできます
- Cookies: テスト開始前にブラウザに Cookie を設定します。たとえば、ポップアップモーダルがランダムに表示されてテストに干渉するのを防ぐために Cookie を設定できます。設定された Cookie は、チェックの開始 URL のドメインに適用されます。Splunk Synthetics Monitoring は public suffix list を使用してドメインを判定します
- Host overrides: あるホストから別のホストにリクエストをリルーティングするホストオーバーライドルールを追加します。たとえば、既存の本番サイトを開発サイトや特定の CDN エッジノードから読み込まれたページリソースに対してテストするホストオーバーライドを作成できます

次に、テストステップを編集して、各ステップにより意味のある名前を付けます。

1.6 テストステップの編集

ステップを編集するには、+ Edit steps or synthetic transactions ボタンをクリックします。ここから、各ステップに意味のある名前を付けていきます。

4つのステップそれぞれに意味のある名前を付けます。

Step 1: Go to URL というテキストを HomePage - Online Boutique に置き換えます
Step 2: Select Vintage Camera Lens と入力します
Step 3: Add to Cart と入力します
Step 4: Place Order と入力します

< Return to test をクリックしてテスト設定ページに戻り、Save をクリックしてテストを保存します。

テストダッシュボードに戻り、テスト結果が表示され始めます。

おめでとうございます！ Splunk Synthetic Monitoring で Real Browser Test の作成に成功しました。次に、テスト結果をより詳しく見ていきます。

1.7 テスト結果の表示

前のステップの散布図で、いずれかのドットをクリックしてテスト実行データにドリルダウンします。できれば、最新のテスト実行（最も右側）を選択してください。