Playwright で Gmail メールを読む方法

こんにちは、みんな！

自動テストで電子メールを読むことは、多くのプロジェクトでその方法を知っておく必要があるかもしれないテクニックです。その理由と対処法をご紹介します…

何でこれが大切ですか？

システムが電子メールを送信する場合、電子メールが送信されていること、およびクリック可能なリンクを含むコンテンツが正しいことを確認する必要があるかもしれません。

したがって、これが必要な場合の通常のシナリオは次のとおりです。

1. サインアップ。

   多くのプラットフォームでは、アカウントを作成すると確認メールが送信され、メールにある確認リンクをクリックする必要があります。

   
   

2. 請求書。

   アプリで支払いを行う場合、通常は小切手または請求書が電子メールで送信されるため、その内容が正しいかどうかも確認する必要があるかもしれません。

   
   

3. 結果。

   健康診断の結果とか。私の経験では、一部の病院では、検査が完了すると、その結果を電子メールで送信します（または、少なくともレポートを表示できる個人ページへのリンクを送信します）。

   
   

4. …

もちろん、これが完全なリストではありません。これらは、私がこれまでのキャリアの中で最も多く遭遇したユースケースにすぎません。

これらのシナリオを検証しないと、ユーザーが電子メールを受信できなかったり、電子メールに誤った情報が含まれたりする可能性があります。プロジェクトの 1 つでは、期限切れのSendGrindトークンを早期に発見するのに役立ちました。

テストで電子メールを読むと何が面倒ですか?

メールを読むのは難しいことですが、不可能ではありません。

初期の電子メール クライアントはPOP3 を使用してサーバーから電子メールを取得していましたが、小さな問題があります。それは、電子メールがダウンロードされるとサーバーから削除されてしまうということです。

その後、 IMAPプロトコルが登場し、サーバーから電子メールを簡単に読むことができるようになりました。

問題は -一部のサービスではこれらのプロトコルを禁止していますまたは身元を確認させます初めて接続するとき (自動テストを再開するときなど)。

一方、 Gmailなどの一部のサービスは、電子メールを操作するためのREST APIを提供していますが、別の問題があります。ドキュメントとそのライブラリは、実際にはそれほどユーザーフレンドリーではありません (特に、電子メールのテストをあまりしない人にとっては)。

ここでgmail-getter が登場します。このnpmライブラリを使用すると、メールを読んだり、 Playwrightなどのブラウザ自動化ツールを使用している場合はブラウザで開くこともできます。

Gmail-Getter を使用して Gmail メールを読む

まず最初に、プロジェクトにパッケージをインストールする必要があります。

 npm install gmail-getter

Google Cloud Console プロジェクトを作成し、認証情報を取得する

Gmail API にログインするには、クライアント ID 、クライアント シークレット、およびリフレッシュ トークンの認証情報を取得する必要があります。これらの資格情報を使用すると、アクセス トークンを取得できます。アクセス トークンは、その後のリクエスト (電子メールのリストや 1 つの電子メールの取得など) で必要になります。

進むべき手順:

1. Google Cloud Consoleでプロジェクトを作成します。

   
   

2. [API とサービス]セクションでOAuth 認証情報を作成し (自動テストに必要な場合は、デスクトップアプリを選択してください)、それをダウンロードします。

   
   

3. Gmail APIを有効にします。

   
   

4. リフレッシュトークンを取得します。

リフレッシュ トークンを取得するには、プロジェクト ルートでコマンドを実行するだけです。

 npx gmail-getter get-refresh-token

(またはパッケージをグローバルにインストールしている場合は他の場所)

 get-refresh-token

コマンドを実行する場所にcredentials.jsonファイルを配置する必要があります。

⚠️認証情報ファイル名では大文字と小文字が区別されます⚠️

アクセストークンの取得

構成が完了したら、自動テストでアクセス トークンを取得する必要があります。これに最適な場所は、グローバル セットアップ (テスト実行の開始前に実行される関数) だと思います。

したがって、次のようになります。

 import {getToken} from 'gmail-getter' export default async function globalSetup() { process.env['ACCESS_TOKEN'] = await getToken( process.env.CLIENT_ID!, process.env.CLIENT_SECRET!, process.env.REFRESH_TOKEN! ) }

上記の例では環境変数を使用していますが、これにはdotenvパッケージもインストールする必要があります。

ただし、物事をシンプルにしたい場合は、トークンにアクセスできるようにする必要がある場所ならどこでもこのスニペットを使用できます。

 const accessToken = await getToken( '<put-your-client-id-here>', '<put-your-client-secret-here>', '<put-your-refresh-token-here>' )

メールを受信する

現在、 Gmail の REST API は独自のクエリ言語を使用して、必要なメールを検索します。

 const email = await checkInbox(accessToken!, 15000, 1500, 'from:squier7 subject:Test!')

上記のコマンドは電子メール オブジェクトを返しますが、そのコンテンツまたはリンクを取得する必要があります。置換from:squier7 subject:Test!上のリンクの構文に従って独自のクエリを作成します ☝️

正規表現を使用してリンクを解析できます。

 const link = parseLinkFromHtml(email!, /(https:\/\/)(\S*)(gmail-getter)([\w\/\?\=\-]*)/im)

/(https:\/\/)(\S*)(gmail-getter)([\w\/\?\=\-]*)/im独自の正規表現に置き換えます ☝️

または、電子メールの HTML コンテンツ全体を取得し、ブラウザーでレンダリングします。

 import {getToken, parseHtml} from 'gmail-getter' import {test} from '@playwright/test' test('Render an email', async ({page}) => { const accessToken = await getToken( '<put-your-client-id-here>', '<put-your-client-secret-here>', '<put-your-refresh-token-here>' ) const email = await checkInbox(accessToken!, 15000, 1500, 'from:squier7 subject:Test!') // get an email const html = parseHtml(email!) // parse HTML from the email await page.setContent(html) // render the email in the browser })

全体

自動テストで電子メールを扱うのが難しいことは、もう明らかだと思います。しかし、これらのトリックを知っていると、作業がはるかに簡単になります。

まだ他の電子メール サービスを使用したり、 IMAP を試したりすることもできますが、 Gmail-getterが提供するような独自のヘルパーを作成する必要があるため、このガイドに記載されているほど簡単ではないことは保証します。ここ。

Playwright のサンプルはGitHubにあります。ヒノキの例も。