trace-flow
Playwright テストを「仕様」として理解する VSCode 拡張機能
テストコードを読むのではなく、自然言語で書かれた仕様のように読めるようにします。
日本語・英語に対応。
主な機能
1. インライン自然言語表示
テストコードの横に、各ステップの自然言語説明が表示されます。
await page.goto('/login'); // 「/login」に遷移する
await page.fill('#email', 'user@x.com'); // 「email」に「user@x.com」を入力する
await page.click('#submit'); // 「submit」をクリックする
2. プレビューパネル
Cmd+Shift+V で、テストファイル全体を仕様書風に美しく表示。
3. 表示モード切替
Cmd+Shift+D で 3 モード切替：
inline - コード行の右側にコメントblock - コード行の下に展開off - 非表示
4. 言語切替
Cmd+Shift+L で日本語 ↔ 英語を切替。ステータスバーに現在の言語を表示。
5. トレーサビリティ
- 仕様（Gauge
.spec）↔ テスト（Playwright .spec.ts）↔ Step 実装の自動リンク
- サイドバーにトレーサビリティツリー表示
- CodeLens で「View Spec」「View Test」ナビゲーション
6. ギャップ検出
- テストが書かれていない仕様シナリオを検出
- 仕様にない不明なテストを検出
- Problems パネルに警告表示
Cmd+Shift+P → trace-flow: Show Gap Report で詳細レポート
サポート範囲
Playwright API（55+）
- Navigation:
goto, goBack, goForward, reload
- Input:
click, fill, type, press, check, uncheck, selectOption, hover, dblclick, tap, setInputFiles, focus
- Wait:
waitForSelector, waitForURL, waitForLoadState, waitForResponse, waitForTimeout
- Assert:
toBeVisible, toHaveText, toContainText, toHaveURL, toHaveTitle, toHaveValue, toHaveCount, toBeEnabled, toBeDisabled, toBeChecked, toHaveAttribute, toHaveClass, toBeEmpty, toBeFocused, toBeEditable 他
- Locator:
locator, getByRole, getByTestId, getByLabel, getByPlaceholder, getByText + チェーン解決
- Special:
not.*, expect.soft(), test.step(), request.* (API テスト)
TypeScript 構文
- 変数宣言（
const x = ..., new Foo()）
- 条件分岐（
if）
- ループ（
for-of, for-in, for）
- try-catch
設定
settings.json または設定画面（Cmd+,）で：
{
"traceFlow.lang": "ja", // "ja" | "en"
"traceFlow.showInlineDescriptions": true
}
仕組み
LLM 不使用、ルールベースの決定論的な変換エンジン。
ts-morph で AST 解析 → ルールマッチング → 自然言語テンプレート。
ライセンス
MIT
| |
