Selenium操作隐藏元素

业务场景：

前端页面是基于vue.2的框架写的。页面有上传文件按钮，点击后执行文件上传。查看元素的时候发现，导入按钮同级有type为’file‘类型的input元素，可以直接上传文件，那么上传下试试：

browser.find_element_by_xpath("//input[@name='file']").send_keys(r"文件地址\profile.txt")

没有成功。

点击下导入按钮试下：

#点击导入按钮
browser.find_element_by_xpath("//span[text()='导入']").click()
time.sleep(2)
browser.find_element_by_xpath("//input[@name='file']").send_keys(r"文件地址 \profile.txt")

导入成功。说明这个input元素是可以上传文件的。

看下input的格式：

 

 分析：

display：none意思是元素是被隐藏的，不能被访问到。点击导入后触发元素可操作。但是这样带来一个问题，点击导入后系统os页面出现，os页面需要关闭。

解决方案：

修改input元素属性，使其可访问。

代码：

js="document.getElementsByName('file')[0].setAttribute('style','display:block !important')"    #js语句
browser.execute_script(js)
time.sleep(2) #查看js执行效果
browser.find_element_by_xpath("//input[@name='file']").send_keys(r"文件地址\profile.txt")  #文件上传

这样可以使input组件不隐藏，直接访问，文件上传成功。

js语句还可以写成'document.getElementsByName('file')[0].style.setProperty('display','block','important')'

js语句解析：
首先是input元素定位：
document.getElementById()：根据元素id定位，指定唯一对象。
document.getElementsByClassName（）：根据classname返回元素对象的list，因此需要加list下标，例如document.getElementsByClassName('el-upload__input')[0]。
document.getElementsByName（）：根据元素name返回元素对象list。
document.getElementsByTagName（）：根据标签名称返回元素对象list。
定位元素正确后，修改元素style：
element.setAttribute（）: 添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置/更改值。返回值：undefined。
语法：element.setAttribute(attributename,attributevalue)。
attributename必需。希望添加的属性的名称，类型string。
attributevalue必需。希望添加的属性值，类型string。
例如element.setAttribute('style','display:block !important')：设置元素style。

element.style.setProperty（）设置或修改一个新的 CSS 属性。返回值：undefined。
语法：element.style.setProperty(propertyname, value, priority)。
propertyname必需。表示创建或修改的属性名称。类型string。
value可选，新的属性值。类型string。
priority规定是否需要设置属性的优先级 important。可以是下面三个值:"important"、“undefined“、"" 。类型string
例如：element.style.setProperty('display','block','important')：设置元素style。