Amazon CloudWatch SyntheticsのGUI ワークフロービルダーでログイン動作を監視してみた

こんにちは、技術5課長崎です。

タイトル通り、Amazon CloudWatch SyntheticsにてAWSが提供しているBluePrintの中から[GUIワークフロービルダー]を試してみました。

Amazon CloudWatch Syntheticsとは

簡潔に言うと、WEBページのシンプルなURL監視やユーザーの操作を想定したアクションが正常に実行できるかを監視する事ができます。

詳しくは、弊社加藤がブログを書いておりますのでご覧ください。

CloudWatch Synthetics が GA されたので何ができるのか調べてみた

また、弊社渡辺がその他BluePrintの監視方法についてブログを書いておりますので、こちらも合わせてご覧ください。

GUIワークフロービルダーって何ができるの？

公式のドキュメントを確認すると、以下のように記載されています。

GUI ワークフロービルダー設計図は、ウェブページに対してアクションを実行できることを検証します。たとえば、ウェブページにログインフォームがある場合、Canary はユーザーフィールドとパスワードフィールドに入力し、このフォームを送信してウェブページが正しく動作していることを検証できます。 Canary 設計図の使用 - Amazon CloudWatch

なるほど。WEBページにアクセスしたユーザーの一連の操作を監視できるようです。

以下のユーザー操作を監視してみたいと思います。操作の決定にはソースコードの指定が必要になります。

1.WEBページへアクセス

f:id:swx-nagasaki:20210201170243j:plain

ソースコード

<!DOCTYPE html>
<html>
<head>
  <title>webページ</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>cloudwatch synthetics</h1>
  <a href="test01.html" class="test01page">test01ページ</p>
  <a href="test02.html" class="test02page">test02ページ</p>
  <a href="test03.html" class="test03page">test03ページ</p>
  <a href="login01.php" class="loginpage">ログインページ</p>
</body>
</html>

2.ログインページのリンクからログイン画面を開く

f:id:swx-nagasaki:20210201170358j:plain

ソースコード

<!DOCTYPE html>
<html>
<head>
  <title>Loginページ</title>
  <meta charset="UTF-8">
</head>
<body>
<?php
if($error_message) {
    echo $error_message;
}
?>
<form action="index.php" method="POST">
    <p>ログインID：<input type="text" id="user_name" name="user_name"></p>
    <p>パスワード：<input type="password" id="password" name="password"></p>
    <input type="submit" id="login" name="login" value="ログイン">
</form>
</body>
</html>

3.ユーザー名、パスワードを入力して[ログイン]ボタンをクリックする

f:id:swx-nagasaki:20210201170526j:plain

4.ログイン成功の画面を表示する

f:id:swx-nagasaki:20210201170641j:plain

ソースコード

<!DOCTYPE html>
<html>
<head>
  <title>会員専用ページ</title>
  <meta charset="UTF-8">
</head>
<body id="loginsuccess">
        <p>おめでとう！ログインに成功しました！</p>
</body>
</html>

やってみる

CloudWatchダッシュボードから[Synthetics]を選択しCanaryを作成します。 BluePrintで[GUIワークフロービルダー]を選択して、項目を入力します。

アプリケーションまたはエンドポイント URL → 監視対象WEBページのURLを入力します
ワークフロービルダー → アクションやセレクター、そこに入力するテキストを設定しユーザー操作内容を決定できます

指定可能なアクション、セレクターは上記で記載している公式ドキュメントをご参照ください。

本検証での設定

セレクターの値はソースコードから引っ張ってきています。

アクション	セレクター	テキスト	実行されるユーザー操作 ※上記の1～4
クリック	[class='loginpage']	※入力不要	【2.ログインページのリンクからログイン画面を開く】操作を実行。※1.WEBページへアクセスは、エンドポイントURLで指定している為割愛
テキストを入力	[id='user_name']	swx-user	【3.ユーザー名、パスワードを入力して[ログイン]ボタンをクリックする】のユーザー名入力を実行
テキストを入力	[id='password']	swxpass	【3.ユーザー名、パスワードを入力して[ログイン]ボタンをクリックする】のパスワード入力を実行
ナビゲーションクリック	[id='login']	※入力不要	【3.ユーザー名、パスワードを入力して[ログイン]ボタンをクリックする】のログインボタンのクリックを実行
セレクターを確認	[id='loginsuccess']	※入力不要	【4.ログイン成功の画面を表示する】の実行