学習ロードマップ

E2E テスト(Playwright / Cypress)

ユーザーシナリオをブラウザ自動操作で守る。テスト設計の型からフロント自動テスト、UI 自動化 + CI/CD 運用まで 5 冊で積み上げる。

マンガでわかるソフトウェアテスト入門テスターちゃん Vol.1

ソフトウェアテスト技法ドリル【第2版】 : テスト設計の考え方と実際

ソフトウェアテスト技法練習帳　〜知識を経験に変える40問〜

フロントエンド開発のためのテスト入門今からでも知っておきたい自動テスト戦略の必須知識

iOSアプリ開発自動テストの教科書　〜XCTestによる単体テスト・UIテストから、CI/CD、デバッグ技術まで

SCROLL TO BEGIN

このロードマップが扱うもの

- 手動回帰テストが肥大化し、E2E 自動化に踏み出したい Web フロント / QA エンジニア - Playwright や Cypress を触り始めたが、どのシナリオを自動化すべきか判断軸が持てていない実務者 - CI にブラウザテストを載せて「壊れたら気付ける」状態まで持ち込みたいチーム

このロードマップの全体像

対象読者

手動回帰テストが肥大化し、E2E 自動化に踏み出したい Web フロント / QA エンジニア
Playwright や Cypress を触り始めたが、どのシナリオを自動化すべきか判断軸が持てていない実務者
CI にブラウザテストを載せて「壊れたら気付ける」状態まで持ち込みたいチーム

5 冊で到達する状態

同値分割・境界値・デシジョンテーブルなどテスト設計技法を選び分け、E2E に載せる観点を絞り込める
ユニット / 結合 / E2E の役割分担を言語化し、テストピラミッドをプロジェクトに合わせて設計できる
セレクタ戦略・待機・フレーク対策・テストデータ設計といった自動テスト固有の落とし穴を回避できる
UI 自動化を CI/CD に接続し、失敗時の切り分けとレポートを運用フローに組み込める
Playwright / Cypress 固有の API に入る前提として、ブラウザ E2E の普遍的な設計原則を押さえている

進め方のヒント

1 冊目でテスト全体の地図を持ち、2-3 冊目で設計技法を手に馴染ませる
4 冊目でフロントエンド自動テストの戦略を掴んだら、Playwright / Cypress の公式ドキュメントに戻って実装に落とす
5 冊目の UI テスト + CI/CD の実例を、題材を Web に読み替えながらパイプライン設計の参考にする

01
ステップ 01 テストの目的と工程をマンガで俯瞰する入門書
02
ステップ 02 テスト設計技法の考え方を体系で固める一冊
03
ステップ 03 40 問の演習でテスト技法を手に馴染ませる実践書
04
ステップ 04 フロントエンド自動テスト戦略を描く決定版
05
ステップ 05 UI 自動テスト + CI/CD 運用の実例

第 1 章

テストの目的と工程をマンガで俯瞰する入門書

テストの目的と工程をマンガで俯瞰する入門書

自動化に入る前に「何を守るためのテストか」を腹落ちさせるための導入。ロードマップ全体の前提を揃える 1 冊目として置く。
この章の 1 冊 マンガでわかるソフトウェアテスト入門テスターちゃん Vol.1
松谷峰生 / シーアンドアール研究所 / 2020

マンガ形式でソフトウェアテストの基礎概念を身につける
この本で身につくこと
- ソフトウェアテストの目的と定義を自分の言葉で説明できる
- マイヤーズの三角形を使ったテストケース設計の考え方を理解する
- テストケースの再現性・客観性を担保するための記述作法を身につける
- バグレポートに必要な情報と書き方の基本を習得する
想定読者: ソフトウェアテストの経験がない新人エンジニアや、テスト工程に初めて携わるチームメンバー
本の詳細を見る →
テスト設計技法の考え方を体系で固める一冊

E2E で拾うべきシナリオを絞り込むための設計技法を体系化する。自動化対象の取捨選択を支える理論の幹として読む。
この章の 1 冊 ソフトウェアテスト技法ドリル【第2版】 : テスト設計の考え方と実際
秋山浩一 / 日科技連出版社 / 2022

複数のテスト設計技法を点・線・面・立体の視点で体系的に習得する
この本で身につくこと
- 同値分割・境界値分析をループ境界や負荷テストへ応用する技術
- デシジョンテーブル・原因結果グラフ・CFD法を使って『面』で仕様を網羅する設計ができる
- HAYST法・ペアワイズを用いた多因子組み合わせテストの設計と削減戦略
- 状態遷移テストをUMLステートマシン図から正確に導出する際の注意点
想定読者: テスト設計の引き出しを増やしたい初・中級のテスト技術者、およびJSTQB Advanced Level取得を目指す受験者
本の詳細を見る →
40 問の演習でテスト技法を手に馴染ませる実践書

2 冊目で学んだ技法を実務的な問題で反復し、観点の設計を自分の言葉で動かせるようにする実装前の橋渡し役として据える。
この章の 1 冊 ソフトウェアテスト技法練習帳　〜知識を経験に変える40問〜
梅津正洋、竹内亜未、伊藤由貴、浦山さつき、佐々木千絵美、高橋理、武田春恵、根本紀之、藤沢耕助、真鍋俊之、山岡悠、吉田直史［著］ / 技術評論社 / 2020

テスト技法の知識を問題演習で実務レベルまで定着させる
この本で身につくこと
- 同値分割法・境界値分析を料金体系やセンサー判定など業務に近い仕様に適用し、テストケースを体系的に導出できる
- デシジョンテーブルで複雑な条件分岐を網羅的に整理し、条件組み合わせ漏れを防いだテスト設計ができる
- 状態遷移テストでUI・業務フローの状態図からテストケースを導出し、遷移漏れを体系的に検出できる
- ペアワイズ法等の組合せテスト技法で組み合わせ爆発を抑えつつ高リスク部位を優先検証するテスト設計ができる
読み終えると Before(読む前): テスト技法の名称（同値分割・デシジョンテーブル等）は知っているが、実際の仕様書を前にしてどの技法を選択しどうテストケースに変換するか判断できない After(読み終えた後): 料金体系・状態遷移・組み合わせ仕様など現実的な仕様に対して適切なテスト技法を選択し、テストケースを体系的に設計できる

想定読者: 座学でテスト技法を学んだが実務への適用に悩む新人〜若手テストエンジニア。企業内新人研修の教材を探す担当者にも適する

前提知識: ソフトウェア開発工程（要件定義〜テスト）の基本的な流れについての概念的な理解 / 条件分岐やループ処理など、プログラムの基本的な仕様書の読み方
本の詳細を見る →
フロントエンド自動テスト戦略を描く決定版

ユニット・結合・E2E の境界、Testing Library や Playwright を含む自動テスト戦略を扱う。本ロードマップの核として読む。
この章の 1 冊 フロントエンド開発のためのテスト入門今からでも知っておきたい自動テスト戦略の必須知識
吉井健文 / 翔泳社 / 2023

フロントエンド自動テストの基礎から実践的な導入手法を体系的に学ぶ
この本で身につくこと
- UIコンポーネントのユニットテストを Jest および Testing Library を用いて実装できる
- ビジュアルリグレッションテストの仕組みと、導入が有効な場面の判断軸を持てる
- アクセシビリティに配慮したクエリ戦略（ロール・属性ベース）でテストを設計できる
- CI パイプラインへのテスト組み込みを設定レベルで実装できる
想定読者: テストの必要性を感じながらも着手できていない、ある程度の開発経験を持つフロントエンドエンジニア

前提知識: JavaScript または TypeScript でフロントエンドのコンポーネントを書いた経験（ゼロスタートでも読めるが、コード例の理解が格段に深まる） / React などのモダンなフロントエンドフレームワークのコンポーネントモデルに関する基礎知識
本の詳細を見る →
UI 自動テスト + CI/CD 運用の実例

題材は iOS だが、UI テストの設計・フレーク対策・CI/CD 連携の勘所は Web E2E に横展開できる。運用フェーズの参考書として置く。
この章の 1 冊 iOSアプリ開発自動テストの教科書　〜XCTestによる単体テスト・UIテストから、CI/CD、デバッグ技術まで
平田敏之、細沼祐介 / 技術評論社 / 2019

『iOS アプリ開発自動テストの教科書 — XCTest による単体テスト・UI テストから、CI/CD、デバッグ技術まで』(2019 年 6 月、技術評論社)は、iOS アプリ開発で自動テストを業務に組み込むための実践書。
この本で身につくこと
- XCTest で単体テストを書ける — テストケース / アサーション / Lifecycle
- UI テスト(XCUITest)を設計できる — ユーザー操作の自動化
- CI/CD で自動テストを実行できる — Xcode Cloud / GitHub Actions / Bitrise
- デバッグ技法が体系化される — LLDB / Instruments / メモリ分析
本の詳細を見る →