CSS元素定位之通过元素的标签或者元素的id、class属性定位详解


Posted in HTML / CSS onSeptember 23, 2022

前言

大部分人在使用selenium定位元素时,用的是xpath元素定位方式,因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观,更好理解一些。

css元素定位方式往往被忽略掉了,其实css元素定位方式也有它的价值;相对于xpath元素定位方式来说,css元素定位方式更快,语法更简洁。

一、css元素定位:通过元素的标签或者元素的id、class属性定位

1、css元素定位方式可以通过元素的id、class、标签这三个常规属性直接定位。

2、举例:如下是百度输入框的的html代码:

<input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd"/>

①css元素定位使用#号表示id属性,如:#kw

②css元素定位方式使用.表示class属性,如.s_ipt

③css元素定位方式也可以直接使用标签名称,而没有任何标识符,如:input

CSS元素定位之通过元素的标签或者元素的id、class属性定位详解

二、css元素定位:通过元素的其它属性定位

1、css元素定位除了可以通过标签、class、id这三个常规属性定位外,也可以通过元素的其它属性定位。例如: 

CSS元素定位之通过元素的标签或者元素的id、class属性定位详解

三、css元素定位:通过标签与属性的组合来定位元素 

CSS元素定位之通过元素的标签或者元素的id、class属性定位详解

四、css元素定位:通过元素的层级关系来定位

1、css元素定位可以达到类似xpath元素定位通过元素的层级关系来定位,例如:

xpath元素定位: //form[@id='form']/span/input 和 //form[@class='fm']/span/input 也可以用css实现 

CSS元素定位之通过元素的标签或者元素的id、class属性定位详解

五、css元素定位:通过元素的并列索引来定位 

1、以下图为例:与四相似。 

CSS元素定位之通过元素的标签或者元素的id、class属性定位详解

2、css元素定位也可以通过索引option:nth-child(1)来定位子元素,这点与xpath写法用很大差异,其实很好理解,直接翻译过来就是第几个小孩 

CSS元素定位之通过元素的标签或者元素的id、class属性定位详解

六、css元素定位:通过对元素属性的逻辑运算来定位

1、css同样也可以实现逻辑运算,同时匹配两个属性,这里跟xpath不一样,无需写and关键字。

CSS元素定位之通过元素的标签或者元素的id、class属性定位详解

七、处理selenium中的css_selector定位元素的模糊匹配问题

① 匹配元素的id属性,先指定一个html标签,然后加上“#”符号,再加上id的属性值。

driver.find_element_by_css_selector('div#ID').click()

②匹配元素的class属性,先指定一个html标签,然后加上“.”符号,再加上class的属性值。

driver.find_element_by_css_selector('div.CLASS').click()

③匹配元素的其他属性。【这里不再是‘.’或者‘#’符号,而是采用了"标签名[属性名=属性值]"的方式定位元素】

driver.find_element_by_css_selector('div[name=NAME]').click()

④组合匹配【支持定位元素对象通过两组或两组以上的属性】

driver.find_element_by_css_selector('div[name=NAME][type=TYPE]').click()

⑤匹配头部

driver.find_element_by_css_selector('div[style^="sp.gif"]').click()

⑥匹配尾部

driver.find_element_by_css_selector('div[style$="sp.gif"]').click()

⑦匹配中间

driver.find_element_by_css_selector('div[style*="sp.gif"]').click()

到此这篇关于CSS元素定位之通过元素的标签或者元素的id、class属性定位的文章就介绍到这了,更多相关css元素定位内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
CSS3教程:background-clip和background-origin
Oct 17 HTML / CSS
CSS3教程(8):CSS3透明度指南
Apr 02 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 #HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
详解CSS中postion和opacity及cursor的特性
Aug 14 #HTML / CSS
html网页引入svg图片的4种方式
HTML静态页面获取url参数和UserAgent的实现
Aug 05 #HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 #HTML / CSS
css中:last-child不生效的解决方法
Aug 05 #HTML / CSS
You might like
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
Python解析xml中dom元素的方法
2015/03/12 Python
Python处理字符串之isspace()方法的使用
2015/05/19 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
python opencv实现简易画图板
2020/08/27 Python
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
毕业生的自我评价范文
2013/12/31 职场文书
初婚初育证明
2014/01/14 职场文书
新春文艺演出主持词
2014/03/27 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书