selenium操作隐藏元素——交流帖

最新推荐文章于 2025-03-27 16:41:32 发布

DCclient

最新推荐文章于 2025-03-27 16:41:32 发布

阅读量1.6w

点赞数

CC 4.0 BY-SA版权

分类专栏： python 文章标签：自动化前端 selenium html 脚本

本文链接：https://blog.youkuaiyun.com/DCclient/article/details/72900261

python 专栏收录该内容

21 篇文章

订阅专栏

这篇博客主要讨论了在自动化测试中如何处理隐藏元素的问题，特别是使用Selenium时遇到的挑战。文章介绍了两种方法：通过修改HTML元素的display属性使其可见，以及利用execute_script执行JavaScript来操作隐藏元素。提供了具体的代码示例，包括改变select元素的可见性和设置元素边框颜色。此外，还提到了Arguments对象在JavaScript中的应用，以及fadeOut和fadeIn方法在元素隐藏和显示中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、对于前端隐藏元素，一直是selenium自动化定位元素的隐形杀手，

脚本跑到隐藏元素时位置时报各种各样的错误，可是这种隐藏的下拉

菜单又没有办法避免，所以非常头痛，此帖只为交流隐藏元素自动化

定位处理方法；

处理一：html这种格式的：

处理操作：

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方法的调用：

                                        调用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.youkuaiyun.com/")
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)