本記事はベリサーブ Advent Calendar 2021のカレンダー | Advent Calendar 2021 - Qiitaの8日目です。

前日は@Toru-ymgc さんの[UI Automation PowerShell ExtensionsとPesterを使って、電卓アプリのテストを自動化してみた]
(https://qiita.com/Toru-ymgc/items/701b734a5e53831a1a5b)でした。

今日はAutifyのJSステップとデータパターンを組み合わせてテストを作ってみたので、その方法をご紹介します。
Autifyはコーディング未経験者でも簡単にテストが作れますが、かゆいところに手を届かせようとするとJSステップを用いるのが良さそうです。
といっても、私はJSはほぼ未経験なので、とても簡単なテストになっています。
もっとこう書いたほうがいいよ、などがあればぜひ教えてください。

はじめに

環境について

Autifyを使用するには下記を準備する必要があります。

Autifyのユーザー
Google Chromeと拡張機能「Autify Recorder」

これらについては公式ページが詳しく書いていますので、ユーザー登録と環境セットアップをご確認いただくのが良いと思います。

また今回のテスト対象はHOTEL PLANISPHEREを使わせていただきます。
HOTEL PLANISPHEREはホテル予約サイトで、予約画面は下記になっています。

実装するテストケースとデータ

下記はざっくりした手順です。

お得な特典付きプランのこのプランで予約を押下する
宿泊日を設定
宿泊日数を設定
人数を設定
朝食バイキングを選択する/しない
名前を入力
確認の連絡を選択し、選択によっては連絡先を入力
予約内容を確認するを押下する
合計金額が入力項目に沿っているかを確認する

データは下記を準備しました。

Autifyでのテストの実装やデータの登録については以前Autifyでテスト自動化を試してみるで記載しましたので、不明な方はそちらをご参照ください。

今回は太字の部分をJSで実装していきます。
シナリオ全体はだいたいこんな感じになります。

実装

朝食バイキングを選択する/しない

データの朝食がありなら、追加プランの朝食バイキングにチェックを入れる。
（データの朝食がなしなら、なにもしない）

朝食.js

function(morning){
  /* 要素の取得 */
  var element  = document.getElementById('breakfast');

  /* データと値を比較して、一致すればチェック入れる */
  if (morning == "あり"){
    element.click();
  }
}

morningという引数にはデータの朝食から値をとってくるように設定をしています。
Autify上の画面だと下記のようになります。

確認の連絡を選択し、選択によっては連絡先を入力

確認.js

function(select_contact, adress, tell){
  /* 各要素の取得 */
  var contact  = document.getElementById('contact');
  var email = document.getElementById('email');
  var phonenumber = document.getElementById('tel');


  /* データとってきて、値と一致すればその値をプルダウンに入れる *
  * 電話番号やメールアドレスを入力 */
  if (select_contact == "希望しない"){
    contact.options[1].selected = true;
  }else if(select_contact == "メールでのご連絡"){
    contact.options[2].selected = true;
    email.value = adress;
  }else if(select_contact == "電話でのご連絡"){
    contact.options[3].selected = true;
    phonenumber.value = tell;
  }
}

select_contactにはデータの連絡から、addressにはデータのメールアドレスから、tellにはデータの電話番号から、値をとってくるように設定をしています。
Autify上の画面だと下記のようになります。

以上でテストを回せばパスするはずです！