E2EテストをNew Relicで実装してみたら簡単だったので紹介したい

New Relic Advent Calendar 2022の12日目の記事となります。

はじめに

どうも、こんにちはこんばんは、SREの北浦(@kitta0108)です。

今回はNew RelicのSynthetics機能を使ってE2Eテストを実装したら思いの他、簡単且つ、痒いところによく手が届く印象でしたので、その知見を共有します。

この記事を読んだら、E2Eテストを実装したくなっちゃうに違いない!? そんな熱量でお届けしていきます。

こんな方におすすめの記事にしていくモチベーションでおります。

New Relicのマネジメントコンソール上では、以下からアクセスできる機能です。

解説の便宜上、以下のようなログイン画面の例を使っていきます。

■実装したいシナリオ

まずはSynthetics画面からCreate monitorをクリックします。

monitor typeの選択画面に遷移するので、今回は「User step execution」を選択します。 Zero code monitor buildingって書いてありますね。フレーズが素敵ですw

Creater monitor画面に遷移します。なんのテストなのか、名付けしたり、実行間隔の設定をします。

後述しますが、「Enable screenshot on failure and in script」にはチェックを入れておくと、後々捗ります。

お次はSelect locationsの設定です。外形監視として、どこのLocationからの疎通をTryするのかという設定ですね。

今回は日本国内からの疎通が取れればOKというアプリケーション要件なので、Tokyo、JPだけにチェックを入れます。

ここからが主題の設定です。以下がお題の完成形でして、画面右部の1 ~ 6のStepで処理が実行されます。

詳細は別セクションで解説します。

Navigate
- どこのURLへアクセスしにいくのか設定します。
  - Advanced OptionsによってUser-Agentの指定も可能です。
Type Text
- 要素をXPathで指定し、入力する文字列を設定します。
Click Element
- 要素をXPathで指定し、画面上でクリックさせる設定をします。
Secure Credential
- 要素をXPathで指定し、機密情報を入力する設定をします。
  - New Relic上で機密情報を扱う際には、Secure Credentialという機能を使って、情報を保存します。
    - 基本的なところではありますが、機密情報の扱いはベタのTextベースで扱わないように日々気をつけていきましょう！
Assert Text
- 要素をXPathで指定し、表示されているTextが指定の文字列と一致しているか確認します。
  - Equals以外にも以下の選択肢があります。これだけ揃っていれば不便な思いはしないで済みそうですね。

XPathの取得方法
- Google ChromeのDeveloper Toolを使ってCopyが可能です。
Fail時のScreenShot機能
- Results画面に遷移すると以下のように疎通結果ログの回覧が可能です。
- その中で結果がFailであったものの詳細をドリルダウンしていくと、疎通時の描画状態をScreenShotとして回覧が可能です。これは超絶便利ですよね。以下はAssert Checkでわざと違う値を設定した例です。Assert結果が違うって指摘もちゃんと出てますね。(ぼかしが多くてスミマセン！)

New RelicというとAPMのイメージが強いかと思いますが、今回は毛色を変えてSynthetics機能を紹介してみました。 E2Eテストしてみたい！もっと品質良く、且つ高速なフィードバックによる開発体験の向上したい！などの文脈で取り組んでみてはいかがでしょうか。