多くのアプリケーションには、ユーザーがページ上でエレメントを配置できるように、ドラッグアンドドロップ機能が含まれています。mabl Trainerでは、アプリケーションが期待どおりに動作することを確認するために、ドラッグアンドドロップ操作をテストステップとして記録することができます。
この記事では、次の方法について説明します。
mabl Trainerでのドラッグアンドドロップアクションの取得
ドラッグアンドドロップステップの記録
[Rec] ボタンをオンにして、移動の必要なエレメントをドロップ先の領域までドラッグします。mabl Trainerは、この操作を次の2つのステップとして自動的に記録します。
- ドラッグ対象エレメントの「クリックアンドホールド」ステップ
- ドロップターゲットの「リリース」ステップ
Trainerがこれらのステップを記録するには、ドラッグアンドドロップアクションが0.5秒以上続き、ドラッグ対象エレメントが20ピクセル以上移動する必要があります。
mabl Trainerは、クリックアンドドラッグアクションをサポートしていません。クリックアンドドラッグには、エレメントとオフセット (座標など) が必要です。クリックアンドドラッグアクションの例として、ある位置から別の位置へのスライダーの移動、テキストボックスのサイズ変更、フレーム内の画像をドラッグして特定の部分を表示する操作などがあります。
ドラッグアンドドロップアクションが <svg>
エレメントを操作する場合、mabl Trainerは <path>
エレメント内の特定の座標を操作することはできません。
ドラッグアンドドロップステップのトラブルシューティング
Trainerでの再生やテスト実行中にドラッグアンドドロップステップが期待どおりに動作しない場合は、次の変更のいずれかを検討してください。
ターゲットエレメントの更新
ドラッグアンドドロップステップでドラッグ対象エレメントまたはドロップターゲットが正しくターゲットにされない場合は、次のいずれかの方法でターゲットエレメントの更新を試みてください。
- クリックステップの変換: ドラッグ対象エレメントとドロップターゲットで行われる2回のクリックステップを記録します。どちらのクリックステップについても、まずステップにカーソルを合わせ、編集用の鉛筆アイコンをクリックします。一方のステップではアクションを [Click and hold] に、もう一方のステップではアクションを [Release] に更新します。
[Click] ステップを [Click and hold] ステップに変換
- Configure Find: 類似エレメントがページ上に複数ある場合は、[Configure Find] を追加して、ターゲットエレメントの固有の属性を指定します。
- CSSまたはXPathの使用: [Configure Find] を使用して正しいエレメントをターゲットにすることができない場合は、CSSまたはXPathを使用して [Click and hold] ステップと [Release] ステップのカスタム検索ステップを作成します。
マウス移動イベントの数の更新
[Release] ステップが期待どおりに動作しない場合は、マウス移動イベントの数を増やすことを検討してください。マウス移動イベントは、ドラッグ対象エレメントがドロップターゲットに向かってどの程度スムーズに移動するかを制御するイベントであり、一部のアプリケーションにとっては重要です。
- 「リリースステップ」にカーソルを合わせます。
- 編集用の鉛筆アイコンをクリックします。
- [Use HTML5 drag and drop API] チェックボックスが解除されていることを確認します。
- マウス移動イベントの数を変更します。マウス移動イベントの中間ステップの数を増やすと、マウス移動を「スムーズ」にすることができます。
[Release] ステップのマウス移動イベント数の更新
HTML5ドラッグアンドドロップAPI設定の変更
mabl Trainerは、アプリケーションのドラッグアンドドロップアクションをシミュレートするWebイベントを自動的に検出します。実行中のドラッグアンドドロップステップにまったく効果が見られない場合は、HTML5設定の変更を試みてください。[Click and hold] ステップと [Release] ステップの両方で、次の手順を実行します。
- ステップにカーソルを合わせます。
- 編集用の鉛筆アイコンをクリックします。
- HTML5設定を更新します。
- HTML5のドラッグアンドドロップイベントを使用するには、この設定を選択します。
- マウスとポインターのイベントを使用するには、この設定の選択を解除します。
HTML5のドラッグアンドドロップAPIを使用するように設定された [Click and hold] ステップ