Browser Walkthrough - bianchiidentity/isucon12 GitHub Wiki
管理者で団体を作り、主催者が大会を運営し、参加者が結果を見る。 実際のブラウザE2Eで撮影した画面を、操作順に8枚へまとめました。
- 実行結果：全8ステップPASS。シナリオ5.9秒（ランナー込み6.6秒）。
- 撮影：2026-10-11 14:57 JST。稼働版
95e0cd6、専用テナントe2e-mv3evqwy。 - E2Eコードと実行手順 · 追加PR #33
- スライドHTMLをダウンロード（手元のブラウザで開き、左右キーで移動）
管理者が団体を作り、主催者が大会を運営し、参加者が結果を読む。
テナントとはサービスを利用する団体。追加した団体は専用ホストで開く。
選手IDはログインとCSVで使う。選手一覧は参加資格を管理する画面でもある。
作成 → CSV入稿 → 終了。この順に大会の状態を進める。
3行を受け付け、2人の結果になる。同点なら、採用された行番号が早い順。
大会一覧 → ランキング → 選手名。選手ごとの大会と得点を確認する。
登録選手2人と、閲覧だけの1人。選手本人の閲覧も、繰り返し閲覧も二重に数えない。
選手の参加資格を変更する操作。既存の得点を削除する操作とは別。
ホストPCから練習サーバーへの443番ポートフォワードを起動した状態で実行します。 Google ChromeとNode.jsが必要です。新規テナントの名前解決と証明書エラーの許容は、テスト用Chrome内だけに設定します。
cd e2e
npm ci
E2E_SLOW_MO=150 npm run test:headed速く確認するなら npm test。手順ごとの画像と結果を見るなら npm run report。
| 操作 | 確認すること |
|---|---|
| 管理者でテナント作成 | 作成した団体へログインできる |
| 主催者で選手・大会を追加 | 空の一覧と追加後の一覧が表示される。UUIDでも画面遷移できる |
| CSVでスコア登録 | 入力3行を受け付け、ランキング・個人戦績へ反映される |
| 同じ選手を複数行含むCSV | 最後の行の得点を採用する。最高点とは限らない |
| 同点の選手を登録 | 採用されたCSV行の番号が早い選手から並ぶ |
| CSVを再登録 | 古い結果が置き換わる。ヘッダーだけなら結果と個人戦績が空になる |
| 不正なCSVを登録 | 400になり、登録済みの結果は変わらない。不正な先行行も見逃さない |
| ランキングを繰り返し閲覧 | 閲覧だけの参加者も、スコア登録済みの参加者も二重課金しない |
| 大会を終了して請求確認 | 開催中0円、終了後210円。SaaS管理者の一覧とも一致する |
| 選手を失格にする | 本人の大会一覧・ランキング・個人戦績APIが403になる |
画面に出ない入力行数や403は、その画面操作が発生させた通信応答でも確認しています。
「空CSV」は player_id,score のヘッダーだけがあるファイルを指します。
新規テナントの選手一覧が players:null を返し、画面側の map が例外になって真っ白になる問題を検出しました。
「プレイヤー追加」ボタンまで消えるため、ブラウザだけでは最初の選手を作成できませんでした。
PR #32で空配列 [] を返すように修正し、サーバー反映後に全手順がPASSしています。
毎回専用の e2e-... テナントを作成します。既存テナントは操作しません。
削除APIがないため、作成データは残し、次回の通常のベンチ初期化で削除されます。
ベンチと同時実行しないでください。 E2E自体は初期化・ベンチ・サービス再起動を行いません。
画面PNG・HTMLレポート・失敗時traceは .e2e-artifacts/ に保存され、gitignore対象です。
公開画像はGitHub Releaseの添付ファイルなので、アプリのclone/pullでは取得されません。
認証情報を含み得るtraceやHTMLレポートは公開しません。
負荷・並行更新・初期化の30秒制限は別途ベンチで確認します。
