このデモはmablの Visual Change Detection 機能を検証するためのサンプルページです。
各ページのソースコード先頭に FLAG 定数が定義されており、値を変更してビルド・デプロイすることで
画面の特定部分の表示が変化します。mablのビジュアルテストを実行し、変化が正しく検出されることを確認できます。
| FLAG 値 | 状態 | 内容 |
|---|---|---|
| 0 | ベースライン | 初期状態。mablのビジュアルベースラインとして登録する画面 |
| 1 | 機能追加 | 新機能リリース相当の変化。ステータスバッジ・追加フィールドが出現 |
| 2 | デグレード | バグによる表示崩れ相当の変化。ヘッダー色消失・フォームスタイル崩れ |
登録済みユーザーの一覧表示。FLAGによりステータス列・ロールバッジの有無が変化します。
新規ユーザー登録フォーム。FLAGにより入力フィールド数・パスワード強度メーターの有無が変化します。
users.html および register.html の先頭 const FLAG = 0; を確認し、
ベースライン状態でmablテストを記録してビジュアルスナップショットを取得する。
1（機能追加）または 2（デグレード）に変更してコミット・プッシュする。
0 に戻してデプロイし、ベースラインに復元する。