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个性化字体_动力节点Java学院整理
Jul 12 HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 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
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
javaScript 页面自动加载事件详解
2014/02/10 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
python排序方法实例分析
2015/04/30 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
中华魂放飞梦想演讲稿
2014/08/26 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书