テスト自動化と聞くと、「プログラミングが必要で難しそう...」と感じていませんか？
実は、コードを一切書かずに、クリックやドラッグといった操作を記録するだけで本格的な自動テストが作れる時代になっています。本記事では、テスト自動化プラットフォーム「Testim」を使って、初心者でもすぐに始められる6つの実践的なテストシナリオをご紹介します。
この記事で学べること：
- ログイン機能の正常・異常系テスト
- ランダム値を使ったデータ駆動テスト
- 動的要素の検証テクニック
- ドラッグ&ドロップ操作のテスト
- チェックボックスの状態検証
- APIテストの基本
それぞれのテストには動画版と詳細な文字版の両方を用意していますので、自分のペースで学習を進められます。テスト自動化の世界への最初の一歩を、一緒に踏み出しましょう！
0.事前準備
(1) Testimアカウントの作成
Testimを使ったテスト自動化を始める前に、まずアカウントの作成とブラウザ拡張機能のインストールが必要です。Testim公式サイト（https://www.testim.io/） にアクセスし、「GET TESTIM FREE」ボタンをクリックしてメールアドレスで登録を行ってください。
(2)ブラウザ拡張機能のインストール
アカウント作成が完了したら、次にChromeウェブストアから「Testim Editor」という拡張機能をインストールします。この拡張機能は、ブラウザ上でテストの記録と再生を行うための必須ツールとなります。
下記の公式説明を参考にしてください
https://help.testim.io/docs/setting-up-your-account
1.テスト初体験
| 項目 | 内容 |
|---|---|
| テスト目的 | ログイン機能の正常動作確認 |
| テスト対象 | URL：https://the-internet.herokuapp.com/login 機能：ログイン認証 |
| テスト条件 | ユーザー名：tomsmith パスワード：SuperSecretPassword! 期待動作：ログイン成功後、セキュアエリア（/secure）へのリダイレクト 検証条件：「You logged into a secure area!」メッセージの表示確認 |
動画版
文字版
(1) 自動化テストプラットフォームのテストケース管理画面を示しています(下図参考)。「untitled test」の部分をクリックすると、現在のテストケースの名前を変更できます。
(2) 表示されたダイアログボックスで、テストケース名を再編集することができます(下図参考)。
(3) テストケース名の変更完了後、この赤い記録ボタンをクリックして、実際のテストステップの記録を開始できます(下図参考)。このボタンがテスト自動化の核となる記録機能のスタートポイントです。
(4) URL入力フィールドに「https://the-internet.herokuapp.com/login」
が設定されています。これがテストを実行する対象のWebアプリケーションのURLです(下図参考)。
(5) テスト対象のログインフォームが表示されており、ユーザー名フィールドに「tomsmith」、パスワードフィールドにマスクされたパスワード、そして「Login」ボタンが含まれています。この部分でのユーザー操作が自動的に記録されます(下図参考)。
(6) ログインテストの完了と成功を明確に示す、テスト自動化における重要な成果確認画面です(下図参考)。
(7) 次に、「M」をクリックして、テストの検証結果の条件を追加します(下図参考)。
(8) 「Validate element text」を選択し、検証対象要素とテキスト内容の指定します(下図参考)。
(9) テキスト内の特定文字列の存在をチェックする機能で、「You logged into a secure area!」のような成功メッセージが正しく表示されているかを確認することが可能です。
(10) 画面右上に赤い枠で囲まれた再生ボタン（三角形のアイコン）が表示されており、これをクリックすることでテストの実行を開始できます(下図参考)。
(11) テスト実行ボタンをクリックした結果、ブラウザが自動的に起動し、先ほど記録したテストステップの自動実行が開始されました。画面には緑色の成功メッセージ「You logged into a secure area!」が表示され、セキュアエリアページが正常に表示されています。
(12) 最終的に、画面上部中央に赤枠で囲まれた「Test Completed Successfully」という成功通知が表示され、テストが正常に完了したことが確認できます。
2.ランダム値生成
| 項目 | 内容 |
|---|---|
| テスト目的 | ログイン機能の異常系動作確認 |
| テスト対象 | URL：https://the-internet.herokuapp.com/login 機能：ログイン認証のバリデーション |
| テスト条件 | ユーザー名：randomValue変数（ランダム生成値：例「08da64531942」） パスワード：（設定なし/空白） 期待動作：ログイン失敗によるエラーメッセージの表示 検証条件：「Your username is invalid!」エラーメッセージの表示確認 |
動画版
文字版
(1) 前回の正常系テストと比較すると、今回は異常系のテストケースを作成します。画面中央に「EDIT NAME」ダイアログが表示されており、赤枠で囲まれたテキスト入力フィールドには「Login_Negative_RandomUser_ShowsError」という新しいテストケース名が入力されています(下図参考)。
(2) 異常系テストケース名の設定完了後、「START A NEW TEST」ダイアログが表示され、赤枠で囲まれたURL入力フィールドには前回と同じ「https://the-internet.herokuapp.com/login」 が設定されています
(3) 異常系テストの記録開始後、左側のMekuronパネルに「Predefined steps」メニューが表示され、「ACTIONS」セクションの中で赤枠で囲まれた「Generate random value」機能が選択されています。赤い矢印がこの機能を指しており、異常系テストに必要なランダムなテストデータを生成するための機能です。
(4) 生成されたランダムデータを格納するための変数として定義されています。この変数は次のステップである「4. Set 'Username'」で使用され、ログインフォームのユーザー名フィールドに無効な認証情報として入力される仕組みになっています。
(5) テストが進行し、右側のログインページのユーザー名フィールドに、赤枠で囲まれた「08da64531942」というランダムに生成された値が自動入力されています。これは先ほど設定した「randomValue」変数の値が実際にフォームに適用された状態を示しています。
(6) ページの上部には赤いエラーメッセージが表示されており、「Your username is invalid!」という内容でユーザー名が無効であることを示しています。
3.条件制御
| 項目 | 内容 |
|---|---|
| テスト目的 | 動的要素の追加・削除機能の動作確認 |
| テスト対象 | URL：https://the-internet.herokuapp.com/add_remove_elements/ 機能：要素の動的生成と削除のテスト |
| テスト条件 | 操作手順：「Add Element」ボタンクリック→Deleteボタンの動的生成 検証項目：生成されたDelete要素の存在確認 可視性検証：Element visibilityオプションによる表示状態確認 テキスト検証：「Validate element text」による「Delete」文字列の検証 非表示検証：「Not visible」設定による要素の非表示状態確認 |
| 期待結果 | 「Add Element」クリック後にDeleteボタンが正常に生成される 生成されたDelete要素が画面上で確実に表示される 要素のテキスト内容が「Delete」として正確に表示される 条件制御により要素の表示・非表示が期待通りに動作する |
動画版
文字版
(1) テストページ（https://the-internet.herokuapp.com/add_remove_elements/
）でテスト手順を録制している状況を示しています。現在実行中のテスト手順では、まず「Add Element」ボタンをクリックして動的にDeleteボタンを生成し、その後生成されたボタンの存在を確認しています。
(2) テスト録制が進行中で、右側のPropertiesパネルではElement visibilityオプションを選択することにより、テスト実行時に対象要素が画面上で実際に表示されているかどうかを検証する条件を追加できます。
(3) 画面の中央部分では、先ほどの「Add Element」ボタンクリック操作によって動的に生成された「Delete」ボタンが表示されており、このDelete要素の選択により、次のテストステップとしてこのボタンに対する操作（クリック、存在確認、テキスト検証など）を録制できる状態になっています。
(4) 右側のPropertiesパネルでは、「Not visible」設定を選択することにより、このDelete要素が特定の条件下で非表示状態になることを検証するテスト条件が設定され、テスト実行時にこの要素の可視性状態が期待通りに変化するかどうかを確認できるようになります。
(5) 「Validate element text」を検証手段として選択し追加することにより、Delete要素のテキスト内容（この場合は「Delete」という文字列）を検証するステップが追加され、要素の可視性チェックと併せてより包括的なテスト検証が可能になります。
(6) 実際のテスト実行において条件制御を通じてDeleteボタンが正常に表示され、期待通りの効果が達成されたことが確認できます。
(7) 最終的に、画面上部中央に赤枠で囲まれた「Test Completed Successfully」という成功通知が表示され、テストが正常に完了したことが確認できます。
4.ドラッグ&ドロップ
| 項目 | 内容 |
|---|---|
| テスト目的 | 水平スライダーのドラッグ&ドロップ機能の動作確認 |
| テスト対象 | URL：https://the-internet.herokuapp.com/horizontal_slider 機能：スライダーのドラッグ操作テスト |
| テスト条件 | 初期値：スライダー値「0.5」の確認 操作手順：スライダーを右方向にドラッグして値を変更 目標値：「0.5」から「3」への値変更 対象要素：HTML上に表示される数値部分の選択と確認 |
| 期待結果 | 値変化の検証が自動的に実行され、期待通りの結果を確認できる |
動画版
文字版
(1) 記録画面では水平スライダーのテストページが表示されており、現在のスライダー値が「0.5」と表示されています。
(2) 初期値0.5から目標値3への変更を行うことで、ドラッグ操作の効果を確認します。スライダーを右方向にドラッグすることで値が増加し、0.5から3に変化する過程をTestimが記録し、この値変化を検証結果として確認できるようになります。
(3) 「Validate element text」アクションの選択により、先ほど設定したスライダーの値変更（0.5から3への変更）を検証するテストステップが追加され、ドラッグ操作の実行結果として期待される値が正確に表示されているかどうかを自動的に確認できるテストケースが完成します。
(4) テスト検証において、HTML上に表示されている「0.5」の値部分を選択することで、スライダー操作後の値変化を確認する検証対象として設定できます。
(5) この状況は、先ほどの初期値「0.5」から「3」への値変更が正常に完了したことを示しており、ドラッグ&ドロップ機能のテスト結果として期待通りの値変化が実現されていることが確認できます。
(6) 画面上部中央に赤枠で囲まれた「Test Completed Successfully」という成功通知が表示され、テストが正常に完了したことが確認できます。
5.チェックボックスのテスト
| 項目 | 内容 |
|---|---|
| テスト目的 | チェックボックスの状態検証機能の動作確認 |
| テスト対象 | URL：https://the-internet.herokuapp.com/checkboxes 機能：チェックボックスの状態変更と検証テスト |
| テスト条件 | 対象要素：「checkbox 1」と「checkbox 2」の2つのチェックボックス 操作手順：「Validate checkbox」検証ステップの選択 期待状態：「checkbox 2」を「Unchecked」（チェックなし）として設定 |
| 期待結果 | checkbox 2が未チェック状態であることを自動的に判定される |
動画版
文字版
(1) テスト対象として「https://the-internet.herokuapp.com/checkboxes」 ページが設定されており、「checkbox 1」と「checkbox 2」という2つのチェックボックス要素に対する操作をテストしています。
(2) 「M」ボタンを選択します。
(3) 「Validate checkbox」検証ステップを選択します。
(4) checkbox 2のHTML検証部分を選択することにより、このチェックボックス要素の詳細な属性情報、現在のチェック状態（checked/unchecked）、input要素のvalue値、DOM階層における位置情報などを検証ポイントとして設定できるようになります。
(5) 「checkbox 2」が検証対象として選択されており、その期待される状態として「Unchecked」（チェックなし）が設定されていることが確認できます。この設定により、テスト実行時に該当のチェックボックスが未チェック状態であるかどうかを自動的に判定し、期待通りの状態でない場合はテスト失敗として報告される仕組みになっています。
(6) 画面上部中央に赤枠で囲まれた「Test Completed Successfully」という成功通知が表示され、テストが正常に完了したことが確認できます。
6.API テスト
| 項目 | 内容 |
|---|---|
| テスト目的 | APIレスポンスデータの検証機能の動作確認 |
| テスト対象 | URL：https://jsonplaceholder.typicode.com/todos/1 機能：REST APIのGETリクエストとレスポンス検証テスト |
| テスト条件 | リクエストメソッド：GET 検証対象：レスポンスボディのuserIdフィールドの値確認 |
| 期待結果 | レスポンスボディのuserIdが1と等しいことを自動的に判定される |
動画版
文字版
(1) 「M」ボタンを選択します。
(2) 「Validate API」を選択します。
(3) 画面上部にはTestim EditorのAPIテストインターフェースが表示されており、URL入力欄には「https://jsonplaceholder.typicode.com/todos/1」 を入力します。「Send」ボタンをクリックした結果として、画面下部にはレスポンス情報が表示されており、ステータスコード200 OK（成功）が確認できます。
(4) 中央部分には、APIテストの検証ロジックを定義するコードエディタが表示されており、以下のコードスニペットを検証部分に入力することで、APIテストの検証ロジックを完成させることができます。
if (responseBody.userId == 1)
return true;
このコードにより、JSONPlaceholder APIから返されるレスポンスのuserIdフィールドが1と等しい場合にテストを成功として判定し、APIテストの自動化検証が完成します。
(5) 画面上部中央に赤枠で囲まれた「Test Completed Successfully」という成功通知が表示され、テストが正常に完了したことが確認できます。
おわりに
ここまで、Testimを使った6つの実践的なテスト自動化シナリオをご紹介しました。
本記事のポイントをおさらいすると：
- ログイン機能のテスト - 基本的な記録と再生の流れを理解
- ランダム値生成 - 異常系テストでのデータ駆動アプローチ
- 条件制御 - 動的要素の表示・非表示検証
- ドラッグ&ドロップ - UI操作の自動化テクニック
- チェックボックス検証 - フォーム要素の状態確認
- APIテスト - バックエンドとフロントエンドの統合テスト
テスト自動化は、最初の一歩を踏み出すのが最も重要です。本記事で紹介した手法は、すべてコーディング不要で実現できるものばかりです。まずは簡単なログインテストから始めて、徐々に複雑なシナリオにチャレンジしていくことをお勧めします。