Cách kéo và thả vào Selenium (Thí dụ)
Krishna rừng ta
⚡ Tóm tắt thông minh
Kéo và thả vào Selenium WebDriver cho phép mô phỏng tự động các tương tác dựa trên chuột để di chuyển một phần tử nguồn và thả nó vào một mục tiêu được xác định. Lớp Actions hỗ trợ các thao tác này thông qua các phương thức dragAndDrop và dragAndDropBy để tự động hóa trình duyệt một cách chính xác và có thể lặp lại.
Chức năng kéo và thả là gì? Selenium?
Kéo và thả vào Selenium Đây là một tương tác tự động mô phỏng việc nhấp và giữ một phần tử nguồn, di chuyển nó trên trang và thả nó vào vị trí đích. Nó được sử dụng rộng rãi để kiểm thử các ứng dụng web hiện đại dựa trên giao diện kéo và thả, chẳng hạn như trình tải lên tập tin, bảng Kanban, cửa hàng trực tuyến.ping Giỏ hàng và công cụ xây dựng bảng điều khiển.
In Selenium WebDriver, thao tác kéo và thả được thực hiện thông qua... Hoạt động Lớp này cung cấp các phương thức chuyên biệt để kết hợp các cử chỉ chuột và thực thi chúng như một hành động tổng hợp duy nhất.
Lớp Actions cung cấp hai phương thức chính để tự động hóa thao tác kéo và thả:
Cú pháp:
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();Ở đây, dragAndDrop() lấy các WebElements nguồn và đích, trong khi dragAndDropBy() Nó nhận phần tử nguồn và độ lệch pixel x/y để di chuyển phần tử đó.
Cách kéo và thả vào Selenium
Ba tình huống sau đây minh họa việc tự động hóa bằng thao tác kéo và thả thực tế trên... GuruTrang demo 99 https://demo.guru99.com/test/drag_drop.htmlMục tiêu là di chuyển NGÂN HÀNG phần tử ghi nợ vào Tài khoản khu vực bên nợ để số tiền 5000 đô la được hạch toán chính xác là giao dịch ghi nợ.
Tình huống 1: Kéo và thả bằng phương thức dragAndDrop
Trong trường hợp này, phần tử nguồn (NGÂN HÀNG) được kéo đến phần tử đích (Bên ghi nợ tài khoản) bằng cách sử dụng dragAndDrop(source, target) phương thức này chấp nhận trực tiếp các WebElement nguồn và đích.
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();
}
}Sau khi kịch bản chạy xong, NGÂN HÀNG ô gạch di chuyển vào Tài khoản khu vực ghi nợ và số tiền 5000 đô la được ghi nhận là khoản ghi nợ.
Kết quả hiển thị trên trang demo trông như thế này:
Tình huống 2: Kéo và thả bằng phương thức dragAndDropBy
dragAndDropBy(source, xOffset, yOffset) Phương pháp này cung cấp độ chính xác ở cấp độ pixel. Thay vì bỏ quaping Trên một phần tử mục tiêu, nó di chuyển nguồn một số pixel nhất định dọc theo trục X và Y.
Để xác định độ lệch, hãy di chuột qua khu vực đích trong trình duyệt của bạn và đọc tọa độ pixel bằng một công cụ như thước kiểm tra hoặc tiện ích mở rộng tọa độ màn hình.
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();
}
}Đoạn mã này di chuyển ô BANK theo khoảng cách được cung cấp và đặt nó vào phía ghi nợ của Tài khoản, tạo ra kết quả tài chính tương tự như Kịch bản 1.
Tình huống 3: Kéo, thả và xác minh nhiều phần tử
Kịch bản này kết hợp nhiều thao tác kéo và thả, sau đó xác minh kết quả bằng cách khẳng định số tiền cuối cùng trên đích đến. Một số phần tử nguồn (BANK, SALES, 5000, 500) được di chuyển vào các vùng ghi nợ và ghi có tương ứng, và kịch bản xác nhận tổng số tiền khớp với số dư dự kiến.
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);
}
}
}Mô hình này minh họa cách kết hợp thao tác kéo thả với các khẳng định để xác thực hành vi chức năng, chứ không chỉ là chuyển động trực quan.
Các phương pháp tốt nhất cho tự động hóa kéo và thả
Các bài kiểm tra kéo và thả là một trong những loại kịch bản dễ gặp lỗi nhất. Selenium Bộ phần mềm này phụ thuộc vào tọa độ chuột chính xác và trạng thái sẵn sàng của DOM. Các biện pháp sau đây giúp đảm bảo độ tin cậy của chúng:
- Chờ đợi các yếu tố: Sử dụng
WebDriverWaitvớiExpectedConditions.elementToBeClickabletrước khi thực hiện thao tác kéo. - Tôi thích thao tác kéo và thả hơn. JavaThủ thuật chỉnh sửa mã nguồn: Các sự kiện kéo thả HTML5 gốc đôi khi cần một JavaSử dụng kịch bản dự phòng, nhưng ưu tiên dựa vào API Hành động trước.
- Di chuyển mục tiêu vào tầm nhìn: Việc chọn điểm đến không hiển thị trên màn hình sẽ gây ra lỗi không báo trước. Hãy sử dụng...
Actions.scrollToElementhoặc một JavaCuộn kịch bản trước khi kéo. - Kiểm tra kết quả: Luôn luôn xác nhận sự thay đổi trạng thái có thể đo lường được (văn bản, thuộc tính, số lượng) sau khi thực hiện thao tác thả thay vì chỉ tin tưởng vào việc hành động đó đã được thực thi.
- Chạy ở độ phân giải ổn định: Thao tác kéo bù pixel sẽ bị lỗi nếu kích thước khung nhìn khác với kích thước được sử dụng để tính toán độ bù.
