PlaywrightのE2Eテストコードを1人で書くのを辞めた話／NCDC_フロントエンドAI活用LT会

Transcript

1. NCDC フロントエンドAI活用LT会 TOPPAN株式会社 小松泰士 2026/04/28
2. 2 ©TOPPAN Inc. 自己紹介 小松 泰士（こまつ たいし） ◼所属： TOPPAN 株式会社 ◼役割： Webアプリケーション開発 / クラウド環境構築(AWS)など ◼資格： AWS 資格 全冠目指しています !! ◼好きなサービス： Lambda, Bedrock ◼趣味： ゲーム(Leage of Legends) / Claude Code でsubagentつくりこみ
3. 3 ©TOPPAN Inc. 背景：担当プロジェクトの完全内製化 • 設計/開発・単体/結合テストは協力会 社に委託 • 自分たちは納品物の受入テストのみを 行う立場 これまで • 開発体制を内製化に切り替え • 設計/開発・単体/結合テストまで一気 通貫で自分たちで実施 いま 受け入れる立場を脱却 品質を直接つくる立場に変化 ※本件は登壇者が担当するプロジェクトにおける取り組み事例です。
4. 4 ©TOPPAN Inc. 引き継ぎ後の３つの痛み テストコードが存在しない １ 単体/結合テストは開発者の手動確認のみ 個人の感覚的な評価で品質を判断していた 結合テスト項目の手動作成 2 1機能の改修で数十行のテストケースをExcelで作成し、 人が手動で実行と結果の記入を行っていた 責任分界が曖昧 3 結合テスト(エンジニア)と受入テスト(非エンジニア)の間で、 お互いに何をどれだけテストしているかが不透明
5. 5 ©TOPPAN Inc. Playwright とは Microsoft 製 の E2E テストフレームワーク ・ 1つのコードでブラウザを自動操作 ・ TypeScriptでテストを書く ・Playwright-mcp を使って生成AIから呼び出せる import { test, expect } from '@playwright/test'; test('ログイン', async ({ page }) => { await page.goto('/login'); await page.fill('input[name=id]', 'admin'); await page.click('button[type=submit]'); await expect(page).toHaveURL('/dashboard'); }); このテストコードをAIに書かせたい
6. 6 ©TOPPAN Inc. デモ①：Playwrightで自動E2Eテスト実行 デモ映像
7. 7 ©TOPPAN Inc. 個人で使うAI / チームで使うAI 品質がバラつく 個人のプロンプトに依 存し、出力の制限性が 低い ノウハウが消失する 特定のメンバーが抜け たら、AI活用の知見が チームから失われる プロセスに 組み込めない よりよいAIの使い方を 見つけても全体適用さ れにくい チームに展開できないAI活用は 属人化を加速させる
8. 8 ©TOPPAN Inc. チームでAIを使う第一歩 Skill + Command をリポジトリに同梱 ◦◦-frontend/ ← リポジトリ ├─ .claude/ ← チーム共有 │ ├─ skills/ │ │ └─ write-e2e-test.md │ └─ commands/ │ └─ write-e2e-test.md ├─ CLAUDE.md ← 規約・お作法 └─ system/ └─ tests/ ├─ auth.setup.ts └─ license.spec.ts 規約として何を書いたか（CLAUDE.md / Skill） ①セレクタ戦略 プライベート属性は禁止 など ②非同期ロード 即assertではなくexpect.pollで最大15秒待つ など ③データ安全 実DBを汚さないシナリオ ④テンプレ感染 既存お手本(license.spec.ts)を必ず読む など → 過去の失敗や成功体験をベースに定義を改善していく • .claudeディレクトリをリポジトリ内に配置 • 個人のAIツールからチームの共通のAIルールへ • Playwrightのテストコードも全員同じエージェントで作成させることで品質を維持 • リポジトリ内のskillsやsubaegntの追加はPR無しでマージOKとすることで、 個人のAI検証を促進
9. 9 ©TOPPAN Inc. デモ②：Skillsでテストコードを１発生成 デモ映像
10. 10 ©TOPPAN Inc. Before / After BONUS：嬉しい副産物 Playwrightは実行結果をHTMLレポートとして自動生成（スクショ・操作トレース・動画つき） → 非エンジニアにそのまま渡せる → 冒頭の痛み③「カバレッジ不透明」への、思わぬ回答に • 個人が毎回異なるプロンプトでテスト コードを生成 • 良いテストコードができてもノウハウ が個人に依存する Before / 個人のAI • 共通のスキル１つで誰でも同じ品質の テストコードを生成 • Gitの履歴として全員のAI利用のノウハ ウがプロセスで記録される After / チームのAI
11. 11 ©TOPPAN Inc. まとめ AIは 個人の道具 から チームの資産へ 要件定義 (結合 / 受入テスト)を AIでつなぐカバレッジトレース （今後の展望） リポジトリはコードだけでなく AIとの共同作業の作法を置く場所になる
12. 本資料に記載されている会社名、製品名、サービス名、ロゴ等は、各社の商標または登録商標です。 ・Playwright は Microsoft Corporation の商標です。 ・Claude は Anthropic, PBC の商標です。 ・Amazon Web Services、AWS、および AWS 認定ロゴは、Amazon.com, Inc. またはその関連会社の商標です。 ・League of Legends は Riot Games, Inc. の商標です。 ・TypeScript、Git、その他記載の製品名・サービス名は、各社の商標または登録商標です。