Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> Java

Cuộn đến DIV cụ thể với Selenium WebDriver Java (JavascriptExecutor)

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ápDùng khiƯu điểmNhượ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 = valueCuộn container chínhKiểm soát chính xác pixel, có thể animatePhải biết trước vị trí hoặc tính toán
scrollIntoView({behavior:'smooth'})Cần hiệu ứng mượtUI đẹ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: auto hoặc overflow: scroll và chiều cao cố định (height hoặc max-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 WebDriverWait chờ element hiển thị thay vì Thread.sleep.