Playwright × TypeScript E2Eテスト実践 環境構築からテスト実装まで、ハンズオンで学ぶテスト自動化の基本
手動テストの「繰り返し」を、自動化の「仕組み」に変える。
研修概要
Playwright × TypeScript E2Eテスト実践は、Webアプリケーションのテスト自動化を実務で活用するための「E2Eテスト設計力」と「Playwright実装力」の習得を目標とした実践型研修です。
環境構築・コアオブジェクトの理解からログイン認証・検索・登録・変更機能への自動テスト実装まで、実際のNext.jsアプリケーションを題材にハンズオン形式で一気通貫で提供することで、手動テストへの依存を構造的に解消し、品質を保ちながらリリースサイクルを加速できる開発体制を確立させます。
こんな課題を持つ企業におすすめ
ビジネス現場
- リリースのたびに手動テスト工数が膨らみ、スプリント後半が確認作業で圧迫されている。
- テスト自動化が特定エンジニアにしか担えない属人化状態で、担当者の異動・退職により品質が不安定になるリスクを抱えている。
- Selenium等の旧世代ツールではNext.js・React等のSPA特有の非同期処理に対応しきれず、テストが不安定で誰も信用しなくなっている。
- CI/CDパイプラインに自動テストを組み込みたいが、実装方法を知るエンジニアがおらずDevOps推進が頭打ちになっている。
本研修の到達目標
開発現場
- 1Playwrightのコア概念と環境構築の理解Browser・BrowserContext・Pageの階層構造とフィクスチャの仕組みを理解し、プロジェクトに最適な実行環境を自力で構築できるようになります。
- 2堅牢で保守性の高い要素特定の習得ユーザー視点のLocator（getByRoleやgetByLabel等）を適切に選択し、UIのデザイン変更に左右されにくい、壊れにくいテストを記述できるようになります。
- 3高度なWebインタラクションの検証Cookie（認証トークン）の直接検証、テーブルデータの件数・内容の特定、非同期バリデーションの制御など、複雑なユーザーフローを網羅的に自動化できるようになります。
- 4Web-First Assertionsによる安定したテスト実装Playwrightの自動待機機能を最大限に活かし、明示的なスリープを使わずに、通信の遅延やレンダリングを正確に待機する安定したスクリプトを作成できるようになります。
- 5デバッグおよびレポート活用能力の確立Trace ViewerやUI Mode、HTMLレポートを使いこなし、テスト失敗時の根本原因を迅速に特定・修正できるようになります。
組織への期待効果
- 1リリース遅延とテスト工数超過の抑制スプリント後半に集中する手動テスト作業をCI/CDパイプラインに組み込むことで、確認工数の予測精度が高まり、リリーススケジュールの安定化に寄与します。
- 2品質保証の属人化リスクの解消特定エンジニアに依存していた自動テスト運用をチーム全体に分散させることで、担当者の異動・退職による品質低下リスクと引き継ぎコストを最小化します。
- 3バグ流出による手戻りコストの削減コードプッシュ時点でE2Eテストが自動実行される体制を整備し、本番リリース後のバグ対応コストと顧客影響を構造的に抑制します。
本研修の特長
最新世代Playwrightの技術的優位性を体系的に習得
SeleniumやCypressとのアーキテクチャ比較から始まり、Auto-wait・BrowserContext・Trace Viewerまで、なぜPlaywrightがモダンなSPA環境で選ばれるのかを理解したうえで実装できる体制を提供します。ツールを動かすだけでなく、設計の根拠まで説明できるエンジニアを育成します。
Next.js実アプリへのハンズオンで即戦力スキルを養成
ログイン認証・商品検索・登録・変更という実際のビジネスロジックを持つNext.jsアプリケーションを題材に演習を実施します。正常系・異常系・非同期バリデーションまで網羅したテスト設計を繰り返すことで、受講後すぐに現場へ持ち帰れる実装力を提供します。
GitHub Actionsとの連携まで見通せるCI/CD統合設計
環境構築の段階からGitHub Actionsワークフロー（playwright.yml）の生成を扱い、コードプッシュ時の自動テスト実行体制を構築する第一歩まで提供します。テスト自動化を「書いて終わり」ではなく「仕組みとして定着させる」視点をチームに根付かせます。
研修カリキュラム
| 日程 | 章・学習テーマ | 学習内容・習得スキル |
|---|---|---|
| 1日目 | 第1章：E2Eテストの基礎知識 | E2Eテストの概念（ブラックボックステスト・AAAパターン）・必要性（手動テストの限界・シフトレフト）・フレームワークの進化（Selenium→Cypress→Playwright）を学びます。PlaywrightのAuto-wait・BrowserContext・Trace Viewerの技術的優位性を理解し、WSL2環境でのプロジェクト初期化・GitHub Actions連携設定まで行います。 |
| 第2章：テストターゲットの概要 | 演習で使用するNext.js/React製SPAアプリケーションの構成・UIページ遷移・画面インタラクションを把握します。ログイン・商品登録・検索・変更の各ユースケースを理解します。 |
|
| 第3章：Playwrightテストの基本構造とコアオブジェクト | Browser・BrowserContext・Pageの3層構造とフィクスチャを理解します。getByRole・getByLabel等のLocatorを使った堅牢な要素特定・値の取得と、AAAパターンに基づくexpect()によるWeb-First Assertionsを習得します。 |
|
| 第4章：ログイン・ログアウト機能のテストと状態管理 | メニューからログイン画面への遷移検証、Cookie（JWT）の取得・検証、入力バリデーションの正常系・異常系テストを実装します。ログアウト後のセッショントークン破棄まで確認します。 |
|
| 2日目 | 第5章：商品キーワード検索機能のテスト | 未入力エラー・検索結果0件・テーブルデータ表示の3パターンを実装します。getByRole(‘row’)・toHaveCount・nth()を使った複数要素の検証と、非同期レンダリングへの自動待機を習得します。 |
| 第6章：商品登録機能のテスト | フォーカスアウト時の非同期バリデーション（重複チェック）をblur()で制御するテストを実装します。required属性の検証・登録完了モーダルのハンドリング・フォームリセットの確認まで行います。 |
|
| 第7章：E2Eテスト演習：商品変更機能 | 仕様書から自力でテストシナリオを設計し、変更対象商品の検索（課題-1）・変更対象商品の変更（課題-2）という2段階の総合演習を実施します。各章末に演習があり、2日目は実践テストと総合演習に集中します。 |
必要な受講環境と前提知識
受講環境
演習はWSL2（Ubuntu 24.04）上で実施します。受講前に以下の環境を準備してください。Node.js v18以上のインストールと、GitHubへの外部アクセスが可能なネットワーク環境が必要です。
| IDEと演習環境 | Visual Studio Code ／ WSL2（Ubuntu 24.04） |
|---|---|
| VSCode拡張機能 | Playwright Test for VSCode ／ GitHub Pull Requests |
| 実行環境 | Node.js v18.0.0以上（LTS版推奨） |
| 演習リポジトリ | 演習模範解答：https://github.com/fullness-MFurukawa/playwright-ts-exercise 演習ターゲットアプリ：https://github.com/fullness-MFurukawa/Playwright-exercise-target |
前提知識
- TypeScript / JavaScript：型定義・インターフェース・async/awaitを理解していること（最重要）。関数・変数・配列・オブジェクト操作の基本を習得済みであること。
- Webアプリケーション：ブラウザでHTTPリクエスト・レスポンスが動作する仕組みを理解していること。HTML要素（input・button・table等）の基本構造を把握していること。
- 開発環境：コマンドライン（ターミナル）の基本操作ができること。Gitの基本操作（clone・add・commit・push）を習得済みであること。
お問い合わせ
本研修に関するご質問・お申し込みは、以下のフォームよりお問い合わせください。
担当者より2営業日以内にご連絡いたします。