皆さん、こんにちは。
今回も引き続き「Katalon Recorder」ツールの自動化について紹介したいと思います。
前回は、導入、各Menu紹介、レコード操作の紹介を行いました。
今回は以下の操作を含めたテストケースを組み立てを行っていきたいと思います。
「今回ご紹介する基本操作の紹介」
・ページ遷移
・要素の取得
・特定要素へのフォーカス
・クリック
・テキスト入力
・スクリーンキャプチャ
■テストケース設計の流れ
ではまず、テストケース設計の手順について述べていきます。
今回は、当ブログのテストページを基に、以下操作の自動化を行っていきたいと思います。
①当ブログのテストページ遷移
②テキストボックスへフォーカス、クリック、テキスト入力
③スクリーンキャプチャ
■テストスイート/テストケース作成
はじめに、テストケースを入れるテストスイートを作成します。
テストケースエクスプローラーの「+」からテストスートを作成し、「Test01」等名前を設定します。
その後、以下のステップに沿って、テスト設計を行っていきます。
■Step01：テストページ遷移のステップ作成
□Step1_1：テストケースの作成
テストケースを作成します。
画面上部のツールバーの「+New」ボタンを押して、テストケース名を入力します。
今回は「TestPage01_Test1」と入力しました。
テストケース名を入力すると、画面左側のテストケースエクスプローラーに表示されます。
一旦この状態で、保存します。
画面右下のその他のメニューの「保存ボタン」または、キーボードのCtrl+Sを選択し、名前を付けて保存します。
名前は任意で構いませんが、基本的に英数字でつけましょう。
ファイル形式は、HTMLとなります。
□Step01_2：テストステップの作成
テストケース詳細ビューの「+」を選択し、テストステップ作成します。
テストステップを選択し、Command項目の右側をクリックします。
すると膨大なコマンドリストが表示されます。
リストからコマンドを選ぶこともできますが、その場合は探すのに苦労します。
Command項目の右側は、テキストボックスも兼ねているので、「Open」と入力します。
すると、Openに関するコマンドに絞り込まれました。
今回は「Open」を選択します。
次に、「Target」欄に以下のURLを入力します。
https://susakiworks.com/softwareesting/testpage/test_page_no1/
一旦、保存します。
この状態で、テストステップの動作確認をしましょう。
事前に、Chromeブラウザで、新規タブを開いておいてください。
画面上部のツールバーから「Play」ボタンを選択します。
するとテストページNo1のページに遷移すると思います。
■Step02：テキストボックス要素へのフォーカス、テキスト入力ステップ作成
□Step2_1：forcusステップの設定
Step02として、テキストボックスにフォーカスします。
このフォーカスは、スクロール操作も兼ねています。
実は、Katalon Recorderのコマンドリストの中に、スクロール操作が含まれていません。。。
私なりに、コマンドリストを一通りチェックしましたが、該当するものが見当たりませんでした。
ちなみに、Katalon Recorderのコマンドリストは、以下ページに掲載されていますので、より詳しく確認したい方は、こちらをご確認頂ければと思います。
https://docs.katalon.com/katalon-recorder/docs/selenese-selenium-ide-commands-reference.html
スクロール操作の代用として、「focus」コマンドを設定します。
Step01と同様、テストケース詳細ビューの「+」を選択し、テストステップ作成します。
ステップを選択した後、Command項目の右側で、「fo」と入力するとリスト内に「focus」が表示されますので、それを選択します。
□Step2_2：テキスト要素の取得
「focus」コマンドを設定した後は、「Target」を設定します。
今回は、「TestPage01_Test1」ページの名前のテキストボックスをターゲットにしたいと思います。
まず、Chromeブラウザで、名前のテキストボックス部分を右クリックし、「検証」を選択します。
Chromeのデベロッパーモードに切り替わります。
デベロッパー表示の「Elements」タブをチェックすると、グレーでハイライトになっていると思います。
そこにマウスをあててみましょう。
すると、名前のテキストボックス部分がハイライト表示になります。
この部分が名前のテキストボックス要素を示します。
この要素は、主にID、name、xpathなどを確認することができます。
要素の取得や詳細情報については、別途解説の機会を設けたいと思います。
今回は、名前のテキストボックス要素の「name=”namae”」を使いたいと思います。
Katalon Recorderに戻り、focusコマンドのTarget欄にダブルクオーテーションを取り除いて、「name=namae」を入力します。
この設定では、名前のテキストボックスにフォーカスをあてる操作（名前テキストボックスまでスクロール操作を行う）となります。
ここまで設定した内容は以下となります。
この状態で、「Play」ボタンを選択し、再生してみましょう。
「TestPage01_Test1」ページに遷移し、名前テキストボックスにフォーカスがあたったと思います。
□Step2_3：テキスト入力ステップの設定
名前テキストボックスにフォーカスをあてることができました。
次は、このテキストボックスに、テキストを入力してみましょう。
今回は「type」コマンドを使いたいと思います。
「+」ボタンで新しくステップを作成し、Commandのテキストボックスに「ty」と入力すると「type」が候補として表示されますので、それを選びます。
その後、Target欄に、「focus」と同様に「name=namae」を入力します。
月に、「Value」項目に、名前テキストボックスに入力したいテキストを入力します。
私の場合、以下のように設定しました。
この状態で、「Play」ボタンを押して、確認してみましょう。
以下のように入力されたと思います。
■Step3：Click/SendKeysによるテキスト入力ステップの設定
今回は、クリック操作、typeとは異なるテキスト入力を設定します。
□Step3_1:Clickステップの設定
Command「Click」についてですが、こちらはWebサイトの自動テストにおいて頻繁に使われるコマンドと思います。
こちらの操作で、URLリンクなどの項目選択、ラジオボタン、チェックボックスなどの要素の操作も可能となっています。
本ステップでは、「ニックネーム」のテキストボックスをクリックし、その後テキスト入力を行いたいと思います。
Katalon Recorderで、「+」ボタンを押して、新しいステップを作成します。
Commandのテキストボックスに、「click」と入力して設定します。
Targetは、Step2_2のように、「ニックネーム」のテキストボックスを右クリック後、「検証」を選択して、要素を確認します。
デベロッパーツールの表示を確認すると、名前のテキストボックスと同様に「name=”nickname”」となっていることが確認できます。
よって、設定内容は以下のようになると思います。
□Step3_2:SendKeysステップの設定
名前のテキストボックスは、「type」コマンドで行いましたが、今回は「SendKeys」を使用します。
Katalon Recorderで、「+」ボタンを押して、新しいステップを作成します。
Commandのテキストボックスで「send」と入力すると、候補に「SendKeys」が表示されるので、それを設定します。
Targetは、Step3_1で取得した「name=nickname」を設定します。
次に、Valueは任意にテキストを設定してみてください。
設定が終わったら、「Play」ボタンを押して確認してみましょう。
以下のような結果になったら、OKです。
可能であれば、「今日の日付を入力してください。」の欄にも、テキストを入力してみましょう。
私の場合、以下のようにテキストが入力されました。
■Step4：スクリーンキャプチャステップの設定
今回の最後のステップとして、テキスト入力した項目のチェックとして、スクリーンキャプチャを行いましょう。
□Step4_1：スクリーンキャプチャ設定
Katalon Recorderで、「+」ボタンを押して、新しいステップを作成します。
Commandのテキストボックスで、「cap」と入力すると、「captureEntirePageScreenshot」と表示されるので、それを設定します。
この状態で、「Play」ボタンを選択して、確認してみましょう。
一通りのテストステップが終了すると、Katalon Recorderのフッターメニューの「Log」または「Screenshots」にキャプチャ画像が表示されます。
□Step4_2スクリーンキャプチャの確認
スクリーンキャプチャは、「Log」または「Screenshots」の画像を選択すると画像保存されます。
取得した画像を確認してみましょう。
また最後に、忘れないように、テストケースを保存しておきましょう。
今回作成したテストケースはこちらにアップしていますので、サンプルとしてダウンロードし、活用していただければと思います。
https://susakiworks.com/wp-content/uploads/2020/08/Test01.zip
（上記サンプルファイルの利用方法）
①サンプルファイルをダウンロード
②Katalon RecorderのTestSuitesの「+」ボタンから、Test01.htmlファイルを読み込み
■最後に
如何でしたでしょうか。
今回は基本となるページ遷移、フォーカス、クリック、テキスト入力、スクリーンキャプチャの操作を紹介いたしました。
簡単ではありますが、これらの機能で、サイトページを繰り返しチェックなどのリグレッションテストなどで使えるものと思います。
良かったら、試してみてください。
最後まで、読んで頂きまして、ありがとうございました。
Selenium実践入門 ――自動化による継続的なブラウザテスト WEB+DB PRESS plus
