CssSelector定位分享
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
cssSelector定位
一.为什么使用cssSelector定位元素？
目前针对一些常规定位方式有：By.id、、By.LinkTest(针对标签)、By.ClassName 针对不太好定位的，比如：没有id、name、class的定位方式，或者说id、name、class的value值显示重复，不太方便一下写出定位方式，这样可以考虑下其它定位方式。以下主要介绍cssSelector如何解决id、name、class的value值显示重复的定位方式。
二.基础语法
三.css常用的定位方式介绍
1.E代表的是标签；
2.E>F：F也是代表的标签，称为子代元素，F是E的子代元素，说通俗一点F是E的儿子
关系，F紧跟着E后面的第一个元素，直接的下一级；
3. E F：隔着多层标签，称为后代元素。通俗点说祖宗辈关系，例如爷爷和孙子关系；
4.E+F：匹配紧随E元素之后的同级元素F（只匹配第一个），称为毗邻元素选择器。通俗
点解释E是大哥，后面有多个弟弟，只取它最近一个弟弟F；
5. E ~ F：同级标签，称为同级元素选择器。通俗称为兄弟关系，例如哥哥和弟弟关系；
6.E[att='val']：E代表标签，att代表属性，val指属性的值；
7.E[att1='v1'][att2*='v2']:多属性选择器，针对一个标签有多个属性，做并且的关系同时满
足条件；
class：点代表class；
9.#footer id：#号代表id；
10.ele:nth-of-type(n)是指其父元素下第n个ele元素。例如：同一级下有10个div标签，那
么只需要定位其中6个div，这时代码可以这样写：div:nth-of-type(6)，括号中的数据代表索引查找第n个元素；
四．cssSelector常用定位方式的案例
1.例如这样一段html代码的网页
- Cat
- Dog
- Car
- Goat
Heading
2.匹配示例：
3.针对特殊标签定位方式：
a).如果class里带的空格，用.来代替空格如：
可以这样写：
css=button.x-btn-text.module_picker_icon
b）.如果你想定位一个显示OK的Button，但页面上有几个Button，id是自动生成的，class是一样的，我又想用一个简单点的CSS locator的时候，
可以这样写：
css=button.x-right-button:contains("OK")
:contains是个Pseudo-class，用冒号开头，括号里是内容。
Pseudo-classes是CSS提供的伪类，用来访问页面上DOM tree之外的信息，还有Pseudo-elements 用来最精准的定位页面上的某一行文字，甚至某一行文字的第一个字母。这个得具体研究一下css3 selector文档的Chapter 6.6 Pseudo-classes 和 Chapter 7 Pseudo-elements
4.综上所述，就是:
有固定id的用id selector，
没有固定id的用css selector。
Pseudo-selements ：contains（）很好用。会了这几下子，基本上定位就不成问题了。