Selenium スクリプトを利用した外形監視を試してみる

Instanaでは、外形監視の機能を順次強化しており、現在は シンプルな REST API監視と JavaScriptベースでのシナリオ監視がサポートされています。でもそれだけでは画面遷移がある複雑なシナリオの監視スクリプトを作成するのはたいへんですよね。
そのため、現在 Selenium スクリプトを利用した外形監視の機能がオープン・ベータとして提供されています。今回はその機能を早速試してみたいと思います。

# 1. PoP (Point of Presence)の構成

Instana では 外形監視の要求を投げる環境を PoP (Point of Presence)と呼びます。
PoPの稼働環境は、K8sの環境が前提となっていますが、単体サーバーでも稼働するように、 PoPの稼働環境としてのみであれば、k3sでも動かすことが可能です。
PoPを自由な場所に構成できることで、実際のユーザーと同じ経路（例えば社内LANを通して）で、監視を行うことが可能です。また将来的には、公開されたPoPの提供も計画されているようです。

### 1-1. k3sの導入
PoP導入に必要な前提条件は[こちら](https://www.ibm.com/docs/ja/instana-observability/current?topic=monitoring-pop-deployment#prerequisites)で確認します。
ここでは、簡易的な検証のため k3s を利用して検証していきます。
以下のコマンドで k3s を導入します
```
curl -sfL https://get.k3s.io | sh -
```
k3sのステータスは、以下で確認します。
```
systemctl status k3s
```

### 1-2. k3s kubeconfigの設定

/usr/local/binにある k3s コマンドにパスを通します
```
# export PATH=/usr/local/bin:$PATH
```
kubectl コマンドを導入します
```
# curl -LO "https://dl.k8s.io/release/$(curl -LS https://dl.k8s.io/release/stable.txt)/bin/linux/amd64/kubectl"
```

KubeConfigを設定します
```
# mkdir ~/.kube
# k3s kubectl config view --raw | tee ~/.kube/config
# chmod 600 ~/.kube/config
# export KUBECONFIG=~/.kube/config
```
### 1-3. helmコマンドの導入
PoPのパッケージは、helmで提供されますので、helmコマンドを導入します。
```
root@itz-3100008gyq-xlnh:/etc# curl -fsSL -o get_helm.sh https://raw.githubusercontent.com/helm/helm/main/scripts/get-helm-3
root@itz-3100008gyq-xlnh:/etc# chmod 700 get_helm.sh
root@itz-3100008gyq-xlnh:/etc# ./get_helm.sh
Downloading https://get.helm.sh/helm-v3.13.1-linux-amd64.tar.gz
Verifying checksum... Done.
Preparing to install helm into /usr/local/bin
helm installed into /usr/local/bin/helm
```
### 1-4. helmコマンドで PoPを導入
helm コマンドで Sysnthetic PoPを導入しましょう。以下の例では、syntheticという名前空間を新規作成し、そこに synthetic-popという名前で導入しています。downloadkey および controllerの各プロパティは、ユーザー固有の情報が入りますので、各自ご確認ください。
```
helm install synthetic-pop \
    --repo https://agents.instana.io/helm  \
    --namespace synthetic \
    --create-namespace \
    --set downloadKey="yourdownloadkey" \
    --set controller.location="HakozakiPoP;Hakozaki PoP;Japan;Tokyo;33.61;130.42;This is a Synthetic Point of Presence in Hakozaki" \
    --set controller.instanaKey="instanaAgentkey" \
    --set controller.instanaSyntheticEndpoint="https://synthetics-<region>-saas.instana.io" \
    --set redis.tls.enabled=false \ 
    --set redis.password="redis_password" \
    synthetic-pop
NAME: synthetic-pop
LAST DEPLOYED: Tue Dec 12 06:57:26 2023
NAMESPACE: synthetic
STATUS: deployed
REVISION: 1
TEST SUITE: None
NOTES:
CHART NAME: synthetic-pop
CHART VERSION: 1.1.2
APP VERSION: 1.263.0
```
### 1-5. 導入したPoPのステータスを確認
以下のコマンドで、PoPのアプリケーションが正常に稼働していることを確認してます。
サポートされているテスト・シナリオ毎にプレイバック・エンジンがあるので分かりやすいですね。
```
root@itz-3100008gyq-xlnh:~# kubectl get pods -n synthetic
NAME                                                           READY   STATUS    RESTARTS   AGE
synthetic-pop-redis-68b7c5f99c-5bsck                           1/1     Running   0          75s
synthetic-pop-javascript-playback-engine-6c4f856c64-jx5lp      1/1     Running   0          75s
synthetic-pop-http-playback-engine-74f967bb84-97ncw            1/1     Running   0          75s
synthetic-pop-browserscript-playback-engine-7fb4bbdb84-bglbg   1/1     Running   0          75s
synthetic-pop-controller-6cc87d578d-q22v5                      1/1     Running   0          75s
```

### 1-6. PoPの正常稼働を確認
コンソールでも正常に稼働していることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/bb48d8a7-ee30-4adb-a656-941d89fe3f90.png)


# 2. Selenium IDEを利用したブラウザ・スクリプトの記録
Selenium は Webアプリケーションをテストする代表的なツールです。
ここでは Selenium のレコード機能を使って、シナリオを記録していきます。

### 2-1. Selenium IDEプラグインをブラウザに追加
Chrome ウェブストアから Selenium IDEのプラグインを Chromeに追加します。
Firefox では Firefoxアドオンとして、Selenium IDEを Firefoxに追加できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/44683963-84dc-27df-991b-b9266a8acd4c.png)

### 2-2. Selenium IDEでシナリオを記録
ブラウザの拡張機能のボタンから、Selenium IDEを起動します。
初回は「Recored a new test in a new project」を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/26c4cca8-672d-b9cd-d31f-e328956cb174.png)
プロジェクト名を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/cd3023c7-68f0-fd48-f068-1f5071ae1655.png)

テストの開始ポイントとなるURLを指定します。
**Start Recording** を押すと、別のブラウザが立ち上がりレコーディングが開始されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/8056cd6c-f32d-72a7-aa46-c98c32ac1d9c.png)

テスト・シナリオを実行します。
ここでは、シンプルなユーザー入力と画面遷移のあるシナリオを試します。
1. FixCentralの検索窓に「IBM MQ 9.3.4.0 AIX」を入力し、検索を実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/1cf2eb0c-4b2c-2278-aff4-60ebba070cf0.png)
1. 検索結果が表示されることを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/b2ba14f2-c57c-e32f-c837-c32d02cac3a5.png)

テスト・シナリオの実行が終わったら、Selenium IDEボックス 左上のボタンで レコーディングを停止します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/07a9e957-5059-63bd-594d-ebc060036ea5.png)

作成したテスト・シナリオに名前をつけます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/47bd4417-0ac1-6950-d5ce-116a8545c620.png)

「Run Current Test」を実行し、記録したシナリオが正しく動くことを確認します。
２回クリックしているものや間違いなどを削除して、シナリオを整理します。稼働が確認できたら、任意のフォルダーに保存してください。ここではibm_fixcentral_mq.site という名前で保管します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/8c952c30-68f7-bfdf-578f-623e4512da6e.png)

### 2-3. テストシナリオのカスタマイズ

#### 2-3-1. localRunnner での稼働検証
ブラウザの記録では問題ありませんでしたが、Instana　の PoPで実行する際には、まったく ブラウザのキャッシュやクッキーがない状態で検証が行われます。このため、InstanaのPoPで動かすためには、各サイトに訪れた際に聞かれる　「クッキー収集への同意」などを行う必要があります（ここが、はまりどころです）。
実際に PoPで検証して試してもいいですが、事前に Instana で稼働する PoPでのシナリオが正しく動くかを調べるためには、ローカルの環境に [localRunnner](https://github.com/instana/synthetic-browser-script) を導入して事前確認することができます(今回は割愛）。

#### 2-3-2. Instana APIの組込み
Selenium IDEで利用できる処理以外に、[Instanaの外形監視機能が提供しているAPI](https://www.ibm.com/docs/en/instana-observability/current?topic=beta-browser-api-reference) を利用して、テストシナリオをカスタマイズできます。
ここでは、スクリーンショットを取得する *$browser.takeScreenshot()* を追加してみます。
完成したシナリオがこちらです（実際には、このシナリオになるまでに、多少試行錯誤しています）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/53c86d4e-508c-e79f-8828-54fdcb95740c.png)


# 3. 外形監視テストの作成と実行

### 3-1. テストシナリオ作成ウィザードの開始

1. シンセティック・モニタリング のテスト画面の下にある ADDのボタンから 「Synthetic Testの追加」を選びます。
これが出てこないかたは、管理者に権限の確認をおこなってください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/360c8182-6ca8-4142-8a2e-d9ddb581f791.png)
1. Selenium IDEシナリオによる検証を選ぶには、ブラウザー・スクリプトを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/9392c50e-c8fe-5b3b-80bf-3adf71522662.png)
1. スクリプトのアップロードから、先程取得したシナリオ・ファイル(.siteファイル）をアップロードします。また、テストの実行先として先ほど作成したHakozaki PoPを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/2edbf051-e239-be8a-4a54-ff929a98234a.png)
1. テストの実行間隔を指定します。デフォルトは15分に一回ですが、ここでは10分に一回に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/d51da52d-5b13-9028-ee5f-03ccb1cdf803.png)
1. テストに名前をつけます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/8a78dbd3-e522-03da-037e-cff794719065.png)

### 3-2. テストシナリオによる外形監視の実行

1. 指定されたスケジュールで、テストが実行開始されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/ae39b4fa-f986-648e-634f-903a66910da8.png)
1. 10分に一度シナリオが実行されているのがわかります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/af85ed3c-6d69-8e88-6d44-3a8984011e28.png)
1. それぞれのテストシナリオの実行結果も把握可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/1c448b81-a94f-5500-3414-0446b37353a7.png)
1. ブラウザから呼び出されている個別リソースの取得状況も把握できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/6220d999-a484-0a96-c784-0a843004bed5.png)
1. 上にある **View Screenshot(s)** のリンクからは、テスト実行時に取得した画面ショットを確認できます。　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/39942272-4519-e052-a4ec-4ff20d50ec93.png)

### 3-3. テスト失敗時の外形監視
1. テスト失敗時には、障害のところのグラフに表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/eab29422-9b5b-9d4d-aed2-8287a6f5adc6.png)
1. テスト失敗時には、失敗した際のメッセージやログが取得されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/7b83762a-116b-60fe-8535-a4c17c4e81f9.png)
1. テスト失敗時には、自動でスクリーンショットも取得されるようです。この時は、クッキー収集への同意が行われていないためエラーとなっていたようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/af916077-f169-474c-309c-84dea448efe6.png)
1. 外形監視が失敗した場合には、アラートを上げることもできます。連続して２回失敗したらアラートを上げるなど、通知の感度はカスタマイズ可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323873/6f781934-c571-f952-3002-d39f3426aa6b.png)


# まとめ
現在、ベータで提供されている Selenium IDEを利用した外形監視の機能を試してみました。
Selenium IDEを利用して、簡単にブラウザのシナリオ監視を実現できるのは非常に効率的だと感じました。一方で、私自身はSelenium が初めてでしたので、シナリオがうまく動かない場合の切り分けには手こずりました。慣れの問題でしょうか。

外形監視は、現在手動でユーザーが稼働確認を行なっているシステムや月に一度だけ稼働するあまり手をかけられないシステムの監視には最適ですね。ぜひ試してみてください。