🎦

Splunk SyntheticsのChrome Recorder Importを試す

2023/09/01に公開

Splunk

observability

synthetics

tech

はじめに

Splunk SyntheticsのBrowser Testのシナリオ作成を簡単にする機能が追加されましたので早速試してみました。

Splunk Syntheticsとは

Splunk Observability Cloudで提供される機能の一つで、いわゆる外形監視です。
Browser Test（ユーザー動線のシミュレート）、API Test、Uptime Test（HTTP/TCP/UDP）が利用できます。

Import a Google Chrome Recorder JSON file

Browser Testについては、これまでは上記のページの通り、HTML要素を個別に抽出しながらシナリオを組む必要がありましたが、Google Chrome Recorderで記録した操作をインポートできるようになりました。

手順はこのようになっています。インポートして、微修正して、保存しろ、とのこと。

In Splunk Synthetic Monitoring, select Edit on an existing Browser test to open the test configuration page, or create a new test.
Select Import.
Upload the Google Chrome Recorder JSON file.
If a step is not supported, you need to edit or delete the step in the test configuration page.
(Optional) Add a name to each step.
Save your changes.

Google Chrome Recorderとは

Google Chromeの標準機能でChrome 97以降で使用可能です。
ユーザーの操作を記録して再現することができるよという機能です。

記録した操作をJSONでエクスポートできますので、それをSplunk Syntheticsでインポートしようということです。

Recoderで記録

それじゃあやってみましょう。
親切にも、Recorderの解説ページにデモサイトまで用意されていたのでありがたく使わせていただきます。

https://coffee-cart.app/

コーヒーを注文できるシンプルなサイトです。

F12で開発者ツールを開き、More tools > Recorder。

Create a new recordingして、

適当に名前を付けてStart rcording。これで操作が自動的に記録されます。

適当にコーヒーを選んで、、、ちゃんとレコーディングされていますね

cartクリックして、

ここからどうすんだと分かりにくかったですが、TotalをクリックしたらSubmitウインドウが開きましたので適当に値をいれてSubmitすると、

買えました。

End recording。
キャプチャ撮りながら操作したので激しくKey up/downが記録されちゃっています。

これ自体でもReplayできるようです。

Repayしてみて特に問題なければExport > JSON。

こんな感じで記録されていました。

{
    "title": "Coffee-cart test",
    "steps": [
        {
            "type": "setViewport",
            "width": 1295,
            "height": 1078,
            "deviceScaleFactor": 1,
            "isMobile": false,
            "hasTouch": false,
            "isLandscape": false
        },
        {
            "type": "navigate",
            "url": "https://coffee-cart.app/",
            "assertedEvents": [
                {
                    "type": "navigation",
                    "url": "https://coffee-cart.app/",
                    "title": "Coffee cart"
                }
            ]
        },
        {
            "type": "click",
            "target": "main",
            "selectors": [
                [
                    "aria/Cafe Breve"
                ],
                [
                    "[data-test='Cafe_Breve']"
                ],
                [
                    "xpath///*[@data-test=\"Cafe_Breve\"]"
                ],
                [
                    "pierce/[data-test='Cafe_Breve']"
                ],
                [
                    "text/espressosteamed milksteamed"
                ]
            ],
            "offsetY": 65.29583740234375,
            "offsetX": 154.03857421875
        },
...