RobotFramework: 如何控制div上的scrollbar?

在使用grid呈現大量資料時，很有可能會發生畫面的長度無法呈現出所有內容；因此在div的style中，會搭配overflow: auto讓長度不足時顯示出scrollbar，如下:


而我在使用Get Text去取得如畫面較右方(index大概第10個)的內容時，都會找不到對應的element；使用Get Source或Get Element Count也都拿不到如預期的資料與數量。經過測試，發現只要將scrollbar往右移就可以解決我們的問題。本篇文章要分享給大家控制div scrollbar的方法。

我們主要的解決方式是透過Execute Javascript去控制div中的scrollbar，會使用到DOM element的兩個屬性:

• Element.scrollLeft: 控制橫向scrollbar位置。
• Element.scrollTop: 控制垂直scrollbar位置。

假設我們要針對class為viewport element的橫向scrollbar做操作，會這樣寫:

Execute Javascript | document.getElementByClassName('viewport')[1].scrollLeft = 500

如果要對id為grid的垂直scrollbar做操作，會這樣寫:

Execute Javascript | document.getElementById('grid').scrollTop = 500

在寫之前，可以先嘗試使用瀏覽器的debug console實驗一下。

• selenium之 如何控制网页内嵌div中滚动条的滚动
• Element.scrollLeft

---