Web UI自动化测试－滚动条操作 scrollTop、scrollHeight与clientHeight的重要关系

前端开发中 动态效果是由js实现的，所以这个滚动的动作也是js实现的 
滚动条要分清楚是系统自己的滚动条还是元素自己的滚动条  

系统滚动条：

# scrollIntoView() 元素与页面顶部对齐 如果顶部有个遮罩层 就可能看不到。
scrollIntoView(false) 与页面底部对齐
driver.execute_script("arguments[0].scrollIntoView(false);", ele)
window.scrollTo(0,document.body.scrollHeight)"

直接滚动到页面底部 （常用于要用翻页控件）：
 driver.execute_script("window.scrollTo(0,document.body.scrollHeight)")
直接滚动到页面顶部：
driver.execute_script("window.scrollTo(document.body.scrollHeight,0)")

原生scrollbar

scrollTop

　　定义：获取或设置元素的内容向上滚动的像素值

clientHeight

　　定义：clientHeight = CSS height + CSS padding + 水平滚动条的高度

scrollHeight

　　定义：只读属性是一个元素的所含的高度的测定，包括由于溢出内容在屏幕上不可见的。

 

 

关系公式：element.scrollHeight - element.scrollTop === element.clientHeight

解释：此公式可以用于判断是否滚动到底

dom属性

 

scrollTop： 获取或设置一个元素的内容垂直滚动的像素数，当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0

　　定义：获取或设置元素的内容向上滚动的像素值

二、clientHeight

　　定义：clientHeight = CSS height + CSS padding + 水平滚动条的高度

 

三、scrollHeight

　　定义：只读属性是一个元素的所含的高度的测定，包括由于溢出内容在屏幕上不可见的。

这是一个只读属性，是元素内容高度的度量，包括由于溢出导致的视图中不可见的内容。注意：scrollHeight在没有滚动条的情况下，它的值跟下面要介绍的clientHeight相同。scrollHeight包括元素的padding，但不包括元素的border和margin

 

关系公式：element.scrollHeight - element.scrollTop === element.clientHeight

解释：此公式可以用于判断是否滚动到底

 

var ele = document.getElementById("test");

//判断元素是否出现了滚动条

if(ele.scrollHeight > ele.clientHeight) {

    //设置滚动条到最底部

    ele.scrollTop = ele.scrollHeight;

}

中间渲染时间差会导致错误的滚动距离。使用了延迟进行设置，如下：

if(ele.scrollHeight > ele.clientHeight) {

    setTimeout(function(){

        //设置滚动条到最底部

        ele.scrollTop = ele.scrollHeight;

    },500);

}

 

browser.execute(function (scrollbarSelector) {

let scrollbar = document.evaluate(scrollbarSelector, document).iterateNext();

 

if (scrollbar.scrollHeight > scrollbar.clientHeight) {

scrollbar.scrollTop = scrollbar.scrollHeight;

} else  {scrollbar.scrollTop = 0;}

}, scrollbarSelector, 2000)