カスタム検証とアクションの追加

プリセットのステップメニューに無い独自のアクションや検証を行いたい場合があります。Add custom validation ステップや Add custom action ステップを使うと、任意のパラメーターと JavaScript コードを入力するカスタムステップを作成できます。カスタムアクションは戻り値を返さずに記述し、カスタム検証は真偽値を返します。true を返すと検証は成功、false を返すと失敗になります（サンプルは後述）。

Add custom validation / Add custom action ステップの追加

検証やアクションの詳細に関わらず、手順は共通です。実際に記述するコードやパラメーターはユースケースに応じて変わります。以下に共通手順と、いくつかの例のコードとパラメーターを示します。 Add custom validation / Add custom action を追加するには:

1. 検証を追加したい位置の （矢印記号） にカーソルを合わせます。

アクションのオプションが表示されます。

2. "M"（Testim の事前定義ステップ）をクリックします。
   Predefined steps メニューが開きます。

3. Validations（または Actions）をクリックします。
   Validations（または Actions）メニューが展開されます。

4. Add custom validation（または Add custom action）を選択します。

Add Step ウィンドウが表示されます。

5. Name the new step にステップ名を入力します。
6. このステップを共有ステップとして再利用可能にする場合は Shared step をオンのままにし（既定）、Select shared step のフォルダーを選択します。共有しない場合はオフにします。
   共有ステップについては Groups を参照してください。
7. Create Step をクリックします。
   function エディターと右側の Properties パネルが開きます。

8. Properties パネルの Description に、必要ならステップの説明を入力します（既定: “Run validation” / “Run action”）。
9. ステップに必要なパラメーターを定義します。\

まず Properties パネルで + PARAMS をクリックします。次に JS parameter を追加する場合はドロップダウンを JS にして JavaScript パラメーターを入力します。最後に HTML parameter として HTML 要素を定義する場合はドロップダウンを HTML にします。ブラウザが開き、対象ページが表示されるので次を実施します：

• AUT ウィンドウで対象要素にマウスを合わせてクリックし、要素を選択します。選択要素は Properties の Target Element に表示されます。選択要素の確認・置き換え・設定調整は、Editing Target Element Properties を参照してください。

追加した要素は "param" または "element" といった既定名になります（JS/HTML の種別によって異なります）。編集アイコンから分かりやすい名前に変更してください。

10. 必要に応じて次を設定します：

• When this step fails – ステップ失敗時の動作を指定します。
• When to run step – ステップの実行条件を指定します（Conditions）。
• Override timeout – 既定のタイムアウト（ミリ秒）を上書きします。

11. function テキストボックスに JavaScript コードを記述します。定義したパラメーターはコードから参照できます。

12. 左上の戻る矢印でメインのエディターに戻ります。

ステップが作成されます。

カスタム検証 / アクションの例

数値の検証（Custom validation）

Add custom validation を使って、アプリ内の数値を検証します。次の例では、HTML 要素の数値が 1,000 未満であることを確認します。まず文字列から非数値文字を取り除き、数値に変換しています。

Example Code:

// Remove  string chars (e.g "$") and turn the price label to a number:
var amount = Number(amountLabel.innerText.replace(/[^\-0-9\.]+/g, ''));

// Validate if the number is bigger than 1000:
if (amount > 1000) {
  throw new Error('Amount should not be over 1000! Actual value: ' + amount);
} else {
  return true;
}

Example Parameters:

テキスト要素の比較（Custom validation）

2 つの要素のテキストを比較する例です。innerText が等しければパスし、異なる場合は失敗します。

Example Code:

var equal = firstLabel.innerText === secondLabel.innerText;

if (!equal) {
  throw new Error(
    'Labels are not equal. First label: ' +
      firstLabel.innerText +
      ' Second label: ' +
      secondLabel.innerText
  );
}

return equal;

Example Parameters:

Promise による非同期検証（Custom validation）

JavaScript の Promise を使うと、一定時間（ミリ秒）後に resolve / reject するコードを記述できます。真なら resolve されステップはパス、偽なら reject され失敗になります。以下は概念説明のためのシンプルな例（パラメーターは使用しません）。（10 秒後にパスします）

Example Code:

return new Promise(function (resolve, reject) {
  setTimeout(function () {
    if (7 === 7) {
      resolve();
    } else {
      reject('');
    }
  }, 10000);
});

別サイトへの遷移（Custom action）

Add custom action を使って、テストのベース URL から Testim のホームページに遷移する例です。パラメーターは使用しません。

Example Code:

window.location.href = 'https://testim.io/';

同期検証の成功/失敗例

成功例

// This  validation will always succeed.
return true;

// This validation will always succeed.
return 5 === 5;

失敗例

// This validation will always fail after it times out.
return 5 === 6;

// This validation will always fail after it times out.
throw new Error('Validation failed!!!');

ステップが失敗すると、エラーは result パネルと Properties パネルに表示されます（下図）。