Webアプリにありがちな状態遷移をまとめて状態遷移表でテスト観点とする


<h2>人生は楽したい</h2>

Webアプリケーションごとに仕様、入力項目、挙動が異なるのは百も承知ですが、
ある程度、パターン化されているものは、状態遷移表として画面(架空の画面)ごとにまとめておくと、
画面テストのテスト観点つくる時にテンプレとして使え、楽なんじゃない？？という発想の基、作成。
当然、テスト対象に合わせて、抜いたり、引いたり、書き換えたりするのは前提。


<h2>画面ごとの状態遷移表テンプレート</h2>

> 「-」のアイコンはありえない場合

* <strong>Top Page</strong>

|   | 【状態】<br/>未Login | 【状態】<br/>Login済み |
| --- | --- | --- |
|  【イベント】<br/>Top Pageへアクセス | Top Page画面へ | My Page画面へ |
|  【イベント】<br/>LoginボタンClick | Login画面へ | - |
|  【イベント】<br/>新規ユーザ登録ボタンClick | 新規ユーザ登録画面へ | - |
|  【イベント】<br/>LogoutボタンClick | - | Logout画面へ |

　
* <strong>Login画面</strong>

|   | 【状態】<br/>未Login<br/>未SNS連携 | 【状態】<br/>Login済み |
| --- | --- | --- |
|  【イベント】<br/>Login画面アクセス | Login画面へ | My Pageへ |
|  【イベント】<br/>サイトLogoをClick | Top Pageへ | - |
|  【イベント】<br/>ID & PASSWORD未入力で<br/>LoginボタンをClick | Loginエラー表示 | - |
|  【イベント】<br/>ID未入力で<br/>LoginボタンをClick | Loginエラー表示 | - |
|  【イベント】<br/>PASSWORD未入力で<br/>LoginボタンをClick | Loginエラー表示 | - |
|  【イベント】<br/>間違ったIDを入力し<br/>LoginボタンをClick | Loginエラー表示 | - |
|  【イベント】<br/>間違ったPASSWORDを入力し<br/>LoginボタンをClick | Loginエラー表示 | - |
|  【イベント】<br/>正しいID & PASSWORD未入力で<br/>LoginボタンをClick | My Pageへ | - |
|  【イベント】<br/>期限切れID & PASSWORD未入力で<br/>LoginボタンをClick | 再設定画面へ | - |
|  【イベント】<br/>SNS連携(facebook,twitter....etc)<br/>LoginボタンをClick | SNS連携確認画面へ | - |
|  【イベント】<br/>「パスワードを忘れた場合」リンクをClick | パスワード再設定画面へ | - |
|  【イベント】<br/>「新規登録」リンクをClick | 新規ユーザ登録画面へ | - |
　
* <strong>新規ユーザ登録画面</strong>

|   | 【状態】<br/>未Login | 【状態】<br/>Login済み |
| --- | --- | --- |
|  【イベント】<br/>新規ユーザ登録画面へアクセス | 新規ユーザ登録画面へ | My Pageへ |
|  【イベント】<br/>サイトLogoをClick | Top Page画面へ | - |
|  【イベント】<br/>必須入力項目と任意項目を全て正しく入力し<br/>登録ボタンをClick | My Pageへ<br/>or メール認証ページへ | - |
|  【イベント】<br/>必須入力項目のみ正しく入力し<br/>登録ボタンをClick | My Pageへ<br/>or メール認証ページへ | - |
|  【イベント】<br/>必須入力項目に不正な値を入力し<br/>登録ボタンをClick | 登録エラー表示 | - |
|  【イベント】<br/>任意項目のみ全て正しく入力し<br/>登録ボタンをClick | 登録エラー表示 | - |
|  【イベント】<br/>全ての入力項目を未入力で<br/>登録ボタンをClick | 登録エラー表示 | - |
|  【イベント】<br/>全ての入力項目を未入力で<br/>登録ボタンをClick | 登録エラー表示 | - |
|  【イベント】<br/>登録済みのIDを入力し<br/>登録ボタンをClick | 登録エラー表示 |  |
|  【イベント】<br/>SNS(facebook,twitter....etc)<br/>連携ボタンをClick | 該当のSNS連携確認画面へ | - |
|  【イベント】<br/>「ログインはこちら」リンクをClick | Login画面へ | - |
　
* <strong>認証コード入力画面</strong>

|   | 【状態】<br/>未認証、有効期限内 | 【状態】<br/>未認証、有効期限外 |
| --- | --- | --- |
|  【イベント】<br/>正しい認証コードを入力し<br/>SubmitボタンをClick | 認証が成功し、●●画面へ | 認証エラー表示 |
|  【イベント】<br/>不正な認証コードを入力し<br/>SubmitボタンをClick | 認証エラー表示 | - |
|  【イベント】<br/>認証コードを未入力で<br/>SubmitボタンをClick | 認証エラー表示 | - |
　
* <strong>My page</strong>

|   | 【状態】<br/>Login済み |
| --- | --- |
|  【イベント】<br/>LogoutボタンClick | ログアウト画面へ |
|  【イベント】<br/>AccountアイコンClick | 設定メニューが開く |
　
* <strong>●●登録/編集画面</strong>

|   | 【状態】<br/>登録/編集権限があるユーザでログイン | 【状態】<br/>登録/編集権限がないユーザでログイン | 【状態】<br/>未ログイン |
| --- | --- | --- | --- |
|  【イベント】<br/>●●登録/編集画面へアクセス | ●●登録/編集画面へ | ●●画面へリダイレクト<br/>or エラー表示 | Top Pageへリダイレクト<br/>or エラー表示 |
|  【イベント】<br/>サイトLogoをClick | Top Page画面へ | - | - |
|  【イベント】<br/>必須入力項目と任意項目を全て正しく入力し<br/>登録ボタンをClick | 登録内容確認画面へ | - | - |
|  【イベント】<br/>必須入力項目のみ正しく入力し<br/>登録ボタンをClick | 登録内容確認画面へ | - | - |
|  【イベント】<br/>必須入力項目に不正な値を入力し<br/>登録ボタンをClick | 入力エラー表示 | - | - |
|  【イベント】<br/>任意項目のみ全て正しく入力し<br/>登録ボタンをClick | 入力エラー表示 | - | - |
|  【イベント】<br/>全ての入力項目を未入力で<br/>登録ボタンをClick | 入力エラー表示 | - | - |
　
* <strong>●●登録/編集確認画面</strong>

|   | 【状態】<br/>登録/編集権限があるユーザでログインし、<br/>●●登録/編集画面を経由 | 【状態】<br/>登録/編集権限があるユーザでログインし、<br/>●●登録/編集確認画面を直アクセス | 【状態】<br/>登録/編集権限がないユーザでログインし、<br/>●●登録/編集確認画面を直アクセス | 【状態】<br/>未ログイン |
| --- | --- | --- | --- | --- |
|  【イベント】<br/>●●登録/編集確認画面へアクセス | ●●登録/編集確認画面表示 | ●●画面へリダイレクト<br/>or エラー表示 | ●●画面へリダイレクト<br/>or エラー表示 | Top Pageへリダイレクト<br/>or エラー表示 |
|  【イベント】<br/>登録ボタンをClick | 登録/編集完了画面へ | - | - | - |
|  【イベント】<br/>戻るボタンをClick | ●●登録/編集画面へ | - | - | - |
　
* <strong>●●登録/編集完了画面</strong>

|   | 【状態】<br/>登録/編集権限があるユーザでログインし、<br/>●●登録/編集確認画面を経由 | 【状態】<br/>登録/編集権限があるユーザでログインし、<br/>●●登録/編集完了画面を直アクセス | 【状態】<br/>登録権限がないユーザでログインし、<br/>●●登録/編集完了画面を直アクセス | 【状態】<br/>未ログイン |
| --- | --- | --- | --- | --- |
|  【イベント】<br/>●●登録/編集完了画面へアクセス | ●●登録完了画面表示 | ●●画面へリダイレクト<br/>or エラー表示 | ●●画面へリダイレクト<br/>or エラー表示 | Top Pageへリダイレクト<br/>or エラー表示 |
|  【イベント】<br/>サイトLogoをClick | Top Pageへ | - | - | - |
|  【イベント】<br/>My PageリンクをClick | My Pageへ | - | - | - |
　
* <strong>●●検索画面</strong>

|   | 【状態】<br/>検索実行前 | 【状態】<br/>検索実行後(検索結果あり) | 【状態】<br/>検索実行後(検索結果なし) |
| --- | --- | --- | --- |
|  【イベント】<br/>完全一致の条件で検索実行 | 完全一致の検索結果が表示 | 再建策され、完全一致の検索結果が表示 | 再建策され、完全一致の検索結果が表示 |
|  【イベント】<br/>部分一致の条件で検索実行 | 部分一致の検索結果が表示 | 再建策され、部分一致の検索結果が表示 | 再建策され、部分一致の検索結果が表示 |
|  【イベント】<br/>AND検索の条件で検索実行 | ANDの条件に一致した検索結果が表示 | 再建策され、ANDの条件に一致した検索結果が表示 | 再建策され、ANDの条件に一致した検索結果が表示 |
|  【イベント】<br/>OR検索の条件で検索実行 | ORの条件に一致した検索結果が表示 | 再建策され、ORの条件に一致した検索結果が表示 | 再建策され、ORの条件に一致した検索結果が表示 |
|  【イベント】<br/>検索キーワード入力フィールドに任意の値を入力 | キーワード候補が表示 | キーワード候補が表示 | キーワード候補が表示 |
|  【イベント】<br/>検索がヒットしない条件で検索実行 | 検索結果がない旨が表示 | 検索結果がない旨が表示 | 検索結果がない旨が表示 |
|  【イベント】<br/>リセットボタンをClick | 検索対象一覧が表示 | 検索結果が消え、検索対象一覧が表示 | 検索対象一覧が表示 |


 

<h2>参考文献</h2>

* [第4回　「状態遷移図」と「状態遷移表」で見えるもの](https://gihyo.jp/dev/serial/01/test_up/0004)
* [状態遷移テストを3分で理解する](https://test-hack.com/%e7%8a%b6%e6%85%8b%e9%81%b7%e7%a7%bb%e3%83%86%e3%82%b9%e3%83%88%e3%82%923%e5%88%86%e3%81%a7%e7%90%86%e8%a7%a3%e3%81%99%e3%82%8b/)