首页 > 其他分享 >CSS定位方法详解

CSS定位方法详解

时间:2023-05-09 17:35:59浏览次数:59  
标签:定位 元素 详解 CSS input 表达式 页面

css概述:

1.css(Cascading Style Sheets)是一种语言,它用来描述HTML和XML的元素显示样式。

2.css语言中有css选择器,在selenium中可以使用这种选择器来进行元素定位。

3.css定位方法比xpath快,而且css语言也非常强大,所以非常推荐这种定位方法。

定位方法:find_element_by_css_selector()

css定位策略(方式):

1.id选择器

2.class选择器

3.元素选择器

4.属性选择器

5.层级选择器

3.1、使用相对路径定位元素
CSS定位表达式:input[value=“查询”]

上述CSS表达式通过相对路径使用元素名称和元素的属性及属性值进行页面元素的定位。

3.2、使用class名称定位元素
CSS定位表达式:input.spread

上述CSS表达式使用input页面元素的class属性名称“spread”来进行定位,"."用来表示类选择器,input指定标签,也可以不加,表示查找所有class属性值相等的元素。

3.3、使用id属性值定位元素
CSS定位表达式:input#div1input

上述CSS定位表达式使用input页面元素的id属性值“div1input”进行定位,“#”用来表示id选择器,input指定标签,也可以不加,表示查找所有id值相等的元素。

3.4、使用页面其他属性值定位
CSS定位表达式:

表达式1:img[alt=“div1-img1”]
表达式2:img[alt=“div1-img1”][href=“https://www.sogou.com/”]

表达式1和表达式2是等价的,在某些复杂的定位场景下,可以使用多个属性来确保定位元素的唯一性。

3.5、使用属性值的一部分内容进行定位
CSS定位表达式:

复制代码
表达式1:a[href^="https://www.sogou"]
表达式2:a[href$="sogou.com/"]
表达式3:a[href*="sogou"]

上述三个CSS定位表达式在提供的被测试网页中是等价的,都是查找“搜狗搜索”链接
CSS表达式1:表示匹配链接地址开始包含“https://www.sogou”字符串的链接元素,以字符“^”指明从字符串的开始匹配
CSS表达式2:表示匹配链接地址结尾包含“sogou.com/”字符串的链接元素,以字符“$”指明在字符串的结尾匹配。
CSS表达式3:表示匹配链接地址包含“sogou”字符串的链接元素,以字符“*”指明需要进行模糊匹配。
复制代码

3.6、使用页面元素进行子页面元素的查找

复制代码
"""
CSS定位表达式
表达式1:div#div1>input#div1input
表达式2:div input
"""


表达式1中的"div#div1",表示在被测试网页上定位到id属性值为div1的div页面元素,“>”表示在以查找到的
div元素的子页面元素中进行查找,"input#div1input"表示查找id属性值为div1input的input页面元素。此方法可实现查找div下子页面元素的目的。

表达式2表示匹配所有属于div元素后台的input元素,父元素div和子元素input间必须用空格分割。
复制代码


3.7、使用伪类定位元素

复制代码
'''
CSS定位表达式
表达式1:div#div1 :first-child
表达式2:div#div1 :nth-child(2)
表达式3:div#div1 :last-child
表达式4:input:focus
表达式5:input:enabled
表达式6:input:checked
表达式7: input:not([id])
'''


伪类表达式是CSS语法支持的定位方式,前三个CSS定位表达式要特别注意是,在冒号(:)前一定要有一个空格。

表达式1表示查找id属性值为div1的div页面元素下的第一个子元素,:first-child表示查找某个页面元素下的第一个子页面元素。
表达式2表示查找id属性值为div1的div页面元素下的第二个子元素,:nth-child(2)表示查找某个元素下的第二个子页面元素。nth-last-child:表示从最后面开始选取子元素
表达式3表示查找id属性值为div1的div页面元素下的最后一个子元素,:last-child表示查找某个页面元素下的最后一个子页面元素。
表达式4表示查找当前获取焦点的input页面元素
表达式5表示查找可操作的input页面元素
表达式6表示查找处于勾选状态的checkbox页面元素
表达式7表示查找所有无id属性的input页面元素
复制代码


伪类定位方式可基于子元素的相对位置和元素的状态进行定位,此定位方式可解决自动化测试中一部分页面元素定位难的问题。

3.8、查找同级兄弟页面元素

复制代码
'''
CSS定位表达式
表达式1:div#div1>input + a
表达式2:div#div1>input+a+img
表达式3:div#div1>input+*+img
表达式4:ul#recordlist>p~li
'''

表达式1表示在id属性值为div1的div页面元素下,查找input页面元素后面的同级且临近的a元素
表达式2表示在id属性值为div1的div页面元素下,查找input和a页面元素后面的同级且临近的img元素
表达式3表示在id属性值为div1的div页面元素下,查找input和任意一种页面元素后面的同级且临近的img元素
表达式4表示在id属性值为recordlist的ul页面元素下,查找p页面元素以后所有的li元素
复制代码

3.9、多元素选择器

CSS定位表达式
div#div1,input,a

表达式表示同时查找所有id属性值为div1的div元素,所有的input元素,所有的a元素


四、Xpath定位与CSS定位的比较
Xpath定位方式与CSS定位方式很相似,Xpath定位功能相对更强大一些,但是CSS定位方式执行速度更快。

定位方式比较

标签:定位,元素,详解,CSS,input,表达式,页面
From: https://www.cnblogs.com/buchi-baicai/p/17385716.html

相关文章

  • CentOS7中firewall防火墙详解和配置
    提示修改防火墙配置文件之前,需要对之前防火墙做好备份重启防火墙后,需要确认防火墙状态和防火墙规则是否加载,若重启失败或规则加载失败,则所有请求都会被防火墙拒绝firewalld的基本使用#停止firewallsystemctlstopfirewalld.service#禁止firewall开机启动systemctldisab......
  • CSS 常用苹方字体
    //苹方-简常规体font-family:PingFangSC-Regular,sans-serif;//苹方-简极细体font-family:PingFangSC-Ultralight,sans-serif;//苹方-简细体font-family:PingFangSC-Light,sans-serif;//苹方-简纤细体font-family:PingFangSC-Thin,sans-serif;//苹方-简中黑......
  • 常用css
    单行省略/**强制不换行:white-space:nowrap;*超出隐藏:overflow:hidden*超出的文本显示省略号:text-overflow:ellipsis;*需要设置宽度*/.t-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;/*width:100%;*/}......
  • css中rem,em
    名词解释,rem是使用的重点1.rem的定义理解:通过设置根元素<html>的font-size的大小,来控制整个html文档内的字体大小、元素宽高、内外边距等,2.rem(fontsizeoftherootelement)是指相对于根元素的字体大小的单位。em(fontsizeoftheelement)是指相对于父元素的字体大小的......
  • 未知大小的图片适应(保持宽高比且不超出)图片容器的CSS属性
    假设我们本地代码中有一个宽*高为100px*100px的图片的容器元素<divclass="img-wrapper"style="width:100px;height:100px;"><imgsrc="..."alt="待展示图片"/></div> 如果图片不我们本地,而是属于其他人资源,那么图片的尺寸、大小对于我们来讲是不可控的。这种情......
  • 【内存分析】用于内存分析定位的指令 jmap, jstat, jinfo, jstack
    用于内存分析定位的指令/工具有:jmap,jstat,jinfo,jstackjmap(1)分析进程中的内存使用情况,是多少个什么样的对象占用了多大的内存,这类型的分析(2)也可以导出堆转储文件,导出后,再来分析jstack这个是看cpu的,看各个线程的执行状态,如果cpu比较高,就是用jstack来定位分析......
  • 【nodejs基础】Express、路由、中间件详解04
    一、Express简介Express是基于Node.js平台,快速、开放、极简的Web开发框架通俗的理解:Express的作用和Node.js内置的http模块类似,是专门用来创建Web服务器的。本质就是一个npm上的第三方包,提供了快速创建Web服务器的便捷方法中文官网http://www.expressjs.com.cn......
  • Jmeter详解
    目录Blazemeter界面详解Jmeter参数化1、用户定义的变量2、CSV数据文件设置3、用户参数4、函数counterRandomtime数据库引用数据库操作断言响应断言响应文本响应代码大小断言控制器IF逻辑控制器ForEach逻辑控制器循环逻辑控制器关联XPath提取器正则表达式提取器跨越线程组传值高并......
  • 入门8-Pytest部分测试用例的前后置(fixture)(1-参数详解)
    使用[email protected](scope=”function”,autouse=False,params=loginutil(),ids=[0,1,2],name="login")各个参数详解Scope:作用域             Function:用例之前和之后    Class:类之前和之后Package/session:#整个项目会话之......
  • 软考中级软件设计师主观题详解
    软件设计题分析试题考察内容数据流图/DFD补充外部实体、数据存储、加工、数据流等数据库设计/ERE-R图关系模式主键/外键规范化理论增加实体UML建模类图用例图活动图等C语言算法C语法+数据结构Java/C++基础语法+设计模式备考策略前三题固定......