Khi một <div> có overflow: auto/scroll (scrollable container), cuộn trang chính không tác động. Cần cuộn bên trong chính element đó. Selenium dùng JavascriptExecutor + scrollIntoView hoặc scrollTop.
Cách 1: scrollIntoView (Đơn giản, dùng cho element con bên trong DIV)
WebElement innerElement = driver.findElement(By.xpath("//div[@class='slick-track']//button[text()='Next']"));
((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", innerElement);
Cách 2: Cuộn chính DIV container (scrollTop/scrollLeft)
WebElement scrollDiv = driver.findElement(By.cssSelector("div.scroll-container"));
// Cuộn xuống 500px
((JavascriptExecutor) driver).executeScript("arguments[0].scrollTop = 500;", scrollDiv);
// Cuộn đến cuối
((JavascriptExecutor) driver).executeScript("arguments[0].scrollTop = arguments[0].scrollHeight;", scrollDiv);
// Cuộn ngang
((JavascriptExecutor) driver).executeScript("arguments[0].scrollLeft = 300;", scrollDiv);
Ví dụ hoàn chỉnh: Cuộn div slick-track
import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;
public class ScrollDivExample {
public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
WebDriver driver = new ChromeDriver();
try {
driver.get("https://example.com/page-with-scrollable-div");
// Tìm DIV có scrollbar
WebElement scrollDiv = driver.findElement(By.xpath("//div[@class='slick-track']"));
// Cuộn xuống từ từ (smooth scroll simulation)
for (int i = 0; i < 5; i++) {
((JavascriptExecutor) driver).executeScript(
"arguments[0].scrollTop += 200;", scrollDiv);
Thread.sleep(300); // Tạo hiệu ứng mượt
}
// Hoặc cuộn thẳng đến element con cụ thể
WebElement target = scrollDiv.findElement(By.xpath(".//div[contains(text(),'Item 10')]"));
((JavascriptExecutor) driver).executeScript(
"arguments[0].scrollIntoView({behavior: 'smooth', block: 'center'});", target);
} finally {
driver.quit();
}
}
}
So sánh các phương pháp
| Phương pháp | Dùng khi | Ưu điểm | Nhược điểm |
|---|---|---|---|
scrollIntoView(true) | Cuộn đến element con | Đơn giản, tự tính toán vị trí | Ít kiểm soát animation, có thể nhảy đột ngột |
scrollTop = value | Cuộn container chính | Kiểm soát chính xác pixel, có thể animate | Phải biết trước vị trí hoặc tính toán |
scrollIntoView({behavior:'smooth'}) | Cần hiệu ứng mượt | UI đẹp, người dùng thấy rõ | Chậm hơn, không hỗ trợ IE cũ |
Lưu ý
- Element DIV phải có CSS:
overflow: autohoặcoverflow: scrollvà chiều cao cố định (heighthoặcmax-height). - Nếu DIV load dữ liệu lazy (infinite scroll), cần cuộn lặp + chờ load + kiểm tra dữ liệu mới.
- Dùng
WebDriverWaitchờ element hiển thị thay vìThread.sleep.