メールテスト機能による2段階認証テスト

ウェブアプリケーションのログインやユーザー登録では、ブラウザ操作後にメールを開き、メールに書かれた認証コードをブラウザに入力して行う二段階認証がよく用いられますが、自動テストを組むのは大変ですよね。

でも！ Autifyならできるんです😉

この記事ではメールテスト機能とJSステップを活用し、二段階認証のテストをAutifyしていきましょう。

はじめに

メールによる二段階認証をAutifyでテストするには、テスト対象のアプリケーションとAutifyの環境それぞれが、以下の前提を満たす必要があります。

テスト対象のアプリケーションにおける前提

• テスト対象のアプリケーションにおいて、認証対象のアカウントに対しAutifyのメールテストで発行されるメールアドレス（ドメイン：testmail.autify.com）を指定できること
• テスト対象のアプリケーションにおいて、メールに含まれる二段階認証の認証コードを用いた認証処理が行われること

Autifyにおける前提

• メールテスト機能がご利用可能であること

  • メールテスト機能が有効な場合：以下のように、Autify Recorderにメールのアイコンが表示されます。レコーディングの準備万端です！
    
  • メールテスト機能が無効な場合：
    以下のように、Autify Recorderにメールのアイコンが表示されません。そんなときは、オプショントライアル申し込みフォームよりトライアルをお申し込みいただければ、メールテスト機能をお試しいただいたけるようにご用意いたします👍
    

• 「固定メールアドレス」を使用する場合は、あらかじめメールアドレスが作成済であること

  • 「固定メールアドレス」は、ワークスペース設定画面より作成できます。メールテスト機能で使用可能な「固定メールアドレス」「ランダムメールアドレス」の違いについては、こちらの記事をご確認ください。
  • メールによる二段階認証の場合であれば、概ね以下のように使い分けられます。
    • 毎回同じ会員のログイン処理における二段階認証をテスト → 固定メールアドレス
    • 毎回一意のメールアドレスで新規登録を行う処理に含まれる二段階認証をテストする → ランダムメールアドレス

どんなシナリオができる？

以下は、実際のシナリオの完成例です。各ステップでは以下のような処理をしています。

• ステップ2：Autifyのメールテスト機能で発行されたメールアドレスを入力する
• ステップ 5-8：新しいウィンドウ内でメールを開き、ステップ8でJSステップを利用して二段階認証コードを取得しreturnする
• ステップ11：ステップ7でreturnされた二段階認証コードを、二段階認証のフォームへ入力する
• ステップ12-13：二段階認証処理を進め、成功したことを確認する

シナリオ詳細画面

テスト結果詳細画面

ステップ11で、ステップ8で取得した二段階認証コードが入力されていることが確認できます。

作ってみましょう！

上記でご紹介したシナリオを作成する方法を、さっそく見ていきましょう。

手順は大きく

• シナリオのレコーディング
• レコーディング後のシナリオの編集

に分かれます。

シナリオのレコーディング

1. シナリオを作成します。ウェブアプリケーションから二段階認証のメールが送出されるまでの操作をレコーディングします。

レコーダーからメールアドレスを開き「クリックボードへコピー」のアイコンをクリックすると、対象のメールアドレスをコピーすることができます。

コピーしたメールアドレスを、ウェブアプリケーションのメールアドレスの入力欄へ入力します。そのまま一段階目の認証をレコーディングしましょう。

2. 二段階認証のメールが送出されるステップをレコーディング後、現在操作しているウィンドウとは別に、メールを開くための新しいウィンドウを開きます。（URLは任意で構いません）

3. 新しいウィンドウでレコーダーから目当てのメールアドレスをクリックし、届いた二段階認証のメールを開きます。

4. メール内に記載された二段階認証のコードに対し「対象が表示されていることを確認する」アサーションを追加します。さらに、その要素のCSSセレクターを確認します（後ほどJSステップで利用します。CSSセレクターの確認方法はこちらの記事をご参照ください。）

確認できたら、ウィンドウを閉じます。

5. 認証フォームを開いていたウィンドウに戻り、メールに表示されていた二段階認証のコードをフォームに入力し、後続のステップまでレコーディングを続けます。

レコーディング後のシナリオの編集

レコーディング後は、メールから動的に二段階認証コードを取得できるよう、JSステップを準備します。

1. 二段階認証のメールを開くステップの直後にJSステップを挿入します。

2. JSステップで、メールから取得した文字列をreturnします。以下はサンプルコードです。<TODO: REPLACE SELECTOR> の部分を、メールの構造に沿った内容に置き換えます。

/**
* Locate the element
* 要素を探す
*/
var selector = "<TODO: REPLACE SELECTOR>";
var element = document.querySelector(selector);

/**
* Stop process if it does not exist
* 要素がなければ処理を中断する
*/
if (!element) {
throw new Error('Error: cannot find the element with selector(' + selector + ').');
}

/**
* Return text content
* テキスト内容を返す
*/
return element.textContent;

3. 二段階認証のコードを入力するステップで、入力値を「他のステップから取得」とし、JSステップからreturnされた値を入力するようにに変更します。
   

これで、毎回メール受信の度に変化する認証コードをフォームへ入力することが可能になりました！

いかがでしょう、メールでの二段階認証を「Autifyする」イメージがわきましたでしょうか？ 当サンプルに限らず、メールテストや認証の突破に関してご不明点がございましたら、お気軽にサポートへご連絡ください😊

参照記事

• 各種認証をテストする