selenium:解决页面元素display:none的方法

在UI自动化测试中,有时候会遇到页面元素无法定位的问题,包括xpath等方法都无法定位,是因为前端元素被设置为不可见导致。

这篇博客,介绍下如何通过JavaScript修改页面元素属性来定位的方法。。。

1、具体问题

常见的页面元素不可见导致的不可定位,都是由于下面的问题:

通过查看相关文档,可以看出display:none方法是设置元素不可见,这就是导致为什么通过定位页面元素无法定位的原因。

关于display更多的信息,可以看这里:HTML DOM display用法

2、解决方案

对于这种问题,可以通过JavaScript修改页面元素属性来将元素置位可见,然后通过id、classname等方法去定位,示例代码如下(针对上图所示):

js = "document.getElementById(\"txtPassword\").style.display='block';"
# 调用js脚本
driver.execute_script(js)
sleep(3)
driver.find_element_by_id("txtPassword").send_keys("123456")

代码解析:

首先通过selenium封装好的方法document去找到display元素,document提供以下方法来定位display元素:

getElementById():返回对指定ID第一个对象的引用

getElementsByName() :返回带有指定名称的对象集合

getElementsByTagName():返回带有指定标签名的对象集合

关于document更多的信息,可以看这里:HTML DOM getElement()方法

上面我定义了一个js变量,然后通过getElementById()方法去引用display元素,修改none属性为block属性(作为块级元素显示),然后通过selenium自带的execute_script方法执行脚本。

最后,当元素属性置为可见时,可以通过ID去定位元素。

其实还有一个解决方案:让前端修改display:none为block就好了,但这样的话,带来的变化和安全风险又是需要考虑的问题。一个问题的解决总是伴随着新的问题,核裂变了解一下?

想起今天和同行聊天时说起的分裂BUG的话题,对话如下:

大佬N:核裂变的原理是通过中子撞击原子核产生多个新的原子核,原子核是已有的BUG,中子是修改BUG加上的代码,分裂之后这个bug消失了,取而代之的是更多的原子核(BUG)。。。

我:引起一个BUG的原因可能是多个,修改一段代码可能造成多个BUG,就像用新技术解决旧问题而带来的新问题一个意思。。。

自动化本身最大的挑战还是变化,因此从分层测试角度结合公司项目具体情况,考虑解决问题的方法,才是最好的选择。

转载请注明出处,商用请征得作者本人同意,谢谢!!!