目次

1. 準備
   1. インストール
   2. マニュアルの確認
   3. テスト対象の情報
2. 基本操作
   1. 記録・再生
   2. 検証
   3. 編集
3. AI による自動修復
   1. 原理
   2. アプリを変更して確認
4. 応用
   1. モジュール化
   2. 乱数入力
   3. 様々な検証
   4. スケジュール実行
   5. データ駆動テスト
   6. クロスプラットフォーム・テスト
   7. アプリ発行値の利用
   8. CI 連携 (情報確認のみ)

1. 準備

Mabl はテスト管理用のサーバーとテスト実施用のクライアントの２つで構成されます。サーバーは SaaS、クライアントは Chrome の拡張機能としてインストールします。

インターネット非公開アプリのテスト
インターネット非公開アプリでも記録と再生はできます。また、Mabl Linkという機能を使うことで、VPNでMablと接続することができます。

1-1. クライアントのインストール

Chrome の拡張機能Mabl Trainerをインストールしてください。

1-2. マニュアルの確認

1. Mabl サーバーにログインしてください
2. 画面右上の[?]アイコンをクリックすると、ドキュメントがあるので確認してください
3. 画面左下のアイコンをクリックすると、チャット画面が開きます。ここで検索するとドキュメントが表示され、さらに質問したければサポートにチャットで質問できます
4. Quick Start Video Guide

1-3. テスト対象の情報

今回のハンズオンでは、マークダウンでドキュメントを検索、登録、更新、削除するデモアプリを使用します。

http://18.179.129.23/
ID: email10@example.com ~ email50@example.com
password: password

※ID は何を使ってもかまいません。またサインアップしてもかまいません。

2. 基本操作

本日は、基本的にはQuick Start Video Guideのとおりに進めていきます

2-1. Setting up your first app

1. Mabl の Web ページにアクセスし、[Get Started Free]をクリックしてください
2. サインアップしてください
3. テスト対象は上記のとおり、environment や Website は任意に設定してください
4. journey 名は「regist a report」など任意に設定してください
5. 上記の ID/password でログインし、ログイン => レポートの登録 => ログアウトのフローを記録します
6. [Save]した後、[Close]します
7. plan 名は任意に設定してください

journey, plan
journey はテストケース、plan はテストスイートだと考えていただいてかまいません。plan の中に複数の journey を設定し、plan の単位でテストを実行します。

2-2. Adding assertions

ログインした後に画面右上に[Progress Report]というロゴが表示されることを検証します。

1. 画面左メニューの journey をクリックします
2. 2-1 で作成した journey をクリックします
3. 画面上の[Edit Steps]アイコンをクリックし、[Launch Trainer]をクリックします
4. ログインした直後まで再生します（Mabl Trainer 上の[Step forward]で一つずつ進めるか、対象ステップにマウスオーバーして[Play through here]する）
5. Mabl Trainer 左下の[Add assertion]アイコンをクリックします
6. テスト対象アプリの左上の[Progress Report]をクリックします
7. [Assertion type]を[equals]にし、[OK]をクリックします
8. 最後まで再生します
9. [Save]した後、[Close]します

再生して確認

1. 画面左メニューの plan をクリックします
2. 2-1 で作成した plan をクリックします
3. [Run Plan]をクリックして再生します

3. AI による自動修復

3-1. 原理

Mabl は記録するときに要素の id や class など様々な情報を保存し、複数の情報から最も操作対象に近い要素を AI が判定します。

3-2. アプリを変更して確認

これから、ログインした後、右下に表示されている[新しい Report]のボタンを変更します。

1. id, 2. class, 3. タグ, 4. 位置, 5. テキスト, 6. 見た目

をすべて変更しても、テストが壊れないことを確認してください。また、AI がどの情報をもとにテストを修復したのかを考えてみてください。

その他、２つ変更しています。AI がどこまで修復できるかについて少しご説明します。

4. 応用

残りの時間はQuick Start Video Guideから、気になる機能を試してみましょう。

Searching for dynamic elements

CSS セレクターを使用して要素を選択し、クリックやアサーションができます。

Using Variables

N 桁の数値のような乱数を入力値にできます。 ユーザー名など、同じ値を入力できない場合に利用する機能です。

Using re-usable flows

繰り返す処理をモジュール化し、再利用する機能です。

Replaying and editing journeys

一度記録した journey（テストケース）を再生し、更新する機能です。

Setting up plans

テスト実行計画の設定機能です。

Understanding plan analytics

テスト実行結果の確認方法です。

Adding and managing users

workspace とユーザー管理方法です。

Using cookies

Cookie を利用する機能です。

Insert Javascript

JavaScript を使って、任意の値を設定したり、任意のバリデーションを設定する機能です。

Data driven testing

同じユーザーフローを複数パターンのデータでテストする機能です。