2020/09/28

ツール

技術/ガジェット

すずき

CodeceptJS、MailSlurpでメールも簡単自動テスト

はじめに

こんにちは、学協会向け会員管理サービスSMOOSYのQA担当をしている鈴木です。
以前に「DockerとCodeceptJSでどこでもE2E自動テスト」という記事で、E2E(End to End)テストに関するフレームワーク「CodeceptJS」をご紹介しましたが、今回はその続きです。
CodeceptJSでは様々なプラグインが提供されておりますが、今回はメール関連のテスト自動化に便利なサービスとプラグインをご紹介します。

メールに関するE2Eテスト

会員登録やパスワード再設定など会員管理定番の機能では、メールと連携して動作する機能があります。機能使用時にメールが送信され、そのメールに含まれるURLへアクセスすることで操作が続けられるというものです。
操作に手間がかかるこのような機能こそ、E2Eテストを自動化したい＆することでメリットが感じられる機能だと思います。
メールテストの自動化は、Gmail APIを使用するやり方やメールテスト用の外部サービスを利用するやり方などいろいろありますが、今回はCodeceptJSでプラグインが提供されており、連携が簡単なMailSlurpというサービスを使用します。

MailSlurp

MailSlurpはメールのE2Eテストをサポートするサービスで、メールボックスの作成、メール受信、メール本文の参照などのメール操作をWeb APIでできるクラウドサービスです。
JavaScript、Java、PHPなどの様々な言語やテストフレームワークに対応しており、CodeceptJSではMailSlurpヘルパー（プラグイン）をインストールすることで簡単に利用できます。

環境準備

MailSlurpでAPIキーの取得

MailSlurpを利用するためには、以下の手順でAPIキーを取得しておく必要があります。

MailSlurpサインアップでログイン用のメールアドレス、パスワードを登録する（登録済みの場合、MailSlurpログインからログインする）。
確認メールが送信されるのでメールから「Access MailSlurp」をクリックする。
Dashboard画面が表示されるのでAPIキーをコピーする。

MailSlurp Dashboard画面

CodeceptJSのMailSlurpヘルパーをインストール

CodeceptJSでMailSlurpを使うため、MailSlurpヘルパーをインストールします。
CodeceptJSは2.3.0以上が必要なため、それ以下のバージョンを使用している場合はバージョンアップしてからインストールします。

$ npm update codeceptjs

$ npm install @codeceptjs/mailslurp-helper typedoc

$ npm update codeceptjs

$ npm install @codeceptjs/mailslurp-helper typedoc

CodeceptJSの設定ファイルに、コピーしたAPIキーを指定してMailSlurpヘルパーの設定を追記します。

exports.config = {
　　・
　　・
  helpers: {
　　・
　　・
    MailSlurp: {
      require: '@codeceptjs/mailslurp-helper',
      apiKey: 'XXXXXXXXXXXXXXXXX' // MailSlurpでコピーしたAPIキーを記載する
    },
  },

exports.config = {

　　・

helpers: {

　　・

MailSlurp: {

require: '@codeceptjs/mailslurp-helper',

apiKey: 'XXXXXXXXXXXXXXXXX' // MailSlurpでコピーしたAPIキーを記載する

メール連携テストをしてみよう

テストシナリオ

今回はSMOOSYのパスワード再発行機能をサンプルとして、以下のようなシナリオでテストします。

No.	アクション	確認内容
1	パスワード再発行画面で試験用会員の会員番号を入力し、送信ボタンをクリックする	送信完了メッセージが表示されること
2	試験用会員のメールアドレスでパスワード設定URLの通知メールを受信する	メールのFrom、件名、本文が正しいこと
3	通知メールのパスワード設定URLへアクセスする	パスワード登録画面が表示されること
4	パスワード設定画面で新パスワードを登録する	設定完了画面が表示されること
5	会員ログイン画面で試験用会員の会員番号、再発行した新パスワードを入力し、ログインボタンをクリックする	会員マイページトップ画面が表示されること

テストコードの作成

前項のテストシナリオに従ったCodeceptJSのテストコードを作成します。
テストシナリオを実行する前に、MailSlurpで試験用メールアドレスを生成し、試験用会員のメールアドレスを生成した試験用メールアドレスに変更する準備作業が必要です。
テストを自動化するため、この準備作業も合わせてテストコードで実装します。

Feature('サンプル試験')

Scenario('パスワード再発行', async (I) => {
  // ***** 試験準備 ***** 
  // 試験用メールアドレス生成
  const mailbox = await I.haveNewMailbox();

  // 会員情報変更機能で試験用会員:SZ990786のメールアドレス変更
  session('office', () => { //会員情報変更とパスワード再発行は別セッションで実行
    I.amOnPage('https://xxxxxxxx.smoosy-xxxxxx.atlas.jp/secretariat/login'); //管理者ログイン画面
    I.fillField('ログインID', 'xxxxxxx'); //管理者ログインID入力
    I.fillField('パスワード', 'xxxxxxx'); //管理者パスワード入力
    I.click('ログイン'); //ログインをクリック
    I.waitForText('トップ画面'); //トップ画面が表示されるまで待つ
    I.amOnPage('https://xxxxxxxx.smoosy-xxxxxx.atlas.jp/secretariat/members?type=INDIVIDUAL.....text=SZ990786'); //試験用会員を検索
    I.click('会員情報変更'); //会員情報変更をクリック
    I.fillField('emails.email_part[0]',mailbox.emailAddress); //メールアドレスに試験用メールアドレスを入力
    I.click('確認'); //確認をクリック
    I.click('登録'); //登録をクリック
    I.see('会員情報を変更しました'); //会員情報変更完了を確認
  });

  // ***** 試験シナリオ開始 ***** 
  //パスワード再設定機能で試験用会員の会員番号を入力
  session('user', () => { //会員情報変更とパスワード再発行は別セッションで実行
    I.amOnPage('https://xxxxxxxx.smoosy-xxxxxx.atlas.jp/mypage/password-issue'); //パスワード再発行画面
    I.fillField('会員番号またはメールアドレス','SZ990786'); //試験用会員の会員番号を入力
    I.click('送信'); //送信をクリック
    I.see('メールを送信しました'); //メール送信完了を確認
  });

  //メールを受信
  const email = await I.waitForLatestEmail(30); //最新メールを取得（30秒でタイムアウト）
  //メール内容を確認
  I.seeEmailIsFrom('xxxxxxx@xxx.xxx'); //Fromチェック
  I.seeInEmailSubject('パスワード設定URLのお知らせ'); //件名チェック
  I.seeInEmailBody('会員マイページのパスワード設定URLをお知らせいたします。'); //本文チェック
  //メールよりURL取得
  const url = email.body.match(/https:\/\/xxxxxxxx\.smoosy-xxxxxx\.atlas\.jp\/mypage\/password-issue\?token=\w+/)[0];

  //パスワード設定URLにアクセスして新パスワードを設定
  session('user', () => { //パスワード再設定画面で使用したセッションで操作を続ける
    I.amOnPage(url); //パスワード設定URLにアクセス
    I.see('パスワードを入力してください'); //パスワード設定画面が表示されることを確認
    I.fillField('#newPassword','xxxxxxxx'); //新パスワードを入力
    I.fillField('#confirmPassword','xxxxxxxx'); //確認用新パスワードを入力
    I.click('登録'); //登録をクリック
    I.see('パスワードを設定しました'); //
  });

  //新パスワードで会員マイページにログイン
  session('user', () => { //パスワード再設定画面で使用したセッションで操作を続ける
    I.amOnPage('https://xxxxxxxx.smoosy-xxxxxx.atlas.jp/mypage/login'); //会員ログイン画面
    I.fillField('ログインID', 'SZ990786'); //試験用会員の会員番号を入力
    I.fillField('パスワード', 'xxxxxxx'); //再発行した新パスワードを入力
    I.click('ログイン'); //ログインをクリック
    I.see('会員マイページ'); //会員マイページトップ画面が表示されることを確認
  });

})

Feature('サンプル試験')

Scenario('パスワード再発行', async (I) => {

// ***** 試験準備 *****

// 試験用メールアドレス生成

const mailbox = await I.haveNewMailbox();

// 会員情報変更機能で試験用会員:SZ990786のメールアドレス変更

session('office', () => { //会員情報変更とパスワード再発行は別セッションで実行

I.amOnPage('https://xxxxxxxx.smoosy-xxxxxx.atlas.jp/secretariat/login'); //管理者ログイン画面

I.fillField('ログインID', 'xxxxxxx'); //管理者ログインID入力

I.fillField('パスワード', 'xxxxxxx'); //管理者パスワード入力

I.click('ログイン'); //ログインをクリック

I.waitForText('トップ画面'); //トップ画面が表示されるまで待つ

I.amOnPage('https://xxxxxxxx.smoosy-xxxxxx.atlas.jp/secretariat/members?type=INDIVIDUAL.....text=SZ990786'); //試験用会員を検索

I.click('会員情報変更'); //会員情報変更をクリック

I.fillField('emails.email_part[0]',mailbox.emailAddress); //メールアドレスに試験用メールアドレスを入力

I.click('確認'); //確認をクリック

I.click('登録'); //登録をクリック

I.see('会員情報を変更しました'); //会員情報変更完了を確認

});

// ***** 試験シナリオ開始 *****

//パスワード再設定機能で試験用会員の会員番号を入力

session('user', () => { //会員情報変更とパスワード再発行は別セッションで実行

I.amOnPage('https://xxxxxxxx.smoosy-xxxxxx.atlas.jp/mypage/password-issue'); //パスワード再発行画面

I.fillField('会員番号またはメールアドレス','SZ990786'); //試験用会員の会員番号を入力

I.click('送信'); //送信をクリック

I.see('メールを送信しました'); //メール送信完了を確認

});

//メールを受信

const email = await I.waitForLatestEmail(30); //最新メールを取得（30秒でタイムアウト）

//メール内容を確認

I.seeEmailIsFrom('xxxxxxx@xxx.xxx'); //Fromチェック

I.seeInEmailSubject('パスワード設定URLのお知らせ'); //件名チェック

I.seeInEmailBody('会員マイページのパスワード設定URLをお知らせいたします。'); //本文チェック

//メールよりURL取得

const url = email.body.match(/https:\/\/xxxxxxxx\.smoosy-xxxxxx\.atlas\.jp\/mypage\/password-issue\?token=\w+/)[0];

//パスワード設定URLにアクセスして新パスワードを設定

session('user', () => { //パスワード再設定画面で使用したセッションで操作を続ける

I.amOnPage(url); //パスワード設定URLにアクセス

I.see('パスワードを入力してください'); //パスワード設定画面が表示されることを確認

I.fillField('#newPassword','xxxxxxxx'); //新パスワードを入力

I.fillField('#confirmPassword','xxxxxxxx'); //確認用新パスワードを入力

I.click('登録'); //登録をクリック

I.see('パスワードを設定しました'); //

});

//新パスワードで会員マイページにログイン

session('user', () => { //パスワード再設定画面で使用したセッションで操作を続ける

I.amOnPage('https://xxxxxxxx.smoosy-xxxxxx.atlas.jp/mypage/login'); //会員ログイン画面

I.fillField('ログインID', 'SZ990786'); //試験用会員の会員番号を入力

I.fillField('パスワード', 'xxxxxxx'); //再発行した新パスワードを入力

I.click('ログイン'); //ログインをクリック

I.see('会員マイページ'); //会員マイページトップ画面が表示されることを確認

});

})

テストの実行

テストコードファイル名を指定してCodeceptJSを実行します。
「–steps」オプションを指定して実行するとステップ毎の実行内容が表示されます。

$ npx codeceptjs run sample_test.js --steps
CodeceptJS v2.3.6
Using test root "/tests"
サンプル試験 --
  パスワード再発行
    I have new mailbox
    office: I am on page "https://xxxxxxxx.smoosy-xxxxxx.atlas.jp/secretariat/login"
    office: I fill field "ログインID", "xxxxxxx"
    office: I fill field "パスワード", "xxxxxxx"
    office: I click "ログイン"
    office: I wait for text "トップ画面"
    office: I am on page "https://xxxxxxxx.smoosy-xxxxxx.atlas.jp/secretariat/members?type=INDIVIDUAL…"
    office: I click "会員情報変更"
    office: I fill field "emails.email_part[0]", "xxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx@mailslurp.com"
    office: I click "確認"
    office: I click "登録"
    office: I see "会員情報を変更しました"
    user: I am on page "https://xxxxxxxx.smoosy-xxxxxx.atlas.jp/mypage/password-issue"
    user: I fill field "会員番号またはメールアドレス", "SZ990786"
    user: I click "送信"
    user: I see "メールを送信しました"
    I wait for latest email 30
    I see email is from "xxxxxxx@xxx.xxx"
    I see in email subject "パスワード設定URLのお知らせ"
    I see in email body "会員マイページのパスワード設定URLをお知らせいたします。"
    user: I am on page "https://xxxxxxxx.smoosy-xxxxxx.atlas.jp/mypage/password-issue?token…"
    user: I see "パスワードを入力してください"
    user: I fill field "#newPassword", "xxxxxxxx"
    user: I fill field "#confirmPassword", "xxxxxxxx"
    user: I click "登録"
    user: I see "新しいパスワードを設定しました"
    user: I am on page "https://xxxxxxxx.smoosy-xxxxxx.atlas.jp/mypage/login"
    user: I fill field "ログインID", "SZ990786"
    user: I fill field "パスワード", "xxxxxxx"
    user: I click "ログイン"
    user: I see "会員マイページ"
  ✔ OK in 34051ms


  OK  | 1 passed   // 36s
◉ Step-by-step preview: file:///tests/output/records.html

$ npx codeceptjs run sample_test.js --steps

CodeceptJS v2.3.6

Using test root "/tests"

サンプル試験 --

パスワード再発行

I have new mailbox

office: I am on page "https://xxxxxxxx.smoosy-xxxxxx.atlas.jp/secretariat/login"

office: I fill field "ログインID", "xxxxxxx"

office: I fill field "パスワード", "xxxxxxx"

office: I click "ログイン"

office: I wait for text "トップ画面"

office: I am on page "https://xxxxxxxx.smoosy-xxxxxx.atlas.jp/secretariat/members?type=INDIVIDUAL…"

office: I click "会員情報変更"

office: I fill field "emails.email_part[0]", "xxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx@mailslurp.com"

office: I click "確認"

office: I click "登録"

office: I see "会員情報を変更しました"

user: I am on page "https://xxxxxxxx.smoosy-xxxxxx.atlas.jp/mypage/password-issue"

user: I fill field "会員番号またはメールアドレス", "SZ990786"

user: I click "送信"

user: I see "メールを送信しました"

I wait for latest email 30

I see email is from "xxxxxxx@xxx.xxx"

I see in email subject "パスワード設定URLのお知らせ"

I see in email body "会員マイページのパスワード設定URLをお知らせいたします。"

user: I am on page "https://xxxxxxxx.smoosy-xxxxxx.atlas.jp/mypage/password-issue?token…"

user: I see "パスワードを入力してください"

user: I fill field "#newPassword", "xxxxxxxx"

user: I fill field "#confirmPassword", "xxxxxxxx"

user: I click "登録"

user: I see "新しいパスワードを設定しました"

user: I am on page "https://xxxxxxxx.smoosy-xxxxxx.atlas.jp/mypage/login"

user: I fill field "ログインID", "SZ990786"

user: I fill field "パスワード", "xxxxxxx"

user: I click "ログイン"

user: I see "会員マイページ"

✔ OK in 34051ms

OK | 1 passed // 36s

◉ Step-by-step preview: file:///tests/output/records.html

おわりに

メールの送受信、メール本文の参照を連携した機能のテストは自動化に手間がかかり大変ですが、MailSlurpなどのサービスを利用することで意外と簡単に実現でき、リグレッションの防止、システムの品質向上に役立ちます。
メール連携のE2Eテストを検討中の方は、是非お試しください。
今後も自動テストをはじめ、品質やサービス向上につながる試行錯誤は続けていきますので、またの機会にご紹介できればと思います。

2023/12/28 GitHub Copilotと爆速でGoogle Chrome拡張機能を作ってみた

カテゴリ

キーワード

メンバー