情報システム室の進地＠日比谷です。

PlaywrightでE2Eテストを行うときに、SaaSのMFAを通す必要がありました。本エントリーではOTP（ワンタイムパスワード） MFAをPlaywrightで通す方法について記述します。

必要なモジュールのインストール

Playwrightのプロジェクトルートディレクトリで totp-generator モジュールをインストールします。

$ npm i totp-generator

また、対象のOTP generatorのシークレットキーを環境変数で渡したいので、dotenvモジュールもインストールします。

$ npm i dotenv

OTP generatorのシークレットキーの取得（Google Authenticator使用）

Google Authenticatorを使っている場合、次の手順でシークレットキーを取得できます。

1. Google Authenticatorのメニュー => [アカウントを移行] から取得したいOTP generator アカウントを選択して、QRコードをエクスポート
2. 1でエクスポートしたQRコードをQRコードリーダで読み取り、次のようなURIを得る。
   a. otpauth-migration://offline?data=CjEKCkhlbGxvId6tvu8SGEV4YW1wbGU6YWxpY2VAZ29vZ2xlLmNvbRoHRXhhbXBsZTAC
3. otpauth ツールに2-aで得たURIを渡して、シークレットキーを取得する。
   a. ~/go/bin/otpauth -link "otpauth-migration://offline?data=CjEKCkhlbGxvId6tvu8SGEV4YW1wbGU6YWxpY2VAZ29vZ2xlLmNvbRoHRXhhbXBsZTAC"
   b. 3-aの結果は次のようになる。 otpauth://totp/Example:[email protected]?issuer=Example&secret=JBSWY3DPEHPK3PXP このsecret=の後の値がシークレットキーになる

Playwrightのテストシナリオを記述する

.envファイルに取得したシークレットキーを

MFA_SECRET_KEY=JBSWY3DPEHPK3PXP

のように設定する。

その上で、テストシナリオをたとえば、 tests/sample.spec.ts に次のように記述する。

  import 'dotenv/config';
  import { TOTP } from "totp-generator";
  import { test, expect } from '@playwright/test';

  test.beforeEach(async ({ page }) => {
    // MFAを通す処理を記述
    const { otp } = await TOTP.generate(
      process.env.MFA_SECRET_KEY
    );
    // otpにワンタイムパスワードが入っているので画面に入力する
    await page.locator("#some-input").fill(otp);
    // 以後、フォームを送信したり必要な処理をする
  }