Zenn
✨

Splunk Syntheticsで条件に基づいたAssert

2024/05/23に公開
Splunk
synthetics
tech

はじめに

Splunk Synthetic Monitoringでは表示された結果を元にAssertすることができます。
つまり「特定の文字列や要素が存在する or 存在しない場合」というAssertです。

大抵の場合はそれですみますが、たまにロジックに基づいて判断したい場合があります。

例えば：

  • 条件分岐で判断したい（XXXという文字があった場合に文字YYYが存在すること、など）
  • ページ上に表示される「更新日」が本日かどうか判断したい
  • 何らかの値に変換処理を加えた結果を元に判断したい

Splunk Syntheticsでは任意のJavaScriptを実行することができるのでそれで対応します。

API Testを使う場合とBrowser Testを使う場合のそれぞれで方法をまとめました。

テストサイト

各国の言語であいさつを返してくれるサイトをお借りします。
https://hellosalut.stefanbohacek.dev/?lang=ja

lang=jaでリクエストすると、「こんにちは」がHTMLエンコーディングされた形で返ってきます。

このままではテストが難しいのでJavaScriptを使ってデコードして結果を評価したいと思います。
（このケースではエンコーディングされた値を直接Assertすればいいじゃん、という話もありますが、記事の便宜上デコードさせてください）

API Testの場合

API TestはRESTによるPOST / GETなどを行えるTestです。
Responseに対してJavaScriptを実行した結果を変数に格納し、その変数に対してAssertを行えます。

このようなステップを作成します。

RequestでGETし、そのResponseをValidation内でJavaScriptを使い処理し結果を変数に格納、最後のAssertでテストします。

JavaScript部分を詳しく見てみます。

// response.bodyをJSONオブジェクトに変換
var apiResponse = JSON.parse(response.body);

// 変数でデコード処理を実行
var decodedHello = apiResponse.hello.replace(/&#(\d+);/g, function(match, num) {
  return String.fromCharCode(parseInt(num, 10));
});

// 結果を返す
decodedHello;
  • 前段のRequestで得られた値はresponse.bodyで取得できます。
    ※Body以外にもレスポンスヘッダーはheaders["content-length"]などで取得できます。
  • Bodyに対して処理を実施します。今回はデコードをしています。
  • 最後に結果を返しています。

そして、結果（デコードされた「こんにちは」）をcustom.helloに格納し、次のAssertでcustom.hello contains こんにちはすることで、期待する結果が得られたかをチェックします。
ここで「こんにちは」以外だとテストが失敗するのでアラートを上げることができます。

参考：テスト結果

Browser Testの場合

Browserで得られた結果に対して処理したいケースも多いと思います。
単発のページでのチェックはAPI Testで十分ですが、ユーザー動線も含めたチェックを行う場合はBrowser Testが必要です。

Browser Testの場合、JavaScriptの結果を変数に格納することができません。
代わりにJavaScript実行結果を要素としてHTMLに追加し、それに対してAssertを実行します。

ステップはこうなります。

JavaScript部分ですが

// bodyを取得
var body = document.querySelector('body > pre').textContent;

// response.bodyをJSONオブジェクトに変換
var apiResponse = JSON.parse(body);

// 変数でデコード処理を実行
var decodedHello = apiResponse.hello.replace(/&#(\d+);/g, function(match, num) {
  return String.fromCharCode(parseInt(num, 10));
});

// 結果を要素としてHTMLに追加
const resultElement = document.createElement('div');
resultElement.innerHTML = `<p>Syntheticsテスト結果</p>
<p>result: ${decodedHello}</p>`;
document.body.insertBefore(resultElement, document.body.firstChild);

  • まずはvar body = document.querySelector('body > pre').textContent;により、取得対象のテキストを抽出しています。
    ※今回のHTMLの構造がこうだったので、Selectorは適宜調整してください。

  • その後のデコード処理は同じです。

  • 最後にelementを作成し、ページの上部に追加しています。

これをブラウザ上で実行するとこのようになります。

result: こんにちはが追加されるので、これに対して「こんにちは」という文字が存在するかAssertをすれば良いという訳です。

Test結果を見ると、このようにJavaScriptで処理された結果が表示され、Assertが実行されました。
適切にJavaScriptで処理できているか分かるのでいいですね。

Assert失敗時もきちんと拾えています（「こんばんは」があることをテスト）。

まとめ

今回はデコード処理で試してみましたがJavaScriptでできる処理であればなんでも大丈夫です。

Discussion