css元素定位:通过元素的标签或者元素的id、class属性定位,还不明白的伙计,看这个就行了!

news/2024/10/21 5:38:55/

 前言

大部分人在使用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元素定位:通过元素的其它属性定位

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

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

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

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

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

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

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

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

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

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

七、处理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()

最后感谢每一个认真阅读我文章的人,礼尚往来总是要有的,虽然不是什么很值钱的东西,如果你用得到的话可以直接拿走:

在这里插入图片描述

软件测试面试小程序

被百万人刷爆的软件测试题库!!!谁用谁知道!!!全网最全面试刷题小程序,手机就可以刷题,地铁上公交上,卷起来!

涵盖以下这些面试题板块:

1、软件测试基础理论 ,2、web,app,接口功能测试 ,3、网络 ,4、数据库 ,5、linux

6、web,app,接口自动化 ,7、性能测试 ,8、编程基础,9、hr面试题 ,10、开放性测试题,11、安全测试,12、计算机基础

这些资料,对于【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴上万个测试工程师们走过最艰难的路程,希望也能帮助到你!   


http://www.ppmy.cn/news/1069273.html

相关文章

AUTOSAR规范与ECU软件开发(实践篇)6.9 AUTOSAR操作系统概念与配置方法介绍(上)

目录 1、 AUTOSAR操作系统概念 (1) 操作系统的任务(Task) 及其状态 (2) 任务的调度策略(Scheduling Policy)

完美解决 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!

拉取代码时报错&#xff1a; # Mac 报错WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY! Someone could be eavesdropping on you right now (man-in-the-middle attack)! It is also possible that a host key …

【C语言】程序环境预处理 -- 详解

一、程序的翻译环境和执行环境 在 ANSI C 的任何一种实现中&#xff0c;存在两个不同的环境。 翻译环境&#xff0c;在这个环境中源代码被转换为可执行的机器指令。执行环境&#xff0c;它用于实际执行代码。 1、翻译环境 组成一个程序的每个源文件通过编译过程分别转换成目标代…

1.1 数据库系统简介

1.1.数据库系统简介 前言&#xff1a; 数据库系统是一个软件系统&#xff0c;用于管理和操作数据库。它提供了一个组织良好、高效并能够方便存取的数据存储机制&#xff0c;并且能够支持各种数据操作、事务管理、并发控制和恢复功能。以下是数据库系统的一些主要特点和组件&a…

RPM和Yum在Linux的作用与区别

RPM&#xff1a;软件包管理的基础Yum&#xff1a;更智能的软件包管理工具应用流和模块 感谢 &#x1f496; hello大家好&#x1f60a; 在 Red Hat Enterprise Linux 8&#xff08;RHEL 8&#xff09;中&#xff0c;RPM 和 Yum 是软件包管理的关键工具&#xff0c;它们在操作系统…

vscode使用anaconda自带的python环境在终端运行时报错

目录 具体报错内容官方翻译报错讲人话解决方法 具体报错内容 CommandNotFoundError: Your shell has not been properly configured to use conda activate. If your shell is Bash or a Bourne variant, enable conda for the current user with$ echo ". E:\Anaconda/e…

春秋云镜 CVE-2018-7448

春秋云镜 CVE-2018-7448 CMS Made Simple 2.1.6 RCE 靶标介绍 CMS Made Simple 2.1.6版本存在代码注入漏洞&#xff0c;可以通过 timezone 参数执行任意代码。 启动场景 漏洞利用 1、目的文件夹选择/var/www/html/cms 2、next到第四步&#xff0c;数据库名&#xff1a;cms…

go http-proxy

我们这里主要讲使用HTTP&#xff0f;1.1协议中的CONNECT方法建立起来的隧道连接&#xff0c;实现的HTTP Proxy。这种代理的好处就是不用知道客户端请求的数据&#xff0c;只需要原封不动的转发就可以了&#xff0c;对于处理HTTPS的请求就非常方便了&#xff0c;不用解析他的内容…