使用CSS选择器定位页面元素
摘录:http://blog.csdn.net/defectfinder/article/details/51734690
CSS选择器也是一个非常好用的定位元素的方法,甚至比Xpath强大。在自动化里我们用CSS选择器来定位页面元素一定要牢记一个准则:唯一定位,通常使用CSS选择器修改样式时会尽量多的选择元素,但是,在自动化里,必须要唯一定位到元素,否则自动化很可能因为找不到页面元素而失败。CSS选择器有很多,像标签选择器、类选择器、ID选择器、关系选择器、伪类选择器、分组选择器等等,但是只需要掌握常用的几种就可以满足定位元素的需求。
以下述HTML为例,总结下CSS选择器的用法:
<div id="menu" class="menu" title="menu">
<ul>
<li id="first" class="catagory book">
<a id="book"></a>
</li>
<li id="second" class="catagory food">
<a id="food"></a>
</li>
<li>
<a id="clothes"></a>
</li>
<li title="submenu">
<a id="furniture"></a>
</li>
</ul>
<a href="....">Welcome to Our Store</a>
</div>
1. 标签选择器
使用HTML标签来选择元素,例如:
driver.findElement(By.cssSelector("li")); //将选择所有li元素
driver.findElement(By.cssSelector("a")); //将选择所有a元素
2. 类选择器
使用类名来选择元素,使用方法:.class, 例如:
driver.findElement(By.cssSelector("div.menu")); //将选择class为menu的div元素driver.findElement(By.cssSelector(".catagory")); //将选择id为first的元素和id为second的元素,因为这两个元素的class里都含有catagory
3. ID选择器
使用ID来选择元素,使用方法:#id,例如:
driver.findElement(By.cssSelector("a#clothes")); //将选择id为clothes的a元素
也可以写成:
driver.findElement(By.cssSelector("#clothes")); //因为id是唯一的所以还是会选择id为clothes的a元素
3. 关系选择器
a.div,p 作用:选择所有div元素和p元素
b.div>p 作用:选择div的直接子元素中的所有p元素
c. div p 作用:选择div的后代元素中的所有p元素
4. 属性选择器
a. [title] 作用:选择所有具有title属性的元素
b. [title='menu'] 作用:选择所有title属性值等于'menu'的元素
c. [title~='menu'] 作用:选择所有title属性值包含menu的元素,注意:menu必须是一个word,
且有空格与其他单词分开
d. [title*='menu'] 作用:选择所有title属性值包含menu的元素,注意:此时menu为substring,而不是word
e. [title|='menu'] 作用:选择所有title属性值以menu开头或者等于menu的元素
f. [title^='menu'] 作用:选择所有title属性值以menu开头的元素
g. [title$='menu'] 作用:选择所有title属性值以menu结尾的元素
h. div[title='menu'] 作用: 选择所有title属性值等于menu的div元素
4. 通用选择器
方法:*
例如: div ul *; //选择div ul 下的所有子元素,包括li和a元素
5. 伪类选择器
伪类选择器很多,只总结下用过的:nth-child(n)
例如:p:nth-child(2) 作用:选择作为第二孩子的p元素
使用CSS选择器定位页面元素的更多相关文章
- web自动化测试---css方式定位页面元素
css方式定位的方法也有很多,相较于xpath更灵活一点,下面就介绍下使用方法(以百度输入框为例) 1.通过tag来定位,可以写成如下: driver.find_element_by_css_sele ...
- 『心善渊』Selenium3.0基础 — 8、使用CSS选择器定位元素
目录 1.CSS选择器介绍 2.CSS选择器定位语法 3.Selenium中使用CSS选择器定位元素 (1)通过属性定位元素 (2)通过标签定位元素 (3)通过层级关系定位元素 (4)通过索引定位元素 ...
- 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...
- 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...
- 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式
查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...
- CSS选择器定位的使用
CSS 可以比较灵活选择控件的任意属性,一般情况下定位速度要比XPath 快,但对于初学者来说比较难以学习使用,下面我们就详细的介绍CSS 的语法与使用.一.CSS 选择器的常见语法: 例如下面一段代 ...
- 『心善渊』Selenium3.0基础 — 10、使用Seleniun定位页面元素归纳总结(超详细)
目录 1.Selenium中8种基本元素定位方式 (1)单数形式 (2)复数形式 2.By类定位的8种定位方式 (1)单数形式 (2)复数形式 3.XPath定位总结 (1)基础定位语法 (2)属性定 ...
- 定位页面元素之xpath详解以及定位不到测试元素的常见问题
一.定位元素的方法 id:首选的识别属性,W3C标准推荐为页面每一个元素设置一个独一无二的ID属性, 如果没有且很难找到唯一属性,解决方法:(1)找开发把id或者name加上.如果不行,解决思路可以是 ...
- selenium中CSS选择器定位
selenium元素定位,CSS选择器定位效率会高很多. CSS选择器用于选择你想要的元素的样式的模式.表格摘自“菜鸟教程”,具体用法可去查阅 选择器 示例 示例说明 CSS .class .intr ...
随机推荐
- Thymeleaf引入公共片段方式
引入公共片段 引入公共片段的th属性,包括三种方式 th:insert 将公共片段,整个插入到声明引入的元素中 th:replace 将声明引入的元素,替换为公共片段 th:include 将被引入的 ...
- 使用git和github管理自己的项目---基础操作学习[转]
原文: https://segmentfault.com/a/1190000003728094 我是通过看廖雪峰的git教程学习的,真的是极好的,以下是我学习过程中的总结,记录下来,方便自己参考以熟悉 ...
- 【转】MySQL— 基础
[转]MySQL— 基础 目录 一.MySQL概述 二.下载安装 三.数据库操作 四.数据表操作 五.表内容操作 一.MySQL概述 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司 ...
- Linux虚拟机安装及环境搭建
1.下载centos,地址:https://www.centos.org/download/ 下载时选择DVD ISO 2.使用VMware Workstation进行安装. 3.虚拟机网络配置 ...
- web层直接调用 dubbo的服务,合适吗?
目前很多互联网app项目,都是采用这样的一个基本项目结构:即由后端提供Restful的api接口,然后供前端例如IOS.Android或者H5端去调用,如图: 在这种结构下,后台的代码分层常规一般会有 ...
- LSH(Locality Sensitive Hashing)原理与实现
原文地址:https://blog.csdn.net/guoziqing506/article/details/53019049 LSH(Locality Sensitive Hashing)翻译成中 ...
- cocos2dx 3.x 修改NDK_ROOT、ANDROID_SDK_ROOT、ANT_ROOT路径
CMD到setup.py目录 Python setup.py -h 查看帮助: Options: -h,--help showthis help message and exi ...
- document.execCommand()的用法小记
项目中遇到金额输入框限制只能输入数字,输入特殊字符或者字母汉字时间隔不到1秒内容就会自动清空.跟正则纠缠多年的我初次见到,很是神奇-.- 代码实现: <input type="text ...
- Java:自动设置环境变量(转载)
引用: https://blog.csdn.net/qq_22498277/article/details/72149038 脚本下载地址:http://files.cnblogs.com/floww ...
- js对数组中的数字排序
1 前言 如果数组里面都是数字,如果用原生的sort,默认是按字符串排序的,不符合我们的要求 2 代码 方法1:添加Array的原生方法 Array.prototype.sort2 =function ...