テストしづらいWebのためのレシピ集

このサイトについて

Playwright のようなモダンなテストフレームワークは、ボタンをクリックしてテキストをアサートすることに関しては優秀です。しかし実際のアプリケーションはそれ以上のことをします: マイクを聴き、フリックでパンする地図を描画し、アサーションが走る前に消えてしまうトーストを表示し、パスキーで認証します。

ここにあるレシピはすべてユースケースから始まります —「音声入力をテストしたい」「メールが送信されたことを検証したい」— そしてなぜ難しいのかを説明し、動くコードを提供します。

メディアとデバイス

マイクとカメラの入力をモックし、WebRTC通話をテストし、音が実際に鳴っていることをアサートします。

複雑なUI

慣性パンのある地図、canvasのチャート、消えていくトースト、IMEの変換入力 — DOMの言葉を話さないUIたち。

認証とアイデンティティ

仮想認証器によるパスキー / WebAuthn、スマホなしで突破するTOTP二要素ログイン。

ブラウザの外側

メール、PDF、クリップボード — ページの外へ出ていくユーザージャーニーの断片。

戦略とメンテナンス

フレーキーテストの自動修復、E2Eから単体テストへの移行、ユースケースカバレッジの計測。

ユースケース駆動

フレームワークの機能紹介ではありません。どのレシピも、検索できる具体的な問題を1つ解決します。

あなたのプロダクトでも動かしたい?

これらのレシピは実際のコンサルティングの現場から生まれました:「テストできない」と言われたUIやパイプラインを、テストできるようにする仕事です。あなたのチームがこうした問題 — あるいはもっと奇妙な問題 — で行き詰まっているなら、untestable.dev でコンサルティングと業務委託をお受けしています。

まずは注目レシピから

マイク入力をモックするChromium・Firefox・WebKitで、実際の音声ファイルを getUserMedia() に流し込みます。

慣性パンのある地図UIをテストするピクセルベースの閉ループ制御で、地図を正確なピクセル距離だけパンします。

トーストとちらつきを捕まえるアサーションより速く現れて消えるUIをアサートします。