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，就像用新技术解决旧问题而带来的新问题一个意思。。。

 

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