摘录: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. 遗传算法selection总结-[Fitness, Tournament, Rank Selection]

    假设个体(individual)用\(h_i\)表示,该个体的适应度(fitness)为\(Fitness(h_i)\),被选择的概率为\(P(h_i)\). 另外假设种群(population)的个 ...

  2. Linux内核调试:kdump、vmcore、crash、kernel-debuginfo【转】

    转自:https://blog.csdn.net/guowenyan001/article/details/19807555 一.简介 linux内核发送崩溃时,kdump会生成一个内核转储文件vmc ...

  3. 二层环路保护,RRPP多环的配置

    作者:邓聪聪 组网需求: 局域网中,由A/B/C/D构成RRPP域1换网络结构,要求环网机构中的任意两条线路中断都不能影响业务. 配置思路: 环路由两部分组成,ring1.ring2,B为环1的主节点 ...

  4. logging模块--日志文件

    初级的使用配置模式类似与print 默认打印waring等级及以上--通过更改等级来测试代码 logging.debug("debug no china") #调试模式 loggi ...

  5. hibernate框架学习之数据查询(HQL)helloworld

    package cn.itcast.h3.hql; import java.util.List; import org.hibernate.Query; import org.hibernate.Se ...

  6. Light OJ 1116

    基础数学:.. #include<bits/stdc++.h> using namespace std; typedef unsigned long long ULL; int main( ...

  7. python学习第7天

    编码的进阶 文件操作 深浅copy

  8. Laravel 5.2响应--后台back()->with('提示信息'),前台为什么收不到?

    ### 今天遇到了个小问题,想后台判断数据的时候,返回前台,然后弹窗提示没有数据 但是前台点了有返回,咩有提示信息 ### 网上找了很9⃣️,关于这方面的都是属于验证时候的相关问题,但是我这个跟验证没 ...

  9. [MySQL]子语句的查询技巧

    一.统计group by语句的行数 group by语句中,如果包含字段统计函数(诸如:count(),sum()...),这种情况下统计函数只会作用于group by的字段,因此想拿到最终结果的行数 ...

  10. Netty学习4—NIO服务端报错:远程主机强迫关闭了一个现有的连接

    1 发现问题 NIO编程中服务端会出现报错 Exception in thread "main" java.io.IOException: 远程主机强迫关闭了一个现有的连接. at ...