持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

前言

UI自动化过程中，常常会遇到各种各样的问题，那遇到问题如何去解决呢，按照昨天组内同事向我请教的三个问题，来浅谈一下我定位问题的小技巧：（1）一个是如何操作滚动条（2）一个是页面中的超链接元素定位不到（3）selenium如何绕过账户密码登录

操作滚动条

操作滚动条最好的办法就是用js去操作它；滚动条有两类：页面滚动条和页面元素table的滚动条

页面滚动条

使用js的window.scrollTo(x,y)方法

知识延申： window对象是一个包含dom文档的窗口，是一个全局变量，代表当前正在运行的浏览器窗口，该window有很多滚动方法

window.scroll() 该方法实际上和scrollTo()方法相同，参数都一样
window.scrollTo() 来自mdn的解释

我们可以在浏览器的开发者工具，console控制台进行测试纵向向下滚动正1000

图片.png

纵向图片.png

table的滚动条

先定位到该滚动条，这个定位到滚动条元素你可以用xpath,css等方法，定位到之后使用element对象的滚动方法

先看个例子

使用class定位到元素，然后使用element的scrollTop属性

以下代码是RF语法，表示操作该滚动条往下滚动多少距离 ${ele_class_locator} 变量代表用class属性定位$ {scroll_number} 具体的滚动数

execute javascript  document.getElementsByClassName('${ele_class_locator}')[0].scrollTop=${scroll_number}

python 代码

from  selenium import webdriver

driver =  webdriver.Chrome()

ele_class_locator = 'scroll'

scroll_number = 1000

js_code = 'document.getElementsByClassName(%s)[0].scrollTop=%d' % (ele_class_locator, scroll_number)

driver.execute_script(js_code)

这个当然也可以在浏览器的开发者工具console控制台debug调试，调试ok后，再写入脚本代码中执行

这个table的滚动条一时半会不好找例子，用自己的项目的涉及到隐私就不截图展示了。

知识延申：

document对象及定位元素的方法

看mdn的解释

图片.png

定位元素的方法

方法	解释	例子
document.getElementById	Document的方法 getElementById()返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法	element = document.getElementById(id)
Document.getElementsByClassName	返回一个包含了所有指定类名的子元素的类数组对象。当在document对象上调用时，会搜索整个DOM文档，包含根节点。你也可以在任意元素上调用getElementsByClassName() 方法，它将返回的是以当前元素为根节点，所有指定类名的子元素	elements = document.getElementsByClassName(names)
Document.getElementsByName	根据元素的name属性来定位	elements = document.getElementsByName(name)
Document.getElementsByTagName()	根据元素的标签名来定位	elements = document.getElementsByTagName(name)
document.querySelector()	使用css方式来定位，返回匹配的第一个	element = document.querySelector(selectors)
Document.evaluate()	使用xpath定位	var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );

定位到元素之后，使用element的滚动方法

方法	解释	例子
Element.scroll()	scroll() 方法是用于在给定的元素中滚动到某个特定坐标	element.scroll(0, 1000);这个很像windows的scroll方法
Element.scrollTo()	跟scroll方法相同	element.scrollTo(0, 1000);这个很像windows的scrollTo方法
Element.scrollIntoView()	滚动使之元素对用户可见

定位到元素之后，使用element的滚动属性

Element.scrollLeft Element.scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离

//获取滚动条到元素左边的距离
var sLeft = element.scrollLeft;

sLeft是一个整数，代表元素滚动条距离元素左边多少像素。

//设置滚动条滚动了多少像素
element.scrollLeft = 10;

Element.scrollTop

// 获得滚动的像素数
var  intElemScrollTop = someElement.scrollTop;

运行此代码后， intElemScrollTop 是一个整数，即[element]的内容向上滚动的像素数。

// 设置滚动的距离
element.scrollTop = intValue;

selenium代码怎么写

关于scroll into view， selenium封装了以下

python代码

from selenium import webdriver

from selenium.webdriver.common.by import By

driver =  webdriver.Chrome()

ele_class_locator = 'scroll'

scroll_number = 1000

js_code = 'document.getElementsByClassName(%s)[0].scrollTop=%d' % (ele_class_locator, scroll_number)

driver.execute_script(js_code)

element = driver.find_element(By.CLASS_NAME, ele_class_locator)

ele_location = element.location_once_scrolled_into_view

RF代码

${locator}     set variable   xxx
Scroll Element Into View    ${locator}

结语

UI自动化，你需要掌握一门编程语言，了解前端的一些知识，关于知识的获取，建议看官方文档，以上关于windows, element等基本上来自于MDN，selenium也建议看官方文档，还有平时要多总结，多和前端小伙伴交流，对于这个页面的元素实在不懂的

后续会接着总结后面两个问题

欢迎和我沟通交流，一起成长

selenium debug 小技巧--操作滚动条

前言