パスキーの自動テストはどこまでいけるのか

このスライドはフロントエンドカンファレンス関西2026 の登壇に使用したスライドのアーカイブになります。

チームラボでは、フロントエンドエンジニアを募集しています。
少しでも、チームラボにご興味をお持ち頂けましたら、採用ページをご覧頂けますと幸いです。
https://www.team-lab.com/recruit/

Transcript

1. フロントエンドカンファレンス関西 2026 パスキーの自動テストは どこまでいけるのか 志田 洋斗 チームラボ パッケージチーム 所属 © teamLab Inc.
2. 自己紹介 Shida Hiroto 志田 洋斗 所属｜ チームラボ パッケージチーム フロントエンド班 モアイが好き フロントエンドカンファレンス北海道2025でも パスキーの話をしました 意外と簡単！？フロントエンドでパスキー認証を実 現する WebAuthn © teamLab Inc. 2
3. パスキーとは © teamLab Inc. 3
4. パスキーとは パスワードの代わりに、指紋や顔等でかんたん・安全にログインできる仕組み ・指紋・顔・PIN等で本人確認 ・端末の認証器が本人確認とブラウザへの応答を担う ・ブラウザは WebAuthn を通じて認証器とやりとりする ※ WebAuthn: Webサイトがパスキーの作成・認証に使うWeb API © teamLab Inc. 4
5. 認証器とは （公開鍵暗号方式を用いた） 認証情報を生成・管理し、署名を行うハード/ソフトウェア ・スマホやPCに備わっている（外付けのセキュリティキーなどもある） ・指紋・顔・PINを用いて、ユーザの本人確認を行ない鍵を生成する © teamLab Inc. 5
6. パスキー登録の流れ ユーザ 認証器 ブラウザ サーバ パスキー作成開始 登録に必要な情報 WebAuthn navigator.credentials.create() 端末でユーザ検証 （指紋/顔/PIN） 鍵生成して 結果を送信 応答を検証し 公開鍵など保存 パスキー登録完了 ユーザ 認証器 ブラウザ © teamLab Inc. サーバ 6
7. パスキー登録の流れ ユーザ 認証器 ブラウザ サーバ パスキー作成開始 登録に必要な情報 WebAuthn navigator.credentials.create() 端末でユーザ検証 （指紋/顔/PIN） 鍵生成して 結果を送信 応答を検証し 公開鍵など保存 指紋や顔認証が必要なのに どうやって自動テストするの...？ パスキー登録完了 ユーザ 認証器 ブラウザ © teamLab Inc. サーバ 7
8. Playwright の新機能 © teamLab Inc. 8
9. Playwright 1.61 の新機能「仮想認証器 (BrowserContext.credentials)」（2026/06/15〜） Playwright がページの WebAuthn の呼び出しに応答し、 実際の認証器を使わずに、パスキーの登録・認証フローをテストできる ブラウザ (アプリケーション) 端末側の 実際の認証器 WebAuthn でやりとり Playwright の 仮想認証器 © teamLab Inc. 9
10. CDP (Chromium DevTools Protocol) の 仮想認証器 以前から Chromium 限定ではあるが WebAuthn の仮想認証器を使うことはできた WebAuthn タブから仮想認証器を 使うことも可能 Playwright の CDPSession を用いて 同様に仮想認証器を使うことも可能 © teamLab Inc. 10
11. Playwright のパスキーの自動テストコード例 test('パスキーを登録してログインできる', async ({ page, context }) => { await context.credentials.install(); // 仮想認証器を有効化 await page.goto('https://*****.com/passkey/register'); await page.getByRole('button', { name: 'パスキーの作成をする' }).click(); await expect(page.getByRole('list', { name: 'パスキー一覧' })) .toContainText('登録したパスキー名'); await page.getByRole('button', { name: 'ログアウト' }).click(); await page.goto('https://*****.com/login'); await page.getByRole('button', { name: 'パスキーでログイン' }).click(); await expect(page.getByRole('button', { name: 'ログアウト' })) .toBeVisible(); }); © teamLab Inc. 11
12. Playwright 対応ブラウザでパスキーの自動テストが可能に！ Playwright 1.61〜 を使うことで より楽に、より多くの環境（Playwright の Chromium / Firefox / WebKit） でパスキーの自動テストが可能になって便利！ © teamLab Inc. 12
13. つまりどうなる？ 一連の流れが、全て playwright のテストコードで実行可能に！ ユーザ 認証器 ブラウザ サーバ Playwright パスキー作成開始 仮想認証器 ブラウザ パスキー作成開始 登録に必要な情報 登録に必要な情報 WebAuthn navigator.credentials.create() WebAuthn navigator.credentials.create() 端末でユーザ検証 （指紋/顔/PIN） 実認証器のように 鍵生成して 結果を送信 鍵生成して 結果を送信 応答を検証し 公開鍵など保存 応答を検証し 公開鍵など保存 パスキー登録完了 ユーザ 認証器 サーバ パスキー登録完了 ブラウザ サーバ Playwright © teamLab Inc. 仮想認証器 ブラウザ サーバ 13
14. パスキーは自動テストできる！ © teamLab Inc. 14
15. めでたしめでたし © teamLab Inc.
16. めでたしめでたし ではなく！ © teamLab Inc.
17. パスキーの自動テストは どこまでいけるのか © teamLab Inc.
18. たしかに自動テストはできる ・パスキーが一覧に表示されない Playwright ・登録したパスキーでログインできない 仮想認証器 ブラウザ サーバ パスキー作成開始 登録に必要な情報 ・認証後もログイン済み状態にならない WebAuthn navigator.credentials.create() といった不具合は検知できる ただ、認証器の実挙動を 担保してるわけではない 実認証器のように 鍵生成して 結果を送信 応答を検証し 公開鍵など保存 パスキー登録完了 Playwright © teamLab Inc. 仮想認証器 ブラウザ サーバ 18
19. 実際の認証器依存の挙動は担保できない ・正常に WebAuthn が動作しない・サポートされてない端末での動作テスト ・Face ID、Touch ID、Windows Hello、PIN、セキュリティキー、 クロスデバイス認証など様々な認証方法 ・OSやブラウザの権限・設定による差異 自動テストでできる範囲外の要因が多いので、 （要件やSLAによるが）実機のテストはしっかりしよう © teamLab Inc. 19
20. まとめ パスワードの代わりに、指紋や顔等でかんたん・安全にログインできる仕組み Playwright 1.61 から複数の環境で動作する仮想認証器を動作させることができる ようになり、パスキーの自動テストに対応した 実認証器でしか確認できない挙動は自動テストで担保できず、別途テストが必要 © teamLab Inc. 20
21. （今度こそ）めでたしめでたし 志田 洋斗 フロントエンドカンファレンス関西 2026 パスキーの自動テストはどこまでいけるのか チームラボ パッケージチーム 所属 © teamLab Inc.
22. We’re Hiring! 一緒にものづくりできるメンバー募集してます！ © teamLab Inc
23. 参考文献 chrome for developers:「WebAuthn: 認証システムをエミュレートする」 Playwright: Credentials Playwright: CDPSession © teamLab Inc.