Topic 35: How to scroll to Element in Selenium

Chào các bạn đã đến với chủ đề tiếp theo của mình. Hôm nay, mình sẽ tiếp tục giới thiệu về cách làm thế nào để Scroll To Element trong Selenium Webdriver. Thế tại sao chúng ta cần phải scroll to element trong automation?

Trong automation, chắc chắn bạn sẽ dùng các hàm Scroll để thực hiện các action. Nếu bạn không scroll, có thể sẽ dẫn đến việc test case bị failed. Lý do là element đó nằm ngoài khung màn hình, dẫn đến việc nó ko thấy element đó để thực hiện action.

Ví dụ như hình sau, mình có form đăng ký và button Register. Form đăng ký có rất nhiều fields, và button Register sẽ nằm ở cuối page. Lúc này, nếu mình ko scroll xuống, thì sẽ ko thấy button Register, dẫn đến việc button sẽ không click được.

Ở nội dung bài này, mình sẽ hướng dẫn các bạn 1 số cách để scroll to element như sau:

1. Move to element using Webdriver

@Test
public void moveToElementUsingWebDriver() throws InterruptedException {
    driver.get("https://the-internet.herokuapp.com/");
    Thread.sleep(3000);
    WebElement element = driver.findElement(By.xpath("//a[text()='Typos']"));
    Actions actions = new Actions(driver);
    actions.moveToElement(element).perform();
    Thread.sleep(3000);
}

2. Move to element use Javascript Executor

Ngoài cách trên, mình có thể dùng java script để scroll to element. Ví dụ mình có 4 cách scroll như bên dưới:

• Scroll to Element
• Scroll to Element để cho element đó nằm ở chính giữa màn hình
• Scroll to bottom of page
• Scroll to top of page

Sample code:

@Test
public void moveToElementUsingJs() throws InterruptedException {
    driver.get("https://getbootstrap.com/docs/5.0/forms/select/");
    Thread.sleep(5000);

    WebElement element = driver.findElement(By.cssSelector("select[aria-label*='multiple']"));
    JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;

    //Scroll to element
    jsExecutor.executeScript("arguments[0].scrollIntoView(true);", element);
    Thread.sleep(5000);

    //Scroll to bottom of page
    jsExecutor.executeScript("window.scrollBy(0,document.body.scrollHeight)");
    Thread.sleep(5000);

    //Scroll to top of page
    jsExecutor.executeScript("window.scrollBy(0, -document.body.scrollHeight)");
    Thread.sleep(5000);

    //Scroll to element to middle page
    jsExecutor.executeScript("arguments[0].scrollIntoView({block: 'center'});", element);
    Thread.sleep(5000);
}

3. Lời kết

Như vậy chúng ta đã tìm hiểu qua cách scroll to element trong Selenium. Các bạn hãy xem lại ví dụ trên và làm lại 1 lần nữa để hiểu bài hơn nhé. Mình hy vọng bài viết này sẽ hữu ích cho các bạn. Cảm ơn các bạn đã theo dõi bài viết của mình. Hẹn gặp lại các bạn ở những chủ đề tiếp theo. Bái bai.