皆さん、こんにちは。
今回は「Katalon Recorder」ツールで、マウス系操作の自動化を中心に紹介していきたいと思います。
・ダブルクリック：「doubleClick」コマンド
・マウスオーバー：「mouseOver」コマンド
・ドラッグ：「type」コマンド
・ドラッグ&ドロップ：「dragAndDropToObject」コマンド
上記確認用に、テストページを設けました。
以下ページをご自由に使っていただければと思います。
「記事内目次」
・テストシナリオの流れ
・Step0：テストページの遷移
・Step1：ダブルクリック操作
・Step2：マウスオーバー操作
・Step3：ドラッグ操作
・Step4：ドラッグ&ドロップ操作
■テストシナリオの流れ
今回のテストシナリオとして、以下の流れで自動テストを行っていきたいと思います。
・Step0：「TestPage_No2」へ遷移
・Step1：ダブルクリック操作
・Step2：マウスオーバー操作
・Step3：ドラッグ操作
・Step4：ドラッグ&ドロップ操作
まずは、「⊕New」ボタンからテストケースを新たに作りましょう。
今回は、「TestPage02_Test1」と名称を設定しました。
■Step0：テストページの遷移
まず、準備としまして、「TestPage_No2」へ遷移します。
テストステップを作成後、以下設定とします。
その後、以下を行います。
・トップメニューのスピードボタンで、スピードを半分ぐらいに調整します。
・Chromeタブを開いた状態にします。
「Play」ボタンで「TestPage_No2」へ遷移することを確認します。
■Step1：ダブルクリック操作
□Step1_1：ダブルクリック領域までスクロール
まず、ダブルクリック領域までスクロールしましょう。
スクロール用の要素を置ています。
「スクロール1」を右クリック、検証で、Nameを確認します。
Katalon Recorderの設定は以下となります。
「Play」ボタンで確認し、「ダブルクリック」付近へ遷移することを確認します。
□Step1_2：ダブルクリック操作
ダブルクリック操作では、「doubleClick」コマンドを使用します。
「ダブルクリックA」～「ダブルクリックC」のいずれかの要素をXPathで取得します。
Katalon Recorderの設定は以下となります。
「Play」ボタンを押して、確認してみましょう。
以下のように赤く変わればOKです。
■Step2：マウスオーバー操作
マウスオバーの操作は、「mouseOver」コマンドを設定し行います。
テストページで、マウスオーバーの項目にマウスカーソルを置くと、画像が黄色に変わります。
この項目を右クリック、検証から要素を確認します。
要素を確認すると、マウスオーバー時に、画像が切り替わるようになっています。
この要素をXPathでコピーし、Katalon Recorderのテストステップの設定を以下とします。
「Play」ボタンを押して、確認してみましょう。
以下のように表示が変わればOKです。
■Step3：ドラッグ操作
□Step3_1：ドラッグ領域の表示
ドラッグ領域を表示するため、Step1_1と同様に「スクロール2」を置いています。
Katalon Recorderで以下のように設定します。
□Step3_2：ドラッグ操作
ドラッグ操作では、「type」コマンドを使用します。
事前にドラッグ項目を確認してみましょう。
「スライダー」がデフォルトで「１」となっています。
右端に移動してみましょう。
「10」と表示されます。
このスライダーは、1～10の数値があり、数値を指定することで、ドラッグ操作を疑似的に行えます。
スライダー部分を右クリック、「検証」を選択し要素を確認します。
上記要素をXPathでコピーし、Katalon Recorderで以下のように設定します。
「Play」ボタンを押して、確認してみましょう。
ドラッグされていればOKです。
※注意
こちらの記事を作成中、スライダーの他の数値を設定した場合でも、すべてMAX値までドラッグされることを確認しました。
こちらは、Katalon Recorder側の不具合なのか、またはWordPress側の設定不足によるものなのか、別途確認したいと思います。
申し訳ありません。
■Step4：ドラッグ&ドロップ操作
□Step4_1：ドラッグ＆ドロップ領域、ページ遷移
ドラッグ&ドロップページに遷移するリンクを表示、クリック操作を行います。
操作設定は以下となります。
・Step1_1と同様に「スクロール３」を設置しており、こちらの要素を右クリック、検証を行い、Katalon Recorderで以下のように設定
・URLリンク要素を右クリック、検証を行い、Katalon Recorderで以下のように設定
・ページ遷移を行ったので、「pause」コマンドで、少し待つように設定
「Play」ボタンを押して、確認してみましょう。
以下ページに遷移できたら、OKです。
□Step4_2：ドラッグ＆ドロップ操作
ドラッグ&ドロップ操作では、「dragAndDropToObject」コマンドを使用します。
テストページでは、ドラッグするコンテンツ「Test01」～「Test03」を「Drop」エリアにドロップができます。
まず初めに、「Test01」の要素を確認します。
IDが設定されていることを確認します。
その後、Dropエリアも同様に、要素を確認し、IDが以下のように設定されていることを確認します。
ドラッグ側、ドロップ側のIDをそれぞれ確認後Katalon Recorderで以下のように設定ます。
Targetにドラッグする側のID、Value側にドロップする側のIDを設定します。
「Play」ボタンを押して、確認してみましょう。
以下のようにドロップされたら、OKです。
他の「Test02」「Test03」も同様に設定し、ドラッグ＆ドロップを行ってみましょう。
■サンプル
今回作成してテストケースは以下テキストファイル形式で用意していますので、コピー＆ペースト等で使用していただければと思います。
https://susakiworks.com/wp-content/uploads/2020/08/Testpage02_Test1.txt
■最後に
今回は、ダブルクリック、マウスオーバー、ドラッグ、ドラッグ&ドロップの操作について紹介いたしました。
これらはマウス操作としては、よく使うものと思いますので、是非、Webテストの自動化に役立てて頂ければ幸いです。
最後まで読んでいた気、ありがとうございました。
サイトトップへ
https://susakiworks.com/
Pythonでテスト自動化を実現しよう（pytest Jenkins Selenium 活用編）
