Kantu Browser Automationのマクロ保存で作成されるスクリプト解説

19535 ワード
テストコード Selenium 自動テスト Selenium テキストリンク

昨日、こちらの記事にてKantu Browser Automationを使って自動テストのための画面操作を保存する方法を紹介しました。

今回は、その際に作成されるスクリプトの内容についてご説明します。

1. HTMLでの出力

作成したスクリプトは、HTMLとして作成されます。

以下の方法でHTMLに出力することができます。

旋回の記事（https://qiita.com/gevanni/items/6c0c2ae2f13b2345582f ）で作成した内容を出力すると、以下のようなHTMLとなります。
※　環境によって若干変動しますのでご注意ください。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="" />
<title>test</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">test</td></tr>
</thead><tbody>

      <tr>
        <td>open</td>
        <td>http://example.selenium.jp/reserveApp/</td>
        <td></td>
      </tr>


      <tr>
        <td>type</td>
        <td>id=reserve_day</td>
        <td>8</td>
      </tr>


      <tr>
        <td>type</td>
        <td>id=reserve_term</td>
        <td>2</td>
      </tr>


      <tr>
        <td>click</td>
        <td>id=breakfast_off</td>
        <td></td>
      </tr>


      <tr>
        <td>click</td>
        <td>id=plan_a</td>
        <td></td>
      </tr>


      <tr>
        <td>click</td>
        <td>id=plan_b</td>
        <td></td>
      </tr>


      <tr>
        <td>type</td>
        <td>id=guestname</td>
        <td>テスト太郎</td>
      </tr>


      <tr>
        <td>clickAndWait</td>
        <td>id=goto_next</td>
        <td></td>
      </tr>


      <tr>
        <td>clickAndWait</td>
        <td>id=commit</td>
        <td></td>
      </tr>

</tbody></table>
<script>
(function() {
  var isExtensionLoaded = function () {
    const $root = document.documentElement
    return !!$root && !!$root.getAttribute('data-kantu')
  }
  var increaseCountInUrl = function (max) {
    var url   = new URL(window.location.href)
    var count = 1 + (url.searchParams.get('reload') || 0)

    url.searchParams.set('reload', count)
    var nextUrl = url.toString()

    var shouldStop = count > max
    return [shouldStop, !shouldStop ? nextUrl : null]
  }
  var run = function () {
    try {
      var evt = new CustomEvent('kantuSaveAndRunMacro', { detail: { html: document.documentElement.outerHTML, storageMode: 'browser' } })

      window.dispatchEvent(evt)
      setInterval(() => window.dispatchEvent(evt), 1000);

      if (window.location.protocol === 'file:') {
        var onInvokeSuccess = function () {
          clearTimeout(timer)
          clearTimeout(reloadTimer)
          window.removeEventListener('kantuInvokeSuccess', onInvokeSuccess)
        }
        var timer = setTimeout(function () {
          alert('Error #203: It seems you need to turn on *Allow access to file URLs* for Kantu in your browser extension settings.')
        }, 8000)

        window.addEventListener('kantuInvokeSuccess', onInvokeSuccess)
      }
    } catch (e) {
      alert('Kantu Bookmarklet error: ' + e.toString());
    }
  }
  var reloadTimer = null
  var main = function () {
    if (isExtensionLoaded())  return run()

    var MAX_TRY   = 3
    var INTERVAL  = 1000
    var tuple     = increaseCountInUrl(MAX_TRY)

    if (tuple[0]) {
      return alert('Error #204: It seems Kantu is not installed yet - or you need to turn on *Allow access to file URLs* for Kantu in your browser extension settings.')
    } else {
      reloadTimer = setTimeout(function () {
        window.location.href = tuple[1]
      }, INTERVAL)
    }
  }

  main()
})();
</script>
</body>
</html>

この中の前半部分や、後半のJavascript部分は一旦無視して構いません。
真ん中あたりの<tbody＞タグで囲まれている部分が、自動テストのスクリプトとなります。

なお、HTMLで出力しなくても、以下のようにTable Viewタブを押下してもスクリプトの内容を参照できます。

3.コマンドの構造

Kantu Browser Automationで作成されるスクリプトは以下のような3つの構造に分かれます。

      <tr>
        <td>type</td>
        <td>id=guestname</td>
        <td>テスト太郎</td>
      </tr>

ブラウザで表示させたものの方が分かりやすいかもしれません。

3.1 Command

一つ目の要素はCommandを表します。
Commandの種類は次のセクションで紹介します。
上の例はTypeコマンドで、文字の入力等を行います。

3.2 Target

Commandの対象となる要素を指定します。
基本はIDやName属性による指定となります。

3.3 Value

入力する文字などを指定します。
Commandの種類によっては省略となります。
上の例では、Typeコマンドでguestnameに入力する文字列として「テスト太郎」を指定しています。

4.コマンドの種類

4.1 OPEN

targetで指定したURLを開きます。
下記の例では、「http://example.selenium.jp/reserveApp/ 」を開くスクリプトとなります。

      <tr>
        <td>open</td>
        <td>http://example.selenium.jp/reserveApp/</td>
        <td></td>
      </tr>

4.2 type

targetで指定した要素に対して、valueで指定した内容を入力します。
下記の例では、guestnameをidとして持つ要素に、「テスト太郎」を入力します。

      <tr>
        <td>type</td>
        <td>id=guestname</td>
        <td>テスト太郎</td>
      </tr>

4.3 click

targetで指定した要素をクリックします。
基本的にチェックボックスやラジオボタン等の要素に使用します。
ボタンやリンクでも使えますが、この場合は後述の「clickAndWait」を使用した方が良いです。

下記の例では、plan_aをidとして持つ要素（今回は「昼からチェックインプラン」のチェックボックス）をクリックします。

      <tr>
        <td>click</td>
        <td>id=plan_a</td>
        <td></td>
      </tr>

4.4 clickAndWait

こちらも指定した要素をクリックするスクリプトですが、クリック後に処理が終わるのを待ちます。
上記のclickスクリプトでは、クリック後すぐに次のスクリプトが走りますので、ボタンの処理や画面遷移に時間がかかった場合、完了前に次の処理が走ってしまうので不整合を起こします。
clickANdWaitであれば処理の終了を待ちますので、指定通りの順番で処理を実行させられます。

      <tr>
        <td>clickAndWait</td>
        <td>id=commit</td>
        <td></td>
      </tr>

他にも様々なコマンドがありますが、今回は基本の4つにとどめておきたいと思います。