【Katalon Recorder】でマウス操作（ダブルクリック、マウスオーバー、ドラッグ&ドロップ）をやってみよう⑤

2020年8月24日2026年6月19日

皆さん、こんにちは。
今回は「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が設定されていることを確認します。