首页 > 其他分享 >selenium----CSS表达式选择元素

selenium----CSS表达式选择元素

时间:2024-07-27 12:57:10浏览次数:11  
标签:选择 span 元素 selenium ---- nth id CSS

前面我们学习了根据 id、class属性、tag名 选择元素。

如果我们要选择的 元素 没有id、class 属性,或者有些我们不想选择的元素 也有相同的 id、class属性值,怎么办呢?这时候我们通常可以通过 CSS selector 语法选择元素。

选择元素

通过 CSS Selector 选择单个元素的方法是

find_element(By.CSS_SELECTOR, CSS Selector参数)

选择所有元素的方法是

find_elements(By.CSS_SELECTOR, CSS Selector参数)

根据tag、id、class选择元素

elements = wd.find_elements(By.CSS_SELECTOR, 'div')

等价于之前学习过的

elements = wd.find_elements(By.TAG_NAME, 'div')

根据id属性 选择元素的语法是在id号前面加上一个井号: #id值

element = wd.find_element(By.CSS_SELECTOR, '#searchtext')

选择子元素和后代元素

HTML中, 元素 内部可以 包含其他元素, 比如 下面的 HTML片段

<div id='container'>

    <div id='layer1'>
        <div id='inner11'>
            <span>内层11</span>
        </div>
        <div id='inner12'>
            <span>内层12</span>
        </div>
    </div>

    <div id='layer2'>
        <div id='inner21'>
            <span>内层21</span>
        </div>
    </div>

</div>

id 为 container 的div元素 包含了 id 为 layer1 和 layer2 的两个div元素。这是他的直接子元素。而id=inner11这种属于是后代元素,就是说,与最上面的元素不管隔了几层,都属于后代元素。

选择子元素

 如果 元素2 是 元素1 的 直接子元素, CSS Selector 选择子元素的语法是这样的

元素1 > 元素2

给浏览器传过去之后,就告诉浏览器找到元素2

选择后代元素

如果 元素2 是 元素1 的 后代元素, CSS Selector 选择后代元素的语法是这样的

元素1   元素2

中间有一个空格。

选择其他属性

<a href="http://www.miitbeian.gov.cn">苏ICP备88885574号</a>

css 选择器支持通过任何属性来选择元素,语法是用一个方括号 [] 

比如要选择上面的a元素,就可以使用 [href="http://www.miitbeian.gov.cn"] 

这个表达式的意思是,选择 属性href值为 http://www.miitbeian.gov.cn 的元素

# 根据属性选择元素
element = wd.find_element(By.CSS_SELECTOR, '[href="http://www.miitbeian.gov.cn"]')
# 根据属性选择元素
element = wd.find_element(By.CSS_SELECTOR, '[href]')

验证CSS  Selector

怎么验证 CSS Selector 的语法是否正确选择了我们要选择的元素呢?

写出Python代码,运行看看,能否操作成功.

在测试网站中点击ctrl+F,然后出现搜索框,上面写上你需要找到的元素,如果你的写法是错误的,就不会有高亮地方提示,说明,你的写法是错的,就不用再去python里面执行了,这时候你就再在这个搜索框里把这个元素写对就好了。

比如说我上面一开始写#footer1 span,找不到元素,所以我后面改成了.footer1 span。

其他选择元素写法

如果要选择两种,比如说我要选择植物和动物:.plant,.animal。中间用逗号隔开。

根据次序选择子元素-父元素的第n个子节点

    <body>  
       <div id='t1'>
           <h3> 唐诗 </h3>
           <span>李白</span>
           <p>静夜思</p>
           <span>杜甫</span>
           <p>春夜喜雨</p>              
       </div>      

       <div id='t2'>
           <h3> 宋词 </h3>
           <span>苏轼</span>
           <p>赤壁怀古</p>
           <p>明月几时有</p>
           <p>江城子·乙卯正月二十日夜记梦</p>
           <p>蝶恋花·春景</p>
           <span>辛弃疾</span>
           <p>京口北固亭怀古</p>
           <p>青玉案·元夕</p>
           <p>西江月·夜行黄沙道中</p>
       </div>             

    </body>

我们可以指定选择的元素 是父元素的第几个子节点

使用 nth-child

比如,我们要选择 唐诗 和宋词 的第一个 作者,也就是说 选择的是 第2个子元素,并且是span类型所以这样可以这样写 span:nth-child(2) ,如果你不加节点类型限制,直接这样写 :nth-child(2)就是选择所有位置为第2个的所有元素,不管是什么类型。

父元素的倒数第n个子节点

选择的是父元素的 倒数第几个子节点 ,使用 nth-last-child

p:nth-last-child(1) 

就是选择第倒数第1个子元素,并且是p元素。

父元素的某类型第几个的子节点

我们要选择 唐诗 和宋词 的第一个 作者,

可以像上面那样思考:选择的是 第2个子元素,并且是span类型

 span:nth-child(2)。

还可以这样思考,选择的是 第1个span类型 的子元素

所以也可以这样写 span:nth-of-type(1)。

父元素的倒数第几个某类型的子节点

当然也可以反过来, 选择父元素的 倒数第几个某类型 的子节点

使用 nth-last-of-type

像这样

p:nth-last-of-type(2)

奇数节点和偶数节点

如果要选择的是父元素的 偶数节点,使用 nth-child(even)

比如

p:nth-child(even)

如果要选择的是父元素的 奇数节点,使用 nth-child(odd)

p:nth-child(odd)

 兄弟节点选择

就是选择 h3 后面紧跟着的兄弟节点 span。

这就是一种 相邻兄弟 关系,可以这样写 h3 + span

表示元素 紧跟关系的 是 加号。这是选择紧跟着的那个元素。

如果要是选择所有的span,有的span不是紧跟着h3,这样的话怎么做?

 h3 ~ span可以这样写。

如果选择id为ti的里面的span:#id h3~span。

标签:选择,span,元素,selenium,----,nth,id,CSS
From: https://blog.csdn.net/m0_61077780/article/details/140730123

相关文章

  • 数据结构-线性表
    目录王道章节内容知识框架考纲内容引入方法1:顺序存储结构的直接表示方法2:顺序存储结构表示非0项方法3:链表结构存储非零项线性表定义线性表的主要操作(ADT)顺序存储结构定义结构代码实现操作及实现初始化获得查找插入删除链式存储结构单链表定义结构代码......
  • html+css 实现水波纹按钮
    前言:哈喽,大家好,今天给大家分享html+css绚丽效果!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦......
  • 我没有 python 但我有 python3
    我最近格式化了我的笔记本电脑并安装了Ubuntu操作系统。我没有明确安装Python。为了检查它是否已预安装,我在终端中运行python--version并得到了这个:$python--versionCommand'python'notfound,butcanbeinstalledwith:sudoaptinstallpython3......
  • 基于YOLOv9的停车场空闲车位检测【python源码+UI界面+数据集+模型+语音报警+安装说明
    往期精品导航基于YOLOv9的脑肿瘤区域检测智慧课堂基于YOLOv8的学生上课行为检测基于YOLOv9+pyside的安检仪x光危险物物品检测(有ui)基于YOLOv9的PCB板缺陷检测基于YOLOv9的线路绝缘子缺陷检测【python源码+UI界面+数据集+模型+语音报警+安装说明】基于YOLOv9的道路状况检测【......
  • 提升学生管理效率!智慧校园学工系统转班申请功能解析
    在智慧校园的学工系统中,转班申请功能是一项旨在简化学生转班流程、提高审批效率、确保过程公平透明的关键工具。这一功能的核心价值在于它为学生提供了一个便捷的在线申请平台,学生只需通过系统填写转班原因、目标班级等必要信息,即可发起转班请求,彻底告别了以往繁复的纸质申请流......
  • Android笔试面试题AI答之控件Views(6)
    答案来着文心一言,仅供参考目录1.简述什么是RemoteViews?使用场景有哪些?RemoteViews的特性使用场景总结2.获取View宽高的几种方法?1.在`onWindowFocusChanged`方法中获取2.使用`ViewTreeObserver.OnGlobalLayoutListener`3.使用`ViewTreeObserver.OnPreDrawListene......
  • 财务知识——月末计提、结转、摊销
    财务知识——月末计提、结转、摊销......
  • 梅瑟莫帮我学Java之学生考试系统(中残缺版)
    part1起始入口及功能//======================起始入口及功能=================================================privateConnectiongetConnection()throwsException{//加载MySQLJDBC驱动Class.forName("com.mysql.cj.jdbc.Driver");Connectio......
  • 绘制行星位置随时间的函数
    我一直在尝试模拟绕太阳运动的行星和小行星,我发现了这个链接:如何在已经绘制的椭圆上绘制行星轨道作为时间的函数?并且我决定研究并尝试其中的代码。但似乎我要么使用错误,要么代码错误,因为当我绘制火星、地球、木星、水星和金星的轨道时,它们似乎与美国宇航局的在线模拟......
  • 二叉树的遍历
    提纲挈领的说,先序中序后序的遍历区别在于遍历根节点的时机。 1.先序        1.1递归形式 遍历过程为:①访问根结点;②先序遍历其左子树;③先序遍历其右子树。voidPreOrderTraversal(BinTreeBT){if(BT){printf(“%d”,BT->Data);......