サイプレステストでの電子メールフローの処理＃frontend @ twiliosendgrid

公開: 2020-11-24

TwilioSendGridは多くのメールを送信します。 パスワードのリセットからアカウントのメール確認、CSVメールのエクスポートまで、すべてのトランザクションメールを送信するために、独自のバックエンドサービスを使用しています。

最近、3兆通を超えるメールが送信されたという大きなマイルストーンを通過しました。

私たちのテスト環境では、Gmailなどの実際のメール受信ボックスサービスプロバイダーにテストメールを送信しないように、セルフホストのSquirrelmailサーバーのテストメール受信ボックスにメールを送信します。 多くの重要なフローでは、ユーザーが自分の電子メールを確認し、実用的なリンクをクリックして、Webアプリケーションにリダイレクトし、ダウンロードまたは検証の成功ページに進む必要があります。

必要なフォームにSquirrelmailのメールアドレスを入力し、いくつかのボタンをクリックし、メールリンクをたどって期待どおりに機能することを検証することにより、これらの機能を手動でテストします。 新しいコードが変更されるたびにこれを実行して、どこにも回帰しないようにすることができますが、必要なときにいつでも再実行できるエンドツーエンド（E2E）テストでこれらの手順を自動化すると便利です。 具体的には、Cypressを使用してE2Eテストを作成したいので、これらの潜在的に遅くて混乱を招く可能性のある電子メールフローを毎回独自のWebブラウザーで手動でテストする必要はありません。

投稿に入る前に、最初に読むことに興味があるかもしれないいくつかの記事があります。

  • これまでにE2Eテストを作成したことがない場合、またはE2Eテストを作成する際の考え方を再確認したい場合は、開始する前にこのブログ投稿を参照してください。
  • 一般的なE2Eテストの作成にサイプレスを使用することに慣れていない場合は、Webアプリケーションへのサイプレステストの実装に関する1,000フィートの概要を確認することを強くお勧めします。これにより、サイプレスAPIの理解が深まります。

この投稿は、 cy.task()などのサイプレス関数のいくつかを知っていることを前提としています。ノードサーバーで定義した任意のコードを実行して、メールの処理を支援します。 また、TypeScriptを使用した後のコードスニペットが少し混乱している場合は、サイプレステストの入力方法に関するブログ投稿を参照してください。 タイプ定義を削除し、JavaScriptのみの構文に固執することで、独自のサイプレステストでコードを変更できます。

独自のテスト電子メール受信ボックスサーバー（Squirrelmailなど）を設定する方法については説明しませんが、電子メールの検索、一致する電子メールコンテンツの解析、および電子メールリンクの追跡に関連するこれらの手順の自動化に焦点を当てます。 これにより、テスト用の電子メール受信ボックスサーバーと接続する独自のクレデンシャルがある場合に、これらの電子メールフローを処理するために使用および実装する関数の種類をより正確に把握できるはずです。

サイプレステストでメールフローをどのように処理しますか？

メールフロー全体をテストするために、 cy.task()プラグインを次のように構築しました。

  • 特定の件名の電子メールの電子メール受信ボックスへの接続とフィルタリングに対処する
  • 一致するメールの本文の内容を取得する
  • SquirrelmailUIからログインせずにユーザーの受信トレイからメールを削除する

また、Squirrelmail UIを所有または制御しておらず、Squirrelmail UIのURLがデプロイされたフロントエンドアプリとは別のスーパードメインに存在するため、サイプレステストで複数のスーパードメインにアクセスすることはできないため、このルートを使用しました。

最初に「emailjs-imap-client」というライブラリをインストールして、いくつかの資格情報とホスト構成を介してSquirrelmail受信ボックスに接続するようにIMAPクライアントを設定できるようにしました。 このライブラリを使用して、Squirrelmailに関連するすべてのものをsquirrelmail.tsというモジュール内にカプセル化し、後でcy.task()関数定義用にplugins/index.tsにインポートします。

電子メールを含むテストを実行する前に、同じ件名のすべての電子メールを破棄して、前のテストでトリガーされた古い電子メールを誤って参照する際の誤検知を回避する必要があります。 このユースケースを処理するために、次のように、ユーザーの受信ボックス内の件名が一致するすべての電子メールを削除するこのタスクを実装しました。


テスト中に、ユーザーのSquirrelmail電子メールアドレスに電子メールが送信されるようにするアクションをトリガーし、多くの場合、一致する件名の電子メールがユーザーの電子メール受信ボックスに到着するのを待つ必要があります。 このプロセスは、バックエンドプロセスの関与度に応じて、数秒から数分かかります。 到着するまでポーリングするか、テストでタイムアウトエラーを提供して、メール送信部分で何かが機能していないか遅延していないかを通知する必要があります。 件名が一致する電子メールは事前に削除されているため、正常に返送された場合は、テスト実行からトリガーされたとほぼ確信できます。

「メールアクティビティのエクスポート」や「送信者の確認」などの特定の件名のメールがユーザーのメール受信ボックスに届くのを待つ機能を開発した方法は次のとおりです。

ここのところ：

  • ユーザーのメール受信ボックスをクリアしました
  • テストが実行され、ユーザーの電子メール受信ボックスに送信される電子メールがトリガーされます
  • メールがユーザーのメール受信ボックスに届くのを正常に待ちました

次に、その特定の電子メールの本文の内容を取得する必要があります。

ありがたいことに、一致する電子メールの本文の内容を文字列として返すことができます。この文字列は、後でアクションリンクを解析して、制御および所有するWebアプリに戻る必要があります。 以下のタスクプラグインは、ユーザーの受信ボックスを検索して、件名が一致する電子メールを探し、後で使用できるように本文の内容を返します。

簡単に言うと、Squirrelmailページのページオブジェクトを作成し、UIからSquirrelmailにアクセスし、一致する件名をフィルタリングし、メールを開き、実用的なリンクを直接クリックして、元の場所に戻ることはできません。同じサイプレステストで複数のスーパードメインにアクセスできないため、Webアプリ。 また、自分が管理または所有していないページやアプリケーションにアクセスすることは、アンチパターンです。

テストでトリガーした一致する電子メール本文のコンテンツを見つけたら、HTMLコンテンツを解析し、アクションリンクを見つけ、リンクへのHTTPリクエストをトリガーしてから、リダイレクトに従ってWebアプリケーションに戻る必要があります。

電子メールのHTMLコンテンツを解析し、アクションリンク部分を見つけるために、「cheerio」と呼ばれる別のライブラリを利用しました。このライブラリは、HTML文字列をロードし、jQueryのような関数を呼び出して必要なアクションボタンまたはリンクを抽出できるようにします。 リンクを解析したら、 cy.request()を使用してリンクにHTTPリクエストを送信し、リダイレクトリンクをたどって、1つのスーパードメインで制御および所有しているWebアプリに戻り、ページの成功状態の確認に進みます。にリダイレクトされます。

あなたの場合、リンクがすでに適切な場所を指している場合は、リンクへのHTTPリクエストをトリガーし、レスポンスのリダイレクトに従う必要がない場合があります。 リンクURLがすでにWebアプリを直接指している場合、リンクパスを抽出し、 cy.visit(linkPath)を実行してアプリにリダイレクトすることを妨げるものは何もありません。 Twilio SendGridリンクの場合、メールのリンクトラッキングがオンになっている場合、リンクは「…sendgrid.net？…」のようになり、リンクブランディングがオンになっている場合は「brandedlink.com」のようになります。 リンクの直接の「href」がWebアプリと一致しないため、HTTPリクエストを作成し、リダイレクトパスを抽出してcy.visit(redirectPath)を実行する必要があるのはそのためです。

以下は、cheerioを使用してリンクを検索し、リンクにHTTPリクエストを送信し、リダイレクトを追跡する例です。

結論

受信トレイ内の一致する電子メールを使用して、より多くの読み取りおよび削除アクションを実行するために実装した多くのcy.task()プラグイン関数について説明しました。 これらの関数は、Webページでこれらの電子メールフローをトリガーする前にユーザーの電子メール受信ボックスの状態を適切にリセットし、電子メールが受信ボックスに到着するのを待って、最後にリンクをたどって成功状態に戻るように作成しました。 サイプレステストの主な手順を以下に要約します。

  • cy.task(“teardownMatchingEmails”)による誤検知を回避するために、特定の件名のすべての電子メールを破棄します。
  • APIを介してユーザーにログインし、UIを介して一連の手順を実行して、ユーザーの電子メール受信ボックスに送信される電子メールを生成します。
  • ユーザーの電子メール受信ボックスをポーリングして、 cy.task(“awaitEmailInSquirrelmailInbox”)を介して一致する件名の電子メールを受信します。
  • cy.task(“squirrelmailSearchBySubject”)を使用して、件名が一致する電子メールの本文の内容を読み取ります。
  • メール本文のHTML文字列を渡し、jQueryのような構文で要素を検索することにより、cheerioライブラリとの適切なアクションリンクを解析します。
  • cy.request(“link”)を介して解析された電子メールリンクでHTTPリクエストを作成し、リダイレクト応答に従ってWebアプリに戻るか、リンクがcy.visit(“emailLinkToWebApp”)でスーパードメインとすでに一致している場合はパスにアクセスします。 cy.visit(“emailLinkToWebApp”) 。
  • 成功状態が発生することを確認するか、所有しているページでさらにUIステップをフォローアップします。

このブログ投稿が、最初から最後まで徹底的にテストを開始することをお勧めします。 以前はメールフローを使用してE2Eテストを作成することを避けていましたが、ありがたいことに、これらのサイプレステストを使用して、すべてを手動で回帰テストするために費やす時間を大幅に節約する方法を見つけました。 多くのステップが、所有または管理していないサードパーティのサービスに依存している場合や、ユーザーをリセットできない場合を除いて、フローの一部ではなく、ハッピーパスフロー全体を自動化してテストする方がはるかに価値があることを学びました。確実に特定の状態。

Webアプリケーションのサイプレステストの作成について学んだことに関連するブログ投稿に興味がある場合は、次の記事を確認してください。

  • E2Eテストを書くときに考慮すべきこと
  • サイプレステストの作成の1,000フィートの概要
  • TypeScriptサイプレステストのすべてのもの
  • サイプレステストを構成、整理、統合するためのアイデア
  • サイプレステストとDocker、Buildkite、およびCICDの統合