ShopifyのストアフロントのワンタイムパスワードログインをE2Eテストできるか試してみた

こんにちは。
ディレクターの田辺です。

Shopifyのストアフロントにおいて、ワンタイムパスワードログイン方式がされている時、ログインプロセスをストレートにE2Eテストで突破できるか考えてみました。

結論から言うと、本記事で紹介する方法では突破できません。

しかし、途中まではうまくいきましたので備忘録としてまとめておきます。

前提

• Shopifyのお客様アカウント方式として「新しいお客様アカウント」を採用する。つまり、ログインにワンタイムパスワードを利用する。
• Gmail、Workspace Flows、スプレッドシート、AppSheetといった、Googleのプロダクトを利用してワンタイムパスワードを提供するAPIを構築する。
• E2Eテストは、Playwright MCPを利用してCursorにて作成する。

想定していたテスト手順

1. Playwrightで、開発ストアにアクセス
2. ストアパスワードを入力し、ストアにアクセス
3. ログイン画面に遷移
4. メールアドレスを入力
5. ワンタイムパスワード提供APIから、ワンタイムパスワードを取得
6. ワンタイムパスワードを入力し、ログインする

達成できたこと / 失敗したこと

1つ1つの手順がPlaywrightでうまく自動化できることは確認できましたが、PlaywrightでChromeを起動してテストを行うと、ログイン画面のhCaptchaに阻まれてしまい、ワンタイムパスワードの送信を行うことができませんでした。

付録: ワンタイムパスワードを提供するAPIの作り方と使い方

Shopifyに限らず、メールアドレス宛にワンタイムパスワードが届くログイン方式を採用している場合に、もしかしたら役立つことがあるかもしれませんので、ワンタイムパスワードを提供するAPIの作り方をまとめておきます。

紹介する方法はほぼノーコードで実現できますので、非エンジニアの方でも挑戦できます。

1. Gmailの準備

まず、gmailを準備します。ワンタイムパスワードの受信用に利用します。

2. Google Workspace Flowsの設定

Googleが提供しているノーコードワークフローツールです。
まだ、アルファ版ですが、非常に便利です。
クラスメソッドさんの紹介記事が詳しく説明されているのでおすすめです。

今回は下記のように設定しました。

1. Starter

① StarterにWhen I get an emailを選択
② All emailsではなく、Specific emailsを選択
③ Shopifyのワンタイムパスワードはストアごとに固定のメールアドレスから送信されるのでそのメールアドレスを、Fromに指定し、ワンタイムパスワードのメールのみを扱うようにする

2. Actions 1

④ ActionとしてExtractを選択
⑤ 抽出条件として、メール本文から下記の条件で6桁のコードを取得

This e-mail has one time password for Shopify. Extract only the authorization code from the content, which is 6 numeric characters in the below of the text "認証コード：".

⑥ 以降のActionで抽出したコードを利用するため変数名を指定。Descriptionは今回の場合、不要ですが、念のため6桁の数字を抽出するよう指定
Custom content name = shopify_otp
Description for Gemini = The 6-digit numeric authorization code for Shopify.

なお、Shopifyから届くワンタイムパスワードの文面は下記になります。

Actions 2

⑦ Actionとして スプレッドシートの Add a rowを選択
⑧ スプレッドシートを作成しておいてその情報を入力
⑨ Extractアクションで抽出された認証コードを設定

スプレッドシートの内容は下記のような簡易なものです。

ワンタイムパスワードがGmailに届くたびに、上記のシートのA2セルに追加されていきます。(A2セルが最新のワンタイムパスワード)

3. AppSheetを準備

上記のスプレッドシートの「拡張機能 > AppSheet > アプリを作成」からAppSheetアプリを作成します。
と言っても、このスプレッドシートがデータソースであるAppSheetアプリが作成できればそれで十分なので、あとは、AppSheetでAPIを利用できるようにするだけです。

Settings > Integrations にアクセスすると、APIの有効化ができます。
① のApp Idをメモしてください。
② のEnableをオンにしてください。
③ Create Application Access KeyをクリックしてAccess Keyを作成し、メモしてください。

4. PlaywrightからAppSheetのAPIをfetchする

Playwright MCPを利用しているのであれば、下記のようなプロンプトを書くだけで、fetchしてワンタイムパスワードを取得してくれます。

https://www.appsheet.com/api/v2/apps/{app_id}/tables/otp/Action に下記の条件でfetchしてください。
 - HTTPメソッドは、POSTとする。
 - Request Headerに、"ApplicationAccessKey"として"{access_key}"を指定する。
 - Request Bodyに、下記のJSONを設定する。
 {
  "Action": "Find",
  "Properties": {
    "Selector": "TOP(FILTER(otp, ISNOTBLANK(0)),1)"
  }
}
 - ResponseのJSONデータからotpを取り出す。

{app_id}、{access_key}には、AppSheetからコピーした値を入力してください。

以上で、ワンタイムパスワードを取得できます。

まとめ

今回はhCaptchaに阻まれてしまい、Playwrightによる「ワンタイムパスワードを利用しているShopifyストアへの自動ログイン」という目標は達成できませんでしたが、

• Google Workspace FlowsやPlaywright MCPなどAIツールの利用
• GoogleのプロダクトだけでのAPIの構築
• ワンタイムパスワードを突破するハック的な動きの検証

などができたのは収穫でした。
特に、ノーコードでここまでのことができるAIツールの進歩には目を見張るばかりです。

最後に、元も子もないことを言えば、Shopifyのことですから、いずれ、ワンタイムパスワードやhCaptchaなどE2Eテストを実施する上でハードルになる要素を解消するもっとスマートな方法を提供してくれるかもしれません。

それでは。