皆さん、こんにちは。
今回も、引き続きKatalon Recorderの基本操作を紹介していきたいと思います。
今回紹介する基本操作は、こちらとなります。
・ラジオボタンへフォーカス、クリック（前回の復習）
・XPathによる要素の指定
・チェックボックス操作（check、uncheck）
・プルダウン選択(Select)
上記操作についても、以下テストページで確認できますので、ご自由に使っていただければと思います。
前回と同様、テストケースを作成し、各操作コマンドを設定しテストステップを組み立てていきましょう。
「記事内目次」
・Step01：テストケースの作成、ブラウザ遷移表示
・Step02：クリック操作のテストステップ作成
・Step03：チェック操作のテストステップ作成
・Step04：プルダウン選択のテストステップ作成
■Step01：新しくテストケースの作成、テストページの表示
□Step01_1：テストケースの作成
まず新しいテストケースを作成します。
テストスイートは、前回作成したものを使用する、または新規に作成しても問題ありません。
画面上のツールバーの「⊕New」ボタンからテストケースを作成します。
今回は、以下図のように、「TestPage01_Test2」と設定しました。
□Step01_2：テストページの表示
新規にテストケースを作成しましたので、テストページに遷移する必要があります。
前回と同様に、Openコマンドを設定し、テストページに遷移します。
①テストケース詳細ビューの「+」を選択し、テストステップ作成します。
②「Command」のテキストボックスに「open」、「Target」に「https://susakiworks.com/softwareesting/testpage/test_page_no1/」のURLを設定します。
③一旦保存し、画面右上トップメニューのスピードアイコンで、スピードを調整後、「Play」ボタンで再生します。
ブラウザが問題なく開き、テストページに遷移出来たらOKです。
■Step02：チェック操作（ラジオボタン）
テストケース作成後は、テストステップを作成していきます。
□Step02_1：チェック項目（ラジオボタン）の表示、ラジオボタンの選択
テストページでは、チェック項目の確認用に、ラジオボタン、チェックボックスを用意しています。
まずはラジオボタンの表示を行っていきましょう。
◇Step2_1_1：ラジオボタンの表示
テストページを確認すると、チェックボックスは、ページ中央あたりに表示されています。
チェックコマンドをそのまま設定することも可能ですが、表示画面の領域外でチェック操作が行われてしまいます。
まずは、ラジオボタンが画面内に表示されるように、操作しましょう。
そのためには、前回使用した「focus」コマンドを設定します。
「Command」設定
「＋」から新たにテストステップを作成し、「Command」のテキストボックスに「focus」を設定します。
「Target」設定
その後、ラジオボタンの「ノーコメント」部分を「Target」にしたいと思いますのでChromeブラウザで要素を取得します。
ノーコメントのラジオボタンを右クリックし、「検証」で要素を確認します。
要素を確認し、「Target」部分に「name=gender」を設定します。
「Value」設定
続いて、要素を確認すると「value=”nocoment”」と表記されていることがわかります。
よってValue項目には「nocoment」を設定します。
Katalon Recorder側の設定は以下となります。
一旦、この状態で、「Play」ボタンを選択し、再生してみましょう。
ラジオボタンのノーコメントあたりが表示されていればOKです。
◇Step2_1_2：ラジオボタンの選択
ラジオボタンの男性、女性のどちらかの項目を選択してみましょう。
「＋」で新しいテストステップを作成し、Commandのテキストボックスで「Click」を選択します。
次に、「Target」についてですが、「ノーコメント」と同様に、「name=gender」を設定してみます。
これで「Play」ボタンによる再生を行ってみましょう。
すると、どちらにもチェックが入りません。。。
これは、ラジオボタンのname要素が「ノーコメント」「男性」「女性」のそれぞれに設定されているため、Katalon Recorder側が判別できず、そのままノーコメントに再度選択するといった操作になっているようです。
上記改善方法として、「Target」の要素指定を変更してみましょう。
今回は、「男性」を選ぶように設定したいと思います。
「男性」の要素を確認してみましょう。
こちらの要素を右クリック⇒Copy⇒Copy XPathを選択します。
XPathをコピーしたら、「Target」欄にペーストしてみましょう。
以下内容が張られたと思います。
『//*[@id=”nocopy”]/div/form[3]/input[2]』
HTML上のID、Nameが不特定、または多数ある場合は、XPathによる指定が行えます。
設定内容は以下となりました。
この状態で、「Play」ボタンを選択し、確認してみましょう。
「男性」にチェックがついたと思います。
■Step3：チェック操作（チェックボックス）
次は、チェックボックスでのチェック操作を行いたいと思います。
□Step3_1：チェック
次は、チェックボックスを設定してみましょう。
新しいテストステップを設定し、Commandを「check」に設定します。
「Target」欄に、朝ごはんを「食べました！」または「食べていない」の要素を「検証」で確認し、XPathで指定します。
Katalon Recorderの設定は以下のようになります。
この状態で、一度「Play」ボタンを押して確認してみましょう。
以下のように、チェックされたと思います。
□Step3_2：アンチェック
チェックボックスには、チェックを解除するコマンドも用意されています。
新しいテストステップを設定し、Commandを「uncheck」に設定します。
「Target」欄に、Step3_1に設定したXPathの内容を設定します。
Katalon Recorderの設定は以下のようになります。
「Play」ボタンを選択して、確認してみましょう。
以下のように、チェックが外れていれば、OKとなります。
■Step4：プルダウン選択
今回の最後のステップとして、プルダウンの項目を選択してみましょう。
まずは、プルダウンの項目を表示し、その後プルダウン内の項目を選択します。
□Step4_1：プルダウン項目の画面表示
まずは、画面内にプルダウンが表示されるように設定しましょう。
Commandに「focus」を設定します。
Targetには、プルダウン項目の要素を「検証」で確認し、「name=”PullDown”」と表記されていることを確認します。
Katalon Recorderの設定内容は以下となります。
「Play」ボタンで、動作を確認してみましょう。
以下のように、プルダウン項目が表示されたらOKです。
□Step4_2：プルダウン項目の選択
次に、プルダウン項目のリストから任意の項目を選択します。
新しいテストステップを作成し、Commandに「select」を選択します。
Targetには、Step4_1で設定した内容と同様に「name=PullDown」を設定します。
最後に「Value」を設定します。
Chromeブラウザで、プルダウンの要素を右クリック⇒「検証」で再度確認してみます。
すると、以下のように、四季ごとにValueが設定されていることを確認できます。
好きな四季を選んでみましょう。
Katalon Recorderの設定は以下のようになります。
「Play」ボタンを押して、動作を確認してみましょう。
以下のように、プルダウン項目が選択されていればOKです。
■サンプル
今回の記事で紹介したテストステップ、テストケースのサンプルはこちらからダウンロードできます。
ご参考までにご確認頂ければと思います。
https://susakiworks.com/wp-content/uploads/2020/08/TestPage01_test2.txt
(追記）
HTML形式で保存したファイルを読み込ませたところ、空のテストスイートファイルとなっておりました。
申し訳ありません。
テキストファイルの各テストステップ、Target、Value情報をコピー＆ペーストで確認頂ければと思います。
■最後に
いかがでしたでしょうか。
今回は、前回に引き続き、基本操作となるXpathでの要素選択、チェック、プルダウン選択について紹介いたしました。
特にXPathの要素選択は、Katalon Recorderの他、今後ご紹介するテスト自動化ツール
・Katalon Studio
・Python Seleniumライブラリ
・Appium
以上でも使用できます。
様々なツールで利用度は高いと思いますので、しっかりと把握しておくとよいと思います。
最後まで読んで頂き、ありがとうございました。
