E2Eテストの自動化
>100 Views
December 12, 25
スライド概要
開発スピードが求められる今、EtoEテストの自動化は品質と効率を両立させる重要な取り組みです。
「EtoEテストの自動化」をテーマにまとめました。
ベガシステム技術勉強会の発表資料です。
ベガシステムは、創業1990年、30年以上続くIT企業です。 お客様との対話を大切にし、新たな価値を創造し続けます。
関連スライド
各ページのテキスト
https://www.vega-net.co.jp/ PlaywrightでのE2E構築 2025年11月18日
■目次 1. E2Eテストとは？ 2. E2Eテストの特徴 3. E2Eを実施するメリット 4. Playwrightとは？ 5. PlaywrightでのE2E自動テストの基本の流れ 6. Playwrightの主な機能 7. 正しい表示の確認方法（expectアサーション） 8. 実際のコードと動き 9. おまけ：Playwright MCP 10.まとめ © 2025 VEGA Systems Inc. 1
■E2Eテストとは？ End-to-End テストの略。 ユーザーの使用シナリオに基づいて、 アプリケーションの開始から終了までの全プロセスをテストする手法 © 2025 VEGA Systems Inc. 2
■E2Eテストの特徴 1. 使用するインターフェースはユーザーインターフェース →Webブラウザやモバイルデバイスなどが対象 2. テストケースはユーザーストーリーが基になる →ユーザーがその機能を用いて達成したいことをテストする 3. テスト対象は完全に統合されたシステム全体 →全てのサービスが揃った完全な状態での動作を確認する 4. 想定されるバグは、「ユーザーストーリーそのものの失敗」 → 「ログイン出来ない」 「商品がカートに入らない」 「画面遷移ができない」 etc. © 2025 VEGA Systems Inc. 3
■E2Eを自動テストで実施するメリット 1. ユーザーストーリーそのものをテストできる APIやブラウザ、全てがユーザー操作視点でのテストを実行できる。 これにより、「ユーザーストーリーの失敗」という最も深刻なバグを発見することができる。 2. 幅広い用途に利用できる 互換性の確認や、システムの動作の流れ、システム監視など 様々な用途に使用することができる © 2025 VEGA Systems Inc. 4
■E2Eを自動テストで実施するメリット 建設現場で例えるなら・・・ E2E自動テストがない → 足場がないのと同義！ ・作ろうにもとにかく不安定 ・大きな事故が起こる可能性がある ・他の修正を行おうにも非常に大変 © 2025 VEGA Systems Inc. 5
■E2Eを自動テストで実施するメリット 建設現場で例えるなら・・・ E2E自動テストがある → しっかりした足場がある！ ・安心して・安定して進められる ・大きな事故のリスクを大きく減らせる ・増築・改修をしても、 既存部分を壊していないかすぐ確認できるので、 次の修正にもどんどん取り組める © 2025 VEGA Systems Inc. 6
■Playwrightとは？ Microsoftが開発したWeb UI自動化テストフレームワーク Playwrightを使用することにより、E2Eテストの自動化が行うことができる。 Playwrightでテストを自動化することにより、 ・テスト時間の大幅削減 ・テストレポート作成の容易化 ・修正確認の容易化 が期待できる！ © 2025 VEGA Systems Inc. 7
■PlaywrightでE2Eテストを実行する流れ 1. テストシナリオを決める 2. Playwright環境を用意する 3. テストコードを記述する ブラウザを開く → 画面を操作する → 期待結果を検証する 4. テストを実行する 5. 結果を確認する 失敗しているシナリオは、レポート・スクリーンショット・動画を見ながら失敗原因を調査する © 2025 VEGA Systems Inc. 8
■Playwrightの機能 1. 複数ブラウザ対応 Chromium / Firefox / WebKit ベースのブラウザを同じテストコードで実行できる 2. 自動待機 クリックや入力前に、要素が表示・有効になるまで自動で待ってくれる 3. 並列実行・リトライ テストコードを複数並列で実行することができ、自動でタイムアウトする時間までリトライをしてくれる 4. 失敗テストのトレス・スクリーンショット・動画の自動取得 失敗したテストのエラートレースやスクリーンショット、実行時の動画を自動で取得し、レポートを作成してくれる 5. コード生成（Codegen） 実際にブラウザを触りながら操作を記録し、テストコードのベースを自動生成 © 2025 VEGA Systems Inc. 9
■正しい表示の確認方法 expect アサーションを使用し、様々な要素・状態を確認していく ■よく使う確認項目 1. どの画面を開いているか expect(page).toHaveURL(...) / expect(page).toHaveTitle(...) 2. 要素の表示状態（要素が出ている / 出ていない / 件数など） expect(locator).toBeVisible() / toBeHidden() / toHaveCount(n) 3. テキスト内容（文言が正しいか・含まれているか） expect(locator).toHaveText(...) / toContainText(...) 4. フォーム・ボタンなどの状態・属性（値・チェック・有効/無効・クラスなど） toHaveValue(...) / toBeChecked() / toBeDisabled() / toHaveAttribute(...) 5. スタイル・崩れ検知の見た目の変化 （CSS やデザイン崩れの確認） toHaveCSS(...) / toHaveScreenshot('xxx.png') © 2025 VEGA Systems Inc. 10
■実際のコード・動き 実際の画面 © 2025 VEGA Systems Inc. テストコード（Typescript） 11
■実際のコード・動き 実行結果 © 2025 VEGA Systems Inc. 12
■実際のコード・動き 実行結果（テストレポート） © 2025 VEGA Systems Inc. 13
■おまけ：playwright MCP ■Playwright MCPとは・・・ AI が Playwright を操作できるようにするための MCP サーバー ■なにができる？ AIがブラウザを起動し、そのブラウザ内での操作・ブラウザの内容の確認を行えるようになる！ ■具体例 AIに テスト作成 → テスト実行 → テストレポート作成 → テストレポートをPlaywrightMCP経由で失敗原因を読み込み → テスト修正 →テスト実行 … のループを実施するように指示し、簡単にテストの作成・検証が行える！ © 2025 VEGA Systems Inc. 14
■まとめ ・ E2Eテストは、ユーザーの操作フロー全体を通して確認するテスト ・ Playwright を使うと、ブラウザ操作やチェックをコードで自動化できる ・ Expect アサーションで、画面遷移・表示内容・状態を機械的に確認できる ・ E2E自動テストがあると、リリースのたびに同じチェックを機械的に繰り返せるため、 品質とリリースの安定性が大きく向上する © 2025 VEGA Systems Inc. 15
■参考文献 【Playwrightの前に】E2Eテストを理解したい https://zenn.dev/yuu104/articles/what-is-e2e-test Playwrightを用いてテストを自動化しよう！概要や使い方を解説 https://udemy.benesse.co.jp/development/playwright.html Assertions | Playwright https://playwright.dev/docs/test-assertions 『東京タワー』の建設フロー、PM視点でみてヤバすぎたので解説 https://note.com/shokosuzuki/n/n5a9a44d6f067 なんというスケール…高速道路上の巨大「足場要塞」ついに潜入 「石ころ一つ落とさない」ために準備6年!? 今まさに格闘中！ https://trafficnews.jp/post/133273 © 2025 VEGA Systems Inc. 16