js操作:selenium无法操作隐藏元素问题

对于前端隐藏元素,一直是selenium自动化定位元素的隐形杀手,脚本跑到隐藏元素时位置时报各种各样的错误,

隐藏的下拉菜单又没有办法避免,此帖只为交流隐藏元素自动化定位处理方法(3种操作)
       处理1:(修改样式)

html这种格式的:
           js操作:selenium无法操作隐藏元素问题

处理操作:

 from selenium import webdriver
 from selenium.webdriver.support.select import Select
 import os,time

 driver = webdriver.Firefox()
 file_path = 'file:///' + os.path.abspath('test.html')
 driver.get(file_path)

 js = 'document.querySelectorAll("select")[0].style.display="block";'
 driver.execute_script(js)

 sel = driver.find_element_by_tag_name('select')
 Select(sel).select_by_value('opel')

 time.sleep(2)

 driver.quit()

来自虫师的解释:

document.querySelectorAll("select")[0].style.display="block";
document.querySelectorAll("select")  选择所有的select。
 [0] 指定这一组标签里的第几个。
style.display="block";  修改样式的display="block" ,表示可见。
 执行完这句js代码后,就可以正常操作下拉框了。
     
      处理2:(定位元素,修改样式)重点描述:
      调用js方法:execute_script(script, *args)
      在当前窗口/框架 同步执行JavaScript
      脚本:JavaScript的执行。
      *参数:适用任何JavaScript脚本。
      使用:driver.execute_script(‘document.title’)
     示例csdn登录框:

 #coding=utf-8
 from selenium import webdriver
 from time import sleep 

 driver = webdriver.Firefox()
 driver.get("http://www.csdn.net/")
 sleep(10)
 driver.find_element_by_link_text("登录").click()
 sleep(10) 

 #给用户名输入框标红显示
 js="var q=document.getElementById(\"username\");q.style.border=\"1px solid red\";"
 #调用js
 driver.execute_script(js)
 sleep(3) 

 driver.find_element_by_id("username").send_keys("username")
 driver.find_element_by_id("password").send_keys("password")
 driver.find_element_by_class_name("logging").click()
 sleep(3) 

 driver.quit()

JS调用解释:
        q=document.getElementById(\"username\")
         元素q的id 为username
         q.style.border=\"1px solid red\
         元素q的样式,边框为1个像素红色/
 3、隐藏元素:
   js.html

 <html>
     <head>
       <meta http-equiv="content-type" content="text/html;charset=utf-8" />
       <title>js</title>
       <script type="text/javascript" async="" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
       <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
       <script type="text/javascript">
         $(document).ready(function(){
           $('#tooltip').tooltip({"placement": "right"});
         });
       </script>
     </head>  

     <body>
       <h3>js</h3>
       <div class="row-fluid">
         <div class="span6 well">
           <a id="tooltip" href="#" data-toggle="tooltip" title=" selenium-webdriver(python)">hover to see tooltip</a>
           <a class="btn">Button</a>
         </div>
       </div>
     </body>
     <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
   </html>

python脚本:

 #coding=utf-8
 from selenium import webdriver
 import time,os 

 driver = webdriver.Firefox()
 file_path = 'file:///' + os.path.abspath('js.html')
 driver.get(file_path)
 '''
 通过JS 隐藏选中的元素
 '''
 #第一种方法:
 driver.execute_script('$("#tooltip").fadeOut();')
 time.sleep(5) 

 #第二种方法:
 button = driver.find_element_by_class_name('btn')
 driver.execute_script('$(arguments[0]).fadeOut()',button)
 time.sleep(5)

第一种是页面上引用;
    第二种是定位到元素后使用;
    具体解释如下:
         arguments对象,它是调用对象的一个特殊属性,用来引用Arguments对象。
         Arugments对象就像数组。
         fadeOut() 方法使选中元素隐藏起来,假如该元素是可隐藏的。
         fadein()则是相反渐显得意思。
    示例场景如下:

js操作:selenium无法操作隐藏元素问题

效果展示如下:

js操作:selenium无法操作隐藏元素问题

---------------------
作者:DCclient
来源:CSDN
原文:https://blog.csdn.net/DCclient/article/details/72900261
版权声明:本文为博主原创文章,转载请附上博文链接!

上一篇:0、Web基本概念


下一篇:git恢复被修改的文件