ドラッグアンドドロップインの方法 Selenium （例）
Krishna ルンタ
⚡ スマートサマリー
ドラッグアンドドロップ Selenium WebDriver を使用すると、マウス操作によるインタラクションを自動的にシミュレーションできます。これは、ソース要素を移動させ、指定されたターゲットにドロップする操作です。Actions クラスは、dragAndDrop メソッドと dragAndDropBy メソッドを通じてこれらのジェスチャーを駆動し、正確で再現性の高いブラウザ自動化を実現します。
ドラッグアンドドロップとは何ですか Selenium?
ドラッグアンドドロップ Selenium これは、ソース要素をクリックして長押しし、ページ上を移動させて、ターゲット位置で離すという動作をシミュレートする自動化された操作です。ファイルアップローダー、カンバンボード、ショップなど、ドラッグアンドドロップインターフェースに依存する最新のWebアプリケーションのテストに広く使用されています。ping カート、ダッシュボードビルダー。
In Selenium WebDriverでは、ドラッグアンドドロップは このクラスは、マウスのジェスチャーを連結して単一の複合アクションとして実行するための特殊なメソッドを提供します。
Actionsクラスは、ドラッグアンドドロップによる自動化のための2つの主要なメソッドを提供します。
構文：
Actions act = new Actions(driver);
//for drag and drop directly on an element
act.dragAndDrop(Source, Destination).build().perform();
//for drag and drop with pixel offsets
act.dragAndDropBy(WebElement Source, int xOffset, int yOffset).build().perform();ここでは、 dragAndDrop() ソースと宛先の WebElement を受け取り、 dragAndDropBy() ソース要素と、それを移動させるためのx/yピクセルオフセットを受け取ります。
ドラッグアンドドロップインの方法 Selenium
以下の 3 つのシナリオは、 Guru99 デモページ https://demo.guru99.com/test/drag_drop.html目標は、 バンク 借方要素を アカウント 借方側の領域で、5000ドルの金額が正しく借方取引として計上されるようにします。
シナリオ1：dragAndDropメソッドを使用したドラッグアンドドロップ
このシナリオでは、ソース要素（BANK）を、 dragAndDrop(source, target) ソースおよび宛先の WebElement を直接受け取るメソッド。
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;
public class DragAndDropExample {
public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("https://demo.guru99.com/test/drag_drop.html");
// Locate the source (BANK) element
WebElement Source = driver.findElement(By.xpath("//*[@id='credit2']/a"));
// Locate the target (Account debit side) element
WebElement Dest = driver.findElement(By.xpath("//*[@id='bank']/li"));
// Create the Actions instance
Actions act = new Actions(driver);
// Perform drag and drop
act.dragAndDrop(Source, Dest).build().perform();
}
}スクリプトが実行された後、 バンク タイルが移動して アカウント デビット欄に5000ドルがデビットとして登録されます。
デモページ上の視覚的な結果は次のようになります。
シナリオ2：dragAndDropByメソッドを使用したドラッグアンドドロップ
その dragAndDropBy(source, xOffset, yOffset) この方法はピクセルレベルの精度を提供します。ping 対象要素上で、ソース要素をX軸とY軸に沿って指定されたピクセル数だけ移動させます。
オフセットを決定するには、ブラウザで目的の領域にカーソルを合わせ、インスペクターの定規や画面座標拡張機能などのツールを使用してピクセル座標を読み取ります。
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;
public class DragAndDropByExample {
public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("https://demo.guru99.com/test/drag_drop.html");
// Locate the source (BANK) element
WebElement Source = driver.findElement(By.xpath("//*[@id='credit2']/a"));
// Create the Actions instance
Actions act = new Actions(driver);
// Drag the source by 400 pixels right and 0 pixels down
act.dragAndDropBy(Source, 400, 0).build().perform();
}
}このスクリプトは、指定されたオフセット分だけBANKタイルを移動させ、口座の借方側に配置することで、シナリオ1と同じ財務結果を生成します。
シナリオ3：複数の要素をドラッグ、ドロップ、検証する
このシナリオでは、複数のドラッグアンドドロップ操作を連鎖させ、ターゲットの最終金額を検証することで結果を確認します。複数のソース要素（BANK、SALES、5000、500）がそれぞれの借方と貸方に移動され、スクリプトは合計金額が想定される残高と一致することを確認します。
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;
public class DragAndDropMultiple {
public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("https://demo.guru99.com/test/drag_drop.html");
// Locate sources
WebElement srcBank = driver.findElement(By.xpath("//*[@id='credit2']/a"));
WebElement srcSales = driver.findElement(By.xpath("//*[@id='credit1']/a"));
WebElement src5000 = driver.findElement(By.xpath("//*[@id='fourth']/a"));
WebElement src500 = driver.findElement(By.xpath("//*[@id='fourth']/a"));
// Locate targets
WebElement debitSide = driver.findElement(By.xpath("//*[@id='bank']/li"));
WebElement creditSide = driver.findElement(By.xpath("//*[@id='loan']/li"));
WebElement amount7 = driver.findElement(By.xpath("//*[@id='amt7']/li"));
WebElement amount8 = driver.findElement(By.xpath("//*[@id='amt8']/li"));
Actions act = new Actions(driver);
act.dragAndDrop(srcBank, debitSide).build().perform();
act.dragAndDrop(srcSales, creditSide).build().perform();
act.dragAndDrop(src5000, amount7).build().perform();
act.dragAndDrop(src500, amount8).build().perform();
// Verify the displayed total
String total = driver.findElement(By.xpath("//*[@id='totamt']")).getText();
if (total.equals("5500")) {
System.out.println("Test Passed: total matches expected 5500");
} else {
System.out.println("Test Failed: actual total " + total);
}
}
}このパターンは、ドラッグ＆ドロップとアサーションを組み合わせることで、視覚的な動きだけでなく、機能的な動作も検証できることを示しています。
ドラッグ＆ドロップ自動化のベストプラクティス
ドラッグアンドドロップテストは、最も不安定なスクリプトの1つです。 Selenium これらのスイートは、正確なマウス座標とDOMの準備状況に依存するため、信頼性が低い。以下の対策を講じることで、これらの信頼性を維持できる。
- 要素を待機する:
WebDriverWaitExpectedConditions.elementToBeClickableドラッグを呼び出す前に。 - ドラッグアンドドロップを優先する Javaスクリプトのハック： ネイティブ HTML5 ドラッグ イベントでは、 Javaスクリプトによるフォールバックも可能ですが、まずはActions APIを利用することをお勧めします。
- 対象物を画面にスクロール表示します。 画面外の宛先では、サイレントエラーが発生します。
Actions.scrollToElementまたは Javaドラッグする前にスクリプトをスクロールしてください。 - 結果を確認してください： アクションが実行されたと信頼するのではなく、ドロップ後に必ず測定可能な状態変化（テキスト、属性、カウント）を主張してください。
- 安定した解像度で実行してください。 ビューポートのサイズがオフセットの計算に使用されたサイズと異なる場合、ピクセルオフセットによるドラッグ操作は失敗します。
