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 テスト結果の表示

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