摘录: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选择器定位页面元素的更多相关文章

  1. web自动化测试---css方式定位页面元素

    css方式定位的方法也有很多,相较于xpath更灵活一点,下面就介绍下使用方法(以百度输入框为例) 1.通过tag来定位,可以写成如下: driver.find_element_by_css_sele ...

  2. 『心善渊』Selenium3.0基础 — 8、使用CSS选择器定位元素

    目录 1.CSS选择器介绍 2.CSS选择器定位语法 3.Selenium中使用CSS选择器定位元素 (1)通过属性定位元素 (2)通过标签定位元素 (3)通过层级关系定位元素 (4)通过索引定位元素 ...

  3. 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...

  4. 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

  5. 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式

    查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...

  6. CSS选择器定位的使用

    CSS 可以比较灵活选择控件的任意属性,一般情况下定位速度要比XPath 快,但对于初学者来说比较难以学习使用,下面我们就详细的介绍CSS 的语法与使用.一.CSS 选择器的常见语法: 例如下面一段代 ...

  7. 『心善渊』Selenium3.0基础 — 10、使用Seleniun定位页面元素归纳总结(超详细)

    目录 1.Selenium中8种基本元素定位方式 (1)单数形式 (2)复数形式 2.By类定位的8种定位方式 (1)单数形式 (2)复数形式 3.XPath定位总结 (1)基础定位语法 (2)属性定 ...

  8. 定位页面元素之xpath详解以及定位不到测试元素的常见问题

    一.定位元素的方法 id:首选的识别属性,W3C标准推荐为页面每一个元素设置一个独一无二的ID属性, 如果没有且很难找到唯一属性,解决方法:(1)找开发把id或者name加上.如果不行,解决思路可以是 ...

  9. selenium中CSS选择器定位

    selenium元素定位,CSS选择器定位效率会高很多. CSS选择器用于选择你想要的元素的样式的模式.表格摘自“菜鸟教程”,具体用法可去查阅 选择器 示例 示例说明 CSS .class .intr ...

随机推荐

  1. Thymeleaf引入公共片段方式

    引入公共片段 引入公共片段的th属性,包括三种方式 th:insert 将公共片段,整个插入到声明引入的元素中 th:replace 将声明引入的元素,替换为公共片段 th:include 将被引入的 ...

  2. 使用git和github管理自己的项目---基础操作学习[转]

    原文: https://segmentfault.com/a/1190000003728094 我是通过看廖雪峰的git教程学习的,真的是极好的,以下是我学习过程中的总结,记录下来,方便自己参考以熟悉 ...

  3. 【转】MySQL— 基础

    [转]MySQL— 基础 目录 一.MySQL概述 二.下载安装 三.数据库操作 四.数据表操作 五.表内容操作 一.MySQL概述 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司 ...

  4. Linux虚拟机安装及环境搭建

    1.下载centos,地址:https://www.centos.org/download/ 下载时选择DVD ISO 2.使用VMware Workstation进行安装. 3.虚拟机网络配置    ...

  5. web层直接调用 dubbo的服务,合适吗?

    目前很多互联网app项目,都是采用这样的一个基本项目结构:即由后端提供Restful的api接口,然后供前端例如IOS.Android或者H5端去调用,如图: 在这种结构下,后台的代码分层常规一般会有 ...

  6. LSH(Locality Sensitive Hashing)原理与实现

    原文地址:https://blog.csdn.net/guoziqing506/article/details/53019049 LSH(Locality Sensitive Hashing)翻译成中 ...

  7. 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 ...

  8. document.execCommand()的用法小记

    项目中遇到金额输入框限制只能输入数字,输入特殊字符或者字母汉字时间隔不到1秒内容就会自动清空.跟正则纠缠多年的我初次见到,很是神奇-.- 代码实现: <input type="text ...

  9. Java:自动设置环境变量(转载)

    引用: https://blog.csdn.net/qq_22498277/article/details/72149038 脚本下载地址:http://files.cnblogs.com/floww ...

  10. js对数组中的数字排序

    1 前言 如果数组里面都是数字,如果用原生的sort,默认是按字符串排序的,不符合我们的要求 2 代码 方法1:添加Array的原生方法 Array.prototype.sort2 =function ...