القائمة
browser-operator でアプリの画面・遷移を実際に確認し、その情報をもとに Playwright Test の E2E テストコードを設計・実装する。
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/sizukutamago/claude-code-harness --skill e2e-testيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
استنادا إلى تصنيف SOC المهني
| name | e2e-test |
| description | browser-operator でアプリの画面・遷移を実際に確認し、その情報をもとに Playwright Test の E2E テストコードを設計・実装する。 |
browser-operator でアプリケーションを実際にブラウザで操作・観察し、その情報をもとに Playwright Test の E2E テストコードを設計・実装する。
入力: テスト対象の URL + 確認したい画面・機能の指示 出力: Playwright Test の E2E テストコード（テスト全 GREEN）
原則: 画面を実際に見てからテストを書く。推測でテストを書かない。
画面を見ずに E2E テストを書くな
digraph e2e_test {
rankdir=TB;
input [label="テスト対象の\nURL・機能", shape=ellipse];
observe [label="browser-operator で\n画面を観察", shape=box, style=filled, fillcolor="#cce5ff"];
design [label="テストケース設計\nユーザー操作フローの整理", shape=box, style=filled, fillcolor="#ccccff"];
review_design [label="人間パートナーに\nテスト計画を提示", shape=box, style=filled, fillcolor="#ffffcc"];
implement [label="テストコード実装\n1つずつ追加→実行", shape=box, style=filled, fillcolor="#ccffcc"];
check [label="全テスト\nGREEN?", shape=diamond];
fix [label="テストを修正\nor バグ発見→報告", shape=box, style=filled, fillcolor="#ffcccc"];
done [label="E2E テスト完了", shape=ellipse];
input -> observe;
observe -> design;
design -> review_design;
review_design -> implement;
implement -> check;
check -> done [label="はい"];
check -> fix [label="いいえ"];
fix -> check [label="修正後"];
}
browser-operator に対象 URL を渡して、画面の状態を把握する。
| 確認事項 | 観点 |
|---|---|
| 画面構成 | どんな要素があるか（フォーム、ボタン、リスト等） |
| ユーザー操作フロー | どういう順序で操作するか |
| 画面遷移 | 操作後にどこに遷移するか |
| エラー表示 | 不正な操作をしたときに何が表示されるか |
| ローディング | 非同期処理の待ち時間があるか |
観察結果に基づき、E2E テストケースを設計する。
| 分類 | 説明 | 例 |
|---|---|---|
| ハッピーパス | 正常なユーザー操作フロー | フォーム入力 → 送信 → 成功メッセージ表示 |
| バリデーション | 入力バリデーションの検証 | 必須項目未入力 → エラーメッセージ表示 |
| 画面遷移 | ページ間の遷移が正しいか | リンク押下 → 正しいページに遷移 |
| 状態変化 | 操作後の UI 状態変化 | 項目追加 → リストに反映 |
| エッジケース | 特殊な操作パターン | 連打、戻るボタン、リロード |
## E2E テストケース
### ハッピーパス
- E2E-1: [ログインフォームに有効な認証情報を入力して送信すると、ダッシュボードに遷移する]
### バリデーション
- E2E-2: [メールアドレスを空のまま送信すると、エラーメッセージが表示される]
### 画面遷移
- E2E-3: [ナビゲーションの「設定」リンクを押すと、設定ページに遷移する]
設計したテストケース一覧を人間パートナーに提示し、承認を得る。
承認されたテストケースを Playwright Test のコードとして実装する。
getByRole, getByText, getByLabel, getByTestIdwaitForSelector や expect(...).toBeVisible() を適切に使う。固定の sleep は使わない以下のどれかに当てはまったら、やり方を見直せ。
sleep で待機しているあなたはこのスキルのプロセスを自分で実行しない。以下のエージェントにディスパッチする。
browser-operator エージェントをディスパッチして画面を観察
テストケースを設計し、人間パートナーに提示
implementer エージェントをディスパッチしてテストコードを実装
test-runner エージェントをディスパッチして最終確認
あなたが結果を判断する
前提スキル:
必須ルール:
前提モジュール:
このスキルを使うスキル: