テスト自動化の実験場へようこそ!
ここはPlaywrightなどの自動化ツールを安全かつ実践的に試すためのサンドボックス環境です。
本サイトについて
セキュリティに関する注意事項
実験用のサイトであり、実運用を想定していません。
バックエンドやDBは存在しないので、入力されたデータが外部に送信されることはありません。
しかし、セキュリティ上、実際の個人情報や重要なパスワード等の入力は避けてください。技術スタック
Nuxt 4 + Tailwind CSS + Cloudflare Pages を使用してホストされています。
自動テストの練習ガイド(サイトの簡易仕様)
当サイトでは、LocalStorageをセッション&カートとして連動させており、E2Eテストでよく遭遇する以下の主要なUI操作や状態遷移のテストを練習できます。
シナリオ 1ユーザー登録とセッション検証
登録画面の入力値が確認画面に不整合なく引き継がれ、完了後にマイページへ自動遷移・ログイン状態になるかを検証します。
シナリオ 2カート操作とリアルタイム金額計算
商品詳細の数量セレクトボックス操作、およびカート画面での数量変更時に「単価×数量」の合計金額計算が即座に連動するかを検証します。
シナリオ 3ログイン情報の自動補完(Pre-fill)
あらかじめログインした状態でレジ(チェックアウト)に進んだ際、登録されている会員情報(姓名・住所など)がフォーム初期値に自動展開されるかを検証します。
テスト用登録済みアカウント
重複エラーの検証や、ログイン状態のテスト(Storage Stateのモックなど)に使用できる、定義済みの検証用アカウントです。
名前メールアドレスパスワードテスト太郎test01@example.compassword123テスト次郎test02@example.compassword123テスト花子test03@example.compassword123テスト美咲test04@example.compassword123※メールアドレス・パスワード部分はトリプルクリック等で選択(`select-all`)してコピー可能です。
ローカルストレージのクリア
ログインセッションやカート情報はブラウザの LocalStorage に保存されます。
テストケースの実行前後など、必要に応じて以下のボタンから初期化を行ってください。ライセンスについて
当サイトのソースコード、および付随する検証用アセット類は **MITライセンス** に基づいて公開されています。テスト自動化の学習、社内勉強会、記事執筆のソース等に、規約の範囲内で自由に複製・改変・利用いただけます。
VRT / UI テスト用サンドボックス
※ VRT:ビジュアルリグレッションテスト
📸 スクロール検証 (VRT)
min-h-[200vh]の縦長画面。フルスクリーンのキャプチャ結合や、固定要素の重なりを検証します。
⏱️ ネットワーク遅延・非同期描画
アクセスから3秒後にデータが描画されるUI。Playwrightの自動待機やFlakyテスト対策の練習用。
⚠️ 動的・不安定要素 (Flaky)
リロード3回に1回、表示や色が変わる罠ページ。Playwrightのmaskオプション等の検証に。
💬 モーダル・最前面要素
Vue Teleportでマウントされるオーバーレイ。ダイアログ上のロケーター捕捉や操作テスト用。