Katalon Recoderによるブラウザ自動化シナリオを作ってみよう!

こんにちは。okometsubuです。

 

自動化が〜押ーし寄ーせーてーくる〜〜♪

 

ということで、社会は今!自動化の荒波にもまれようとしています!!

 

ちょっとボーッとしている内に第二、第三の自動運用ツール達がわんさか出て来てもう訳が分かりません。覚えた端から次々出て来てもう勉強したくないです。

私が嫌いな言葉は一番が「努力して勉強する」で二番目が「勉強をガンバル」なんだぜーッ!

 

そんなわけで以前紹介した、自宅で使えるブラウザプラグイン型のKatalon Recorderで楽しく遊びながら便利に使いましょの回です。自動で動く画面を見るのは楽しいのです。

  

okometsubulog.hatenablog.com

「Katalon Recorder」の何が良いかって、「バックグラウンドで勝手に動いてくれる」ことです!これ最高ですよ!

例えば、FireFoxで「Katalon Recorder」を起動させて自動化が始まります。その間、ゲームを始めてもいいですし、メールを読んでもいいです。マウスとキーボードを入力しても問題ありません。勝手にそれとは別で動いてくれるんです。

他のマクロだとマウスや座標を取られたりしますが、これはそういうのが無いのでとても使い勝手がいいです。私はFireFoxを専用のプロファイルを作成してKatalon専用として動かしています。

※ただ、私の環境だけかもしれませんが、FireFoxのウィンドウを最小化すると挙動が少し変になるので注意が必要。

 

FireFoxの別プロファイル作成は以下で実施しています。

 

okometsubulog.hatenablog.com

  

 そんなわけで、今回はちょっと戸惑った所を忘れないように覚えておくための記事です。私用です。今回やりたかったことはこちら

 

実装したい内容

  • 毎回動的に検索する内容を変えたい
  • リストアップした検索文字列を複数用意したい
  • 別ウィンドウで検索した結果をそれぞれ見れるようにしたい

というわけで、これを実現するためにまずは「CSV」ファイルを用意します。検索したい文字列を用意しておいてください。なんでもいいです。

 

f:id:okometsubu-blog:20190822222331j:plain

中身は適当です

 

ファイル名は適当に「test.csv」としておきましょうか。

1行目は変数名とお考え下さい。実際に使うのは2行目からとなります。つまり、1行目には検索したい文字列を入れずに半角英字を入れておくと良いでしょう。

 

では次に、Katalon Recordeを起動します。Firefoxのアドオンですでにインストールされている前提で話を進めます。導入はこちらから。Chrome版も検索すればすぐ出てきます。

Katalon Recorder (Selenium tests generator) – 🦊 Firefox (ja) 向け拡張機能を入手

 

それではテストケースを適当に作ります。名前は適当です。「SearchTest」で作りましょうか。

f:id:okometsubu-blog:20190824202519j:plain


 

今回やることは次の通りです。

  • Googleの検索で先程の「foo」と「bar」を半角スペース区切りで組み合わせて検索します
  • 1行の検索毎にウィンドウを分けて表示します

というわけで、雛形となるシナリオの作成をサッと作ってみましょう!

 

とりあえずのシナリオ作成

  • Record」ボタンを押す
  • https://www.google.co.jp/を開く
  • 何でもいいので検索する。今回は「hogehoge」とした
  • 一旦ここで「Stop」ボタンを押してシナリオを終了する

すると、次のような感じになると思います。

 

f:id:okometsubu-blog:20190822222746j:plain

録画したシナリオ

 

もしうまく行っていなくても、手で入れても問題ありません。そこがKatalonの強い所です。自分で作り直すことができます。

 

私がよくつまづくのが、URLを開いたのにシナリオに書かれないとき。上の画像の「open」行がそれに対応しているので、もし入っていなかったら手入力します。

 

それではこのシナリオを今回の目的に沿った形に修正していきましょう!

 

CSVファイルを読み込む

まずは「Katalon Recorder」にて先程作成した「test.csv」を読み込ませます。

画面下の「Data Driven」タブをクリックし、「Add CSV File」をクリックします。そして「test.csv」を選択してして準備完了です。これで、変数「foo」「bar」の変数配列がそれぞれ入った事になります。「foo」と「bar」は「test.csv」の1行目に書いたやつですね。変数名になります。

 

f:id:okometsubu-blog:20190822223044j:plain

test.csvがあればOK

 

続いて、先ほどのシナリオにて、この「test.csv」をロードします。「+」をクリックします。すると行が1行増えるので、以下を入力してください。

 

Command:loadVars

Target:test.csv

Value:空欄

 

その行を一番上に持ってきます。そして「+」をクリックして、一番最後の行に以下を追加します。

 

Command:endLoadVars

Target:空欄

Value:空欄

 

何をやったかというと、「loadVars」と「endLoadVars」の間のシナリオを要素数分でループするシナリオが完成したことになります。現状ですと、「test.csv」には5行の行が入っていますので(変数用の1行目を除く)、5回、google検索の"hogehoeg"を行って終了するシナリオが完成しました。

 

f:id:okometsubu-blog:20190822223841j:plain

 

実際にこの状態で「Start」を押すと分かりますが、これでは「hogehoge」を5回検索しただけのつまらない、静的なシナリオのままです。

 

f:id:okometsubu-blog:20190822224324j:plain

hogehogeが5回同じタブで開かれただけ

 

そこで、CSVファイルで用意した変数をKatalon上で使いたいと思います。シナリオに戻ってValueの部分が「hogehoge」となっている箇所があると思います。そうです。そこが検索文字列を入れる場所であることが分かります。

 

さて、その部分をこうしてみましょうか。

 

Command:type (タイピングの意味と思われる。入力する意味のはず。変更不要)

Target:name=q (Googleの検索枠の位置と思われる。変更不要)

Value${foo} ${var}

 

それではこの状態で「Play」を押したらどうなるでしょうか。実際に押してみると分かる通り、先ほどCSVで入力した値がGoogleで次々に検索され始めたではありませんか!!!

 

f:id:okometsubu-blog:20190822225021j:plain

最後の画面。"foo var"の結果が確認できます

つまり、要素数分ループして繰り返し同じシナリオを実施してくれたことになります。

 

しかしこれでは同じタブの中で検索が繰り返されてしまい、途中の検索結果があっという間に切り替わって途中の結果が分からないですよね?

 

というわけで、今から検索した結果を別ウィンドに開く方法を記載します。

なぜかこれが一番苦労したのでメモしたかった。

 

最初は「openWindow」で出来るかな?とおもったのですが、WindowIDが不明なことと、Valueに任意文字やBlank,nullを入れても動作しなかったことから諦めて、JavaScript経由で新しいウィンドウを立ち上げる形としました。

 

シナリオに戻って、「open」の行でgoogleのURLを開いていると思いますが、その行を以下のように修正します。

 

Command:runScript

Target:document.myWindow = window.open("https://www.google.com")

Value:空欄

 

 

これを実行すると、「新しいウィンドウ」でGoogleのホームページを開くシナリオになります!これはJavaScript文らしいので詳しい人はすぐわかるようです?

 

では次に、この「新しいウィンドウ」を選択する必要があります。なぜなら、次の行のシナリオは現在のウィンドウで動作するため、新しいウィンドウの窓で検索してくれないためです。

 

それを実現するためには、ちょっと寄り道が必要です。まずはこのループの回数を覚える変数を別途用意します。以下の行を追加してください。

 

Command:store

Target:1

Valuei

 

i」という変数に1を入れています。これを一番上、ループが始まる前においてください。できましたか?loadVarsの一つ上の行となりますね。

 

続いて以下の行をendLoadVarsの一つ上に追加してください。つまり、ループの最後に処理させます。

 

Command:storeEval

Target:${i}+1

Valuei

 

これで、ループの回数ごとにiが1つずつ増えていきます。何をやっているかというと、次の「新しいウィンドウ」を選択するために使います。

新しい行を追加して、以下を入力してください。

 

Command:selectWindow

Target:win_ser_${i}

Value:空欄

 

win_ser_${i}」でどのウィンドウを選択するかが決まります。最初に新しいウィンドウを作成したものが「win_ser_1」、次に開いたのが「win_ser_2」になります。そうして新しいウィンドウを選択した後に、検索したい文字列を検索する、というシナリオが完成します。ちなみに最初のアクティブなウィンドウは「win_ser_local」になります。更にちなみに選んだウィンドウを閉じたい場合は「close」コマンドで閉じたいウインドウ名を指定すればオーケーです。今回はやりません。

 

この行を先ほど作成した「runScript」の行の下に入れます。作成後にそのウィンドウを選択してもらいたいからです。これにて完成です!シナリオは以下のようになっているはずです。

 

f:id:okometsubu-blog:20190822231501j:plain

完成!!お疲れ様でした!!

 

実際に試してみた結果がこちら!

f:id:okometsubu-blog:20190822231811j:plain

実行結果

画像の大きさの関係で右側が端折られていますが、無事、タブ別に開けていることがなんとなーく分かって頂けると思います。

ここで注意点ですが、この「Katalon Recorder」というのは、最初のタブを何かしら用意しなくては正常に動かない可能性があります。もし何もなかったらKatalonのホームページを最初に起動してシナリオがスタートすることを覚えておきましょう。

 

そのため、一番左端のタブが「test」という適当に作ったタブが表示されていますね。このタブから検索結果を始めたい場合は、最初の検索結果の「Command」を「open」にしてGoogleホームページを開き、その後の構文で「if文~endif文」を用いて、条件を「i==1」の場合のみopenコマンドを実行するようにシナリオを作ってみてもいいかもしれませんね。

if i==1 なら open でgoogleを開いてelse なら今回のrunScriptを実行する形にすればいいでしょう。

 

そう、Katalonはwhile文やif文も使えますので、簡単なプログラムを作る感覚で使えます。Sampleが公式にありますので、そこで使い方を覚えてもいいかなと思いました。以下サンプルページ。

Samples | Katalon Docs

 

Katalonのテストシナリオを保存したい場合はCtrl+Sを押すことで保存可能です。「HTML」としてファイルが吐き出されます。読み込みたい場合はこのファイルを開くことで元に戻ります。また、HTML文なので、このファイルをエディタで開いて直接編集することも可能です。繰り返し作業の部分はその方が楽だったりします。

 

なお、このKatalonはSeleniumの上位互換的な位置づけのため、"Selenium IDE"でGoogle検索するともっと色々詳しく出てきます。ほぼ同じ使い方ができると思うので興味があればこちらで検索することをオススメします。Katalonはそれをフォークした別プロジェクトなので情報が若干少なめです。

一応KatalonのサイトでもSelenium IDEのコマンドが載っています。

Selenese (Selenium IDE) Commands Reference | Katalon Docs

 

ここにはif文の使い方とか載っていなかった(おそらくKatalon Studioとかに載っているけどうまく探せなかった)ので、以下の日本語サイトを参考にした方が手っ取り早かったです。以下株式会社セシオス様のサイトとなります。

Firefoxアドオンを使った簡易自動テストの応用編1(Katalon Recorder) | 株式会社セシオス

 

最後の注意点

その他の注意点として、このKatalonは「別タブ」だとうまく行かなかったので、もし、「新しいウィンドウ」ではなく「別タブ」で開きたい場合は別途Firefox側のタブを開く動作設定側を調整してみてください。私は特に修正することなく普通に「別タブ」で開いてくれたのでそのまま使っています。

 

実行中、新しいウィンドウを防止する「ポップアップブロック」が作動するかもしれません。問題が無ければ許可して頂ければと思います。これもFireFox側の設定でブロックされますので許可設定はFireFox側で対応可能です。ブロックが通知されると思うので、すぐ許可可能だと思います。

 

というわけで、Katalon Recorderによる動的検索方法についてでした。これで色々何かしらできそうだなと思っています。まだやってませんが、SMBC日興証券にログインして気になる銘柄をCSVにリストアップしておいて、それの在庫画面まで検索してウィンドウをずらっと並べるとかできそうです。

 

そこまでするならブラウザアドオンじゃなくてもっときちんとプログラム言語で使う「Katalon Studio」を使った方が良いかもしれません。ただ、ここまでくると時間がかかりそうなので私はここまでで満足します!

 

楽をするために苦労をし、苦労をし過ぎることに価値があるかどうかを見極めながら、今回はここまでといたします。

 

f:id:okometsubu-blog:20190822233321j:plain