问小白 wenxiaobai
资讯
历史
科技
环境与自然
成长
游戏
财经
文学与艺术
美食
健康
家居
文化
情感
汽车
三农
军事
旅行
运动
教育
生活
星座命理

selenium教程 —— css定位

创作时间:
作者:
@小白创作中心

selenium教程 —— css定位

引用
CSDN
1.
https://blog.csdn.net/m0_58026506/article/details/145704542

本文是一篇关于selenium中css定位的教程文章，内容涵盖了css定位的基本概念、优点、调试方法以及详细的css选择器语法说明。文章结构清晰，内容完整，对于学习selenium自动化测试的读者具有较高的参考价值。

说明：本篇博客基于selenium 4.1.0

selenium-css定位

element_css = driver.find_element(By.CSS_SELECTOR, 'css表达式')

css定位说明

selenium中的css定位，实际是通过css选择器来定位到具体元素，css选择器来自于css语法

css定位优点

  1. 语法简洁
  2. 对比其他定位方式，定位效率更快
  3. 对比其他定位方式，定位更稳定

调试方法

方法1：在浏览器开发者模式的elements中，Ctrl+F搜索栏输入css表达式

方法2：在浏览器开发者模式的console中，按如下格式验证表达式 

$("css表达式")   # 注：表达式中存在引号，则使用单引号，'$'可更换为$$

css选择器语法

基础选择器

选择器
格式
示例
示例说明
选择全部
*
*
选择全部元素
标签选择器
html标签
p
选择所有

元素

ID选择器
#id属性值
#su
选择所有id='su'的元素
类选择器
.class属性值
.s_btn
选择所有class='s_btn'的元素
属性选择器1
[属性名]
[type]
选择所有带type属性的元素
属性选择器2
[属性名='属性值']
[type="submit"]
选择所有type="submit"的元素
属性选择器3
[属性名~='属性值']
[type~="submit"]
选择所有type包含"submit"的元素
属性选择器4
[属性名
='属性值']
[type

备注：某些元素属性有多个值(如class属性)，值表现为以空格隔开，使用时需要单个取出使用

组合选择器

组合选择器就是同时使用多个基础选择器，从而更好地筛选出目标元素

选择器
格式
示例
示例说明
标签指定属性
标签加属性描述
input#su
选择所有id='su'的元素
并集
元素1,元素2
div,p
选择所有
和

元素

父子
元素1>元素2
div>p
选择所有父级是
的

元素

后代
元素1 元素2
div p
选择
中的所有

元素

相邻
元素1+元素2
div+p
选择
同级后的相邻

元素

同级
元素1~元素2
div~p
选择
同级后的所有

元素

伪属性选择器

伪属性选择器是指元素在html中实际并不存在该属性，是由css定义的拓展描述属性

选择器
格式
示例
示例说明
唯一子元素
:only-child
p:only-child
选择所有

元素且该元素是其父级的唯一一个元素

第一子元素
:first-child
p:first-child
选择所有

元素且该元素是其父级的第一个元素

最后子元素
:last-child
p:last-child
选择所有

元素且该元素是其父级的最后一个子元素

顺序选择器
:nth-child(n)
p:nth-child(2)
选择所有

元素且该元素是其父级的第二个子元素

顺序类型选择器
:nth-of-type(n)
p:nth-of-type(2)
选择所有

元素且该元素是其父级的第二个

元素

倒序选择器
:nth-last-child(n)
p:nth-last-child(2)
选择所有

元素且该元素是其父级的倒数第二个子元素

倒序类型选择器
:nth-last-of-type(n)
p:nth-last-of-type(2)
选择所有

元素且该元素是其父级的倒数第二个

元素
热门推荐
© 2023 北京元石科技有限公司 ◎ 京公网安备 11010802042949号