【初心者向け】APIGateway＆CloudWatch Syntheticsを使ってE2Eテストやってみた。後編

はじめに

こんにちは、クラウド事業部のサカタニです。

最近、CloudWatch Syntheticsというサービスを初めて知りました。
いい機会なので自分で手を動かしてどんなことができるサービスなのか勉強した内容のまとめです。
今回はCloudWatch Syntheticsの機能検証の後編としてCloudWatch Syntheticsを使用したE2Eテストをご説明します。

どんなひとに読んで欲しい

APIGatewayを使ったことがない人（前編で扱いました。）
CloudWatch Syntheticsを使ったことがない人
E2Eテストに興味がある人

CloudWatch Syntheticsとは

docs.aws.amazon.com docs.aws.amazon.com CloudWatch Syntheticsは、操作内容をCanaryと呼ばれるスクリプトとして作成し、エンドポイントと API を監視できるサービスです。
E2Eテスト（エンドツーエンドテスト）として、実際のユーザの操作をスクリプトとして記述し、不具合の検出が行えます。
言語としてはPythonとJavascript(Node.js)が使用でき、PythonはSelenium、Javascript(Node.js)はPuppeteerを介してブラウザを操作します。
（今回はPythonを使用します。）
上記をインフラを気にすることなく実施することができます。
詳細は上記AWS公式ドキュメントをご参照ください。

料金

Synthetics (Canaries) USD 0.0019/canary 実行（東京リージョン）

料金は改定されている可能性がございますので必ずご自身でご確認ください。

aws.amazon.com

前提

前編で以下のWebアプリケーション作成済みであること。

手順

CloudWatch Syntheticsの設定

CloudWatchのサービス画面の左側メニューのApplication Signals内のSynthetics Canariesを選びます。
「Canary を作成」をクリックします。

「設計図を使用する」、「ハートビートのモニタリング」を選択し、
任意の名前（画面例ではjanken-test）、「アプリケーションまたはエンドポイント URL」として前編でアップロードしたオブジェクトURLを入力してください。
「スクリーンショットを撮る」をonにしてください。

「スクリプトエディタ」では、ランタイムバージョンを「syn-python-selenium-4.0」にして、
変数urlには前項のオブジェクトURLを代入して以下のコードを入力してください。

from selenium.webdriver.common.by import By
from aws_synthetics.selenium import synthetics_webdriver as syn_webdriver
from aws_synthetics.common import synthetics_logger as logger
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions
import random

def main():

    url = "オブジェクトURL"
    hands = ("rock", "scissors", "paper")
    hand = random.randrange(3)

    browser = syn_webdriver.Chrome()
    browser.get(url)

    browser.save_screenshot("loaded.png")

    response_code = syn_webdriver.get_http_response(url)
    if not response_code or response_code < 200 or response_code > 299:
        raise Exception("Failed to load page!")
    
    browser.find_element(By.ID, hands[hand]).click()

    wait = WebDriverWait(browser, 5)
    element = wait.until(expected_conditions.visibility_of_element_located((By.ID, "retrybutton")))
    
    browser.save_screenshot("played.png")
        
    browser.find_element(By.ID, "retry").click()
    
    browser.save_screenshot("retried.png")
    
    logger.info("Canary successfully executed.")

def handler(event, context):
    # user defined log statements using synthetics_logger
    logger.info("Selenium Python heartbeat canary.")
    return main()

スケジュールは1回実行に設定してください。（タイムアウトを30秒に設定していますが設定しなくても問題ないです。）

上記以外はデフォルトの設定で「Canary を作成」をクリックします。

動作確認正常系

作成が完了しましたら、そのまま1度Canaryが実行されるので、実行完了まで適宜更新しながら待ちます。
完了したら、前回の実行結果が成功、
状態が停止になりますので、名前列の名前をクリックします。

表示された画面のスクリーンショット欄を見てみると3枚スクリーンショットが表示されているはずです。
初期画面
対戦結果（勝っていますね。）
再戦ボタンクリック後（初期画面と同じ画面に戻っています。）

このようにユーザによるブラウザ操作と各画面のスクリーンショットを取得することができます。

動作確認異常系（呼び出しレート超過）

前編でAPIGatewayの呼び出しレート制限を設定している場合は、
呼び出しレートを超過させるために、20回ほどジャンケンで遊んでボタンをクリックしても画面が変わらない状態にしてください。
呼び出しレート制限の設定をしていない場合は、異常系（APIエンドポイント削除）から実施ください。

名前の横のチェックボタンをonにして、アクションから開始を選びます。
実行完了まで、適宜更新しながら待ちます。

実行完了したら、失敗の文字と赤主体の画面になります。
（右上のグラフ、2回成功していますが気にしないでください。）

名前列の名前をクリックし、失敗したデータポイントを選択し、スクリーンショットを確認すると
初期画面のスクリーンショット1枚しかありません。
自分の手のボタンを選択したのに勝敗が表示されないため、タイムアウトしました。

動作確認異常系（APIエンドポイント削除）

呼び出し先のAPIが見つからない場合の挙動を確認するために、
前編で作成したAPIGatewayのステージを削除します。

名前の横のチェックボタンをonにして、アクションから開始を選びます。
実行完了まで、適宜更新しながら待ちます。

実行完了したら、前項と同様に失敗の文字と赤主体の画面になります。
（右上のグラフ、失敗が増えていますが気にしないでください。）

名前列の名前をクリックし、失敗したデータポイントを選択し、スクリーンショットを確認すると
前項と同様に初期画面のスクリーンショット1枚しかありません。
APIエンドポイントが見つからない場合も自分の手のボタンを選択したのに勝敗が表示されないため、タイムアウトしました。

動作確認異常系（フロントエンドエンドポイント削除）

最後に監視対象のURL自体が見つからない場合の挙動を確認したいと思います。
前編でS3バケットにアップロードしたHTMLファイルを削除してください。

名前の横のチェックボタンをonにして、アクションから開始を選びます。
実行完了まで、適宜更新しながら待ちます。

実行完了後、やはり失敗しています。

名前列の名前をクリックし、失敗したデータポイントを選択し、スクリーンショットを確認すると
アクセス拒否画面のスクリーンショット1枚しかありません。

おわりに

CloudWatch Syntheticsを活用すれば、インフラ管理を気にすることなく継続的にE2Eテストの実施ができます。
今回は単発の実行結果を毎回確認していましたが、実行結果が失敗になった場合、AWS SNSを利用して通知もできるので、自サービスの死活監視を担うことができます。
特に単純なURLの疎通のみではなく、ユーザ操作の結果まで確認したい場合に利用するサービスだと思います。
実際に自分でやってみた中で気になった機能は、各操作の画面レスポンスの証跡としてスクリーンショットの取得です。
S3バケットへの保管まで簡単にできるのは、うまく活用したい機能だと思いました。

お知らせ

APCはAWS Advanced Tier Services(アドバンストティアサービスパートナー)認定を受けております。

その中で私達クラウド事業部はAWSなどのクラウド技術を活用したSI/SESのご支援をしております。
www.ap-com.co.jp

https://www.ap-com.co.jp/service/utilize-aws/

また、一緒に働いていただける仲間も募集中です！
今年もまだまだ組織規模拡大中なので、ご興味持っていただけましたらぜひお声がけください。

APC 技術ブログ

株式会社エーピーコミュニケーションズの技術ブログです。

【初心者向け】APIGateway＆CloudWatch Syntheticsを使ってE2Eテストやってみた。後編

目次

はじめに

どんなひとに読んで欲しい

CloudWatch Syntheticsとは

料金

前提