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制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 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魔术变量用法实例详解
2014/11/13 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
PHP常用的小程序代码段
2015/11/14 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
php无限级分类实现方法分析
2016/10/19 PHP
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
python写入中英文字符串到文件的方法
2015/05/06 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
python程序 创建多线程过程详解
2019/09/23 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
工厂保洁员岗位职责
2013/12/04 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
教师求职信怎么写
2015/03/20 职场文书
入党函调证明材料
2015/06/19 职场文书
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
关于python中模块和重载的问题
2021/11/02 Python