e2e-test-by-browser-use

name	e2e-test-by-browser-use
description	ブラウザ操作機能を使用してアプリケーションの基本的な機能をclineがテストできる。

e2e-test-by-browser-use

このスキルは、ワリカンさん（Split Bill Calculator on Nostr）のスタンドアロンモードの基本機能をブラウザ操作でE2Eテストするための手順を提供します。

Usage

スタンドアロンモードの割り勘計算機能が正しく動作することを確認したい場合に使用します。以下のシナリオをテストします：

• 複数メンバーの登録
• 複数の支出記録
• 精算結果の計算が正しいこと
• 通貨切り替え機能
• データのリセット機能

Prerequisites

• アプリケーションが http://localhost:3000 で起動していること
• ブラウザ操作ツール（browser-use等）が利用可能であること

Important Notes

問題発生時の対応

テスト中に問題が発生した場合は、以下を実施してください：

1. スクリーンショットを取得する

   • ブラウザの現在の状態を確認するため、スクリーンショットを保存
   • 問題の原因を特定するのに役立ちます

2. コンソールログを確認する

   • ブラウザのコンソールにエラーメッセージが表示されていないか確認
   • エラーメッセージは問題の原因を特定する重要な手がかりです

3. 期待される動作と実際の動作を比較する

   • 各ステップの「検証ポイント」と実際の表示を照らし合わせる
   • 差異がある場合は、その内容を記録する

Test Scenario

シナリオ概要

3人のメンバー（Alice、Bob、Carol）で旅行に行き、以下の支出を記録して精算する：

1. Alice が宿泊費 30,000円を支払い
2. Bob が食事代 9,000円を支払い
3. Carol が交通費 6,000円を支払い

期待される精算結果：

• 合計金額: 45,000円
• 1人あたり: 15,000円
• 精算内容:
  • Bob → Alice: 6,000円
  • Carol → Alice: 9,000円

Steps

1. アプリケーションの起動

開発サーバーを起動します：

起動スクリプトを使用することができます（ポートチェックと依存関係インストールを自動化）：

.cline/skills/e2e-test-by-browser-use/start-app.sh

注意: スクリプトを使用する場合は、バックグラウンドで実行するか、別のターミナルで実行してください。

開発サーバーが起動したら、ブラウザで http://localhost:3000 にアクセスし、アプリケーションが表示されることを確認します。

問題が発生した場合:

• スクリーンショットを取得して現在の状態を確認
• ブラウザのコンソールログをチェック
• ポートが既に使用されている場合は、実行中のプロセスを停止してください

2. スタンドアロンモードの選択

1. ページ上部の「スタンドアロン」ボタンが選択されていることを確認
2. 「ワリカンさん」というタイトルが表示されていることを確認
3. 「グループでの支払いを簡単に精算」というサブタイトルが表示されていることを確認

3. メンバーの追加（3人）

3.1 Alice を追加

1. 「メンバー」セクションの「メンバーを追加」ボタンをクリック
2. 名前入力フィールドに「Alice」と入力
3. 「追加」ボタンをクリック
4. メンバーリストに「Alice」が表示されることを確認

3.2 Bob を追加

1. 「メンバーを追加」ボタンをクリック
2. 名前入力フィールドに「Bob」と入力
3. 「追加」ボタンをクリック
4. メンバーリストに「Bob」が表示されることを確認

3.3 Carol を追加

1. 「メンバーを追加」ボタンをクリック
2. 名前入力フィールドに「Carol」と入力
3. 「追加」ボタンをクリック
4. メンバーリストに「Carol」が表示されることを確認

検証ポイント：

• メンバーリストに3人（Alice、Bob、Carol）が表示されている
• 各メンバーの支払い合計が「¥0」と表示されている

4. 支出の記録（3件）

4.1 Alice の宿泊費を記録

1. 「支出を追加」セクションで、支払者ドロップダウンから「Alice」を選択
2. 金額フィールドに「30000」と入力
3. メモフィールドに「宿泊費」と入力（オプション）
4. 「追加」ボタンをクリック
5. 支出リストに「Alice - ¥30,000 (宿泊費)」が表示されることを確認

4.2 Bob の食事代を記録

1. 支払者ドロップダウンから「Bob」を選択
2. 金額フィールドに「9000」と入力
3. メモフィールドに「食事代」と入力（オプション）
4. 「追加」ボタンをクリック
5. 支出リストに「Bob - ¥9,000 (食事代)」が表示されることを確認

4.3 Carol の交通費を記録

1. 支払者ドロップダウンから「Carol」を選択
2. 金額フィールドに「6000」と入力
3. メモフィールドに「交通費」と入力（オプション）
4. 「追加」ボタンをクリック
5. 支出リストに「Carol - ¥6,000 (交通費)」が表示されることを確認

検証ポイント：

• 支出リストに3件の支出が表示されている
• メンバーリストの各メンバーの支払い合計が更新されている
  • Alice: ¥30,000
  • Bob: ¥9,000
  • Carol: ¥6,000

5. 精算結果の確認

5.1 合計金額と1人あたりの確認

1. 「合計金額」が「¥45,000」と表示されていることを確認
2. 「1人あたり」が「¥15,000」と表示されていることを確認

5.2 精算内容の確認

「精算」セクションで以下の精算内容が表示されていることを確認：

1. Bob → Alice: ¥6,000

   • Bob が Alice に 6,000円 支払う
   • 理由: Bob は 9,000円支払ったが、負担額は15,000円なので 6,000円不足

2. Carol → Alice: ¥9,000

   • Carol が Alice に 9,000円 支払う
   • 理由: Carol は 6,000円支払ったが、負担額は15,000円なので 9,000円不足

検証ポイント：

• 精算リストに2件の精算が表示されている
• 各精算の金額が正しい
• Alice は受け取る側（30,000円支払い、15,000円負担なので15,000円多く支払っている）
• Bob と Carol は支払う側

6. 通貨切り替え機能のテスト

6.1 USD に切り替え

1. ページ下部の通貨切り替えボタン（「JPY」と表示）をクリック
2. 「USD」を選択
3. すべての金額表示が USD に変換されることを確認
   • 合計金額、1人あたり、精算額がドル表示になる
   • Bitcoin価格が表示されている場合、USD価格が表示される

6.2 JPY に戻す

1. 通貨切り替えボタン（「USD」と表示）をクリック
2. 「JPY」を選択
3. すべての金額表示が JPY に戻ることを確認

検証ポイント：

• 通貨切り替えが正しく動作する
• 金額の計算結果は変わらない（表示形式のみ変更）

7. 精算の支払い済みマーク機能のテスト

1. 精算リスト内の「Bob → Alice: ¥6,000」の行にあるチェックボックスをクリック
2. その精算が「支払い済み」としてマークされることを確認（取り消し線やスタイル変更）
3. もう一度チェックボックスをクリックして、マークが解除されることを確認

検証ポイント：

• 支払い済みマークのトグルが正しく動作する
• 視覚的なフィードバックがある

8. 支出の削除機能のテスト

1. 支出リストの「Carol - ¥6,000 (交通費)」の削除ボタン（ゴミ箱アイコン）をクリック
2. 支出が削除されることを確認
3. 合計金額が「¥39,000」に更新されることを確認
4. 1人あたりが「¥13,000」に更新されることを確認
5. 精算内容が再計算されることを確認

検証ポイント：

• 支出の削除が正しく動作する
• 削除後、すべての計算結果が自動的に更新される

9. メンバーの削除機能のテスト

1. メンバーリストの「Carol」の削除ボタン（×アイコン）をクリック
2. Carol が削除されることを確認
3. Carol の支出も削除されることを確認（既に削除済みの場合はスキップ）
4. 精算結果が2人（Alice、Bob）で再計算されることを確認

検証ポイント：

• メンバーの削除が正しく動作する
• 削除されたメンバーの支出も自動的に削除される
• 残りのメンバーで精算が再計算される

10. データのリセット機能のテスト

1. ページ下部の「すべてリセット」ボタンをクリック
2. すべてのメンバーが削除されることを確認
3. すべての支出が削除されることを確認
4. 「まずメンバーを追加してください」というメッセージが表示されることを確認

検証ポイント：

• リセット機能が正しく動作する
• すべてのデータがクリアされる
• 初期状態に戻る

11. データの永続化テスト（SessionStorage）

1. 上記の手順3〜4を再度実行して、メンバーと支出を追加
2. ブラウザをリロード（F5キー）
3. リロード後、メンバーと支出が保持されていることを確認
4. 精算結果も正しく表示されることを確認

検証ポイント：

• SessionStorage によるデータ永続化が正しく動作する
• リロード後もデータが保持される

Expected Results Summary

すべてのステップが正常に完了した場合、以下が確認できます：

✅ メンバーの追加・削除が正しく動作する ✅ 支出の記録・削除が正しく動作する ✅ 精算結果の計算が正確である ✅ 通貨切り替え機能が動作する ✅ 支払い済みマーク機能が動作する ✅ データのリセット機能が動作する ✅ SessionStorage によるデータ永続化が動作する

Debugging Tips

スクリーンショットの活用

テスト中に問題が発生した場合、以下のタイミングでスクリーンショットを取得すると効果的です：

1. エラーが発生した直後

   • エラーメッセージや異常な表示を記録

2. 期待される結果と異なる場合

   • 実際の表示内容を確認

3. 各主要ステップの完了時

   • 正常に動作していることを確認

コンソールログの確認

ブラウザの開発者ツールを開いて、以下を確認してください：

• エラーメッセージ: 赤色で表示されるエラー
• 警告メッセージ: 黄色で表示される警告
• ネットワークエラー: APIリクエストの失敗など

Notes

• このテストはスタンドアロンモードのみを対象としています
• 同期モード（Nostr統合）のテストは別途実施が必要です
• Lightning支払い機能のテストには、実際のNostr npub（Lightning Address付き）が必要です
• ブラウザの開発者ツールのコンソールでエラーが出ていないことも確認してください
• start-app.sh スクリプトが自動的にポート3000の使用状況を確認します

Troubleshooting

アプリケーションが起動しない場合

# 依存関係を再インストール
pnpm install

# キャッシュをクリア
rm -rf .next

# 再度起動
pnpm dev

データが保持されない場合

• ブラウザのSessionStorageが有効になっているか確認
• プライベートブラウジングモードでは動作が異なる場合があります

計算結果が期待と異なる場合

• 入力した金額が正しいか確認
• メンバー数が正しいか確認
• ブラウザのコンソールでエラーログを確認

Files

このスキルには以下のファイルが含まれています：

• SKILL.md: このドキュメント（テスト手順）
• start-app.sh: アプリケーションを起動するスクリプト（ポートチェック、依存関係インストール、開発サーバー起動を自動化）

---

最終更新: 2026/2/1 バージョン: 1.3.1