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

 前言

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

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

如果下方文字内容你还是不太明白的话,可以看下这个更加详细的web自动化测试的详细教程

一、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.hqwc.cn/news/87965.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DEA创建maven项目,项目结构无src目录和pom.xml文件内容

File > Settings > Build,Execution,Deployment > Build Tools > Maven > Runnner,界面中VM Options 输入框中填入-DarchetypeCataloginternal&#xff0c;重启IDEA&#xff0c;打开即会有src目录和pom.xml文件。 -DarchetypeCataloginternal -DarchetypeCatal…

Docker harbor私有仓库部署与管理

一、搭建本地私有仓库二、Harbor私有仓库部署与管理1、Harbor概述2、Harbor的特性3、Harbor的核心组件3.1 Proxy3.2 Registry3.3 Core services3.3.1 UI&#xff08;harbor-ui&#xff09;3.3.2 WebHook3.3.3 Token 服务 3.4 Database&#xff08;harbor-db&#xff09;3.5 Log…

C语言这么没用??

今日话题&#xff0c;C语言真的这么不堪吗&#xff1f;最近我兄弟向我倾诉&#xff0c;他在几天前受到老板的责骂&#xff0c;原因是他只懂C语言编程&#xff0c;无法达到老板的期望。其实不是C语言不堪&#xff0c;而是嵌入式领域复杂性多种多样&#xff0c;需要灵活的解决方案…

面试题-React(七):React组件通信

在React开发中&#xff0c;组件通信是一个核心概念&#xff0c;它使得不同组件能够协同工作&#xff0c;实现更复杂的交互和数据传递。常见的组件通信方式&#xff1a;父传子和子传父 一、父传子通信方式 父组件向子组件传递数据是React中最常见的一种通信方式。这种方式适用…

成都智慧企业发展研究院总经理郑小华:践行双轮驱动,为能源电力数智化注入新活力丨数据猿专访...

大数据产业创新服务媒体 ——聚焦数据 改变商业 随着全球经济走向数字化&#xff0c;中国正处于这一浪潮的前沿&#xff0c;进行前所未有的技术与产业深度融合。政府在2023年2月印发的《数字中国建设整体布局规划》等政策下&#xff0c;明确展示了对数字经济的支持与鼓励&…

ASUS华硕天选4笔记本电脑FA507XV原厂Windows11系统22H2

天选四FA507X原装系统自带所有驱动、出厂主题壁纸LOGO、Office办公软件 华硕电脑管家、奥创控制中心等预装程序&#xff0c;恢复出厂状态W11 链接&#xff1a;https://pan.baidu.com/s/1SPoFW7wR5KawGu-yMckNzg?pwdayxd 提取码&#xff1a;ayxd

Redis之集群模式

一、Redis集群 一个节点就是一个运行在集群模式下的Redis服务器&#xff0c;Redis服务器在启动时会根据cluster-enabled配置选项是否为yes来决定是否开启服务器的集群模式。 Redis节点不会互相发现&#xff0c;连接各个节点的工作需要使用cluster meet命令来完成 CLUSTER MEE…

sql:SQL优化知识点记录(五)

&#xff08;1&#xff09;explain之例子 &#xff08;2&#xff09;索引单表优化案例 上面的功能已经实现&#xff0c;但是分析功能&#xff0c; 使用explain分析这条sql&#xff1a; 发现type为All Extra&#xff1a;有Using filesort &#xff08;文件内排序&#xff09; 这…

【Day-22慢就是快】代码随想录-二叉树-理论基础

二叉树的种类 满二叉树 如果一棵二叉树只有度为0的结点和度为2的结点&#xff0c;并且度为0的结点在同一层上&#xff0c;则这棵二叉树为满二叉树。 深度为K&#xff0c;有2^k-1个节点。 完全二叉树 在完全二叉树中&#xff0c;除了最底层节点可能没填满外&#xff0c;其余…

Ubuntu下安装nginx服务,实现通过URL读取ubuntu下图片

1.安装nginx包 sudo apt update sudo apt install nginx 2.安装完成后系统自动启动nginx sudo systemctl status nginx 查看nginx服务的状态 3.开启防火墙上的HTTP服务端口80 sudo ufw allow ‘Nginx HTTP’ 4.在浏览器输入 http://localhost 看到nginx的欢迎界面&#xff0c;…

Nacos基础(3)——nacos+nginx 集群的配置和启动 端口开放 nginx反向代理nacos集群

目录 引出nacos集群nginx反向代理nacos集群停止单例nacos准备8848和8858修改cluster.conf配置【配置】修改启动配置文件【配置】开放8858的端口分别以集群方式启动【启动】前端访问查看生产者测试8858nacos nginx反向代理配置代理tcp代理http启动nginx反向代理容器生产者访问测…

svn下载

Download | VisualSVN for Visual Studio svn下载