css选择器(selector) xPath的选择器
作者：佚名
字体：[ ] 来源：互联网 时间：12-18 15:45:25
去年我学jQuery的时候，曾经做过一点选择器（selector）的笔记,今天是CSS的选择器，以后还有一部分xPath的选择器。今天的笔记中包括44个选择器，基本涵盖了CSS 2和CSS 3的所有规定
去年我学jQuery的时候，曾经做过一点选择器（selector）的笔记。
这几天拿出来看了一下，发现很多都忘记了。所以，我决定把它们贴在这里，方便以后查看。这对其他朋友应该也是有用的，毕竟选择器是制作网页效果的第一步。
笔记分为两个部分，今天是CSS的选择器，以后还有一部分xPath的选择器。今天的笔记中包括44个选择器，基本涵盖了CSS 2和CSS 3的所有规定。
=====================
CSS选择器笔记
一、基本选择器
通用元素选择器，匹配任何元素
标签选择器，匹配所有使用E标签的元素
class选择器，匹配所有class属性中包含info的元素
id选择器，匹配所有id属性等于footer的元素
实例：代码如下:* { margin:0; padding:0; } p { font-size:2 } .info { background:#ff0; } p.info { background:#ff0; } p.info.error { color:#900; font-weight: } #info { background:#ff0; } p#info { background:#ff0; } 二、多元素的组合选择器
多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔
后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
子元素选择器，匹配所有E元素的子元素F
毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
实例：代码如下:div p { color:#f00; }#nav li { display: }#nav a { font-weight: }div & strong { color:#f00; }p + p { color:#f00; }三、CSS 2.1 属性选择器
匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如&[cheacked]&。以下同。）
E[att=val]
匹配所有att属性等于&val&的E元素
E[att~=val]
匹配所有att属性具有多个空格分隔的值、其中一个值等于&val&的E元素
E[att|=val]
匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以&val&开头的E元素，主要用于lang属性，比如&en&、&en-us&、&en-gb&等等
实例：代码如下:p[title] { color:#f00; }div[class=error] { color:#f00; }td[headers~=col1] { color:#f00; }p[lang|=en] { color:#f00; }blockquote[class=quote][cite] { color:#f00; }四、CSS 2.1中的伪类
E:first-child
匹配父元素的第一个子元素
匹配所有未被点击的链接
匹配所有已被点击的链接
匹配鼠标已经其上按下、还没有释放的E元素
匹配鼠标悬停其上的E元素
匹配获得当前焦点的E元素
匹配lang属性等于c的E元素
实例：代码如下:p:first-child { font-style: }input[type=text]:focus { color:#000; background:# }input[type=text]:focus:hover { background:# }q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; }五、 CSS 2.1中的伪元素
E:first-line
匹配E元素的第一行
E:first-letter
匹配E元素的第一个字母
在E元素之前插入生成的内容
在E元素之后插入生成的内容
实例：代码如下:p:first-line { font-weight:#600; }.preamble:first-letter { font-size:1.5 font-weight: }.cbb:before { content:""; display: height:17 width:18 background:url(top.png) no-repeat 0 0; margin:0 0 0 -18 }a:link:after { content: " (" attr(href) ") "; }六、CSS 3的同级元素通用选择器
匹配任何在E元素之后的同级F元素
实例：代码如下:p ~ ul { background:#ff0;}七、CSS 3 属性选择器
E[att^=&val&]
属性att的值以&val&开头的元素
E[att$=&val&]
属性att的值以&val&结尾的元素
E[att*=&val&]
属性att的值包含&val&字符串的元素
实例：代码如下:div[id^="nav"] { background:#ff0;}八、CSS 3中与用户界面有关的伪类
匹配表单中激活的元素
E:disabled
匹配表单中禁用的元素
匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
E::selection
匹配用户当前选中的元素
实例：代码如下:input[type="text"]:disabled { background:#}九、CSS 3中的结构性伪类
匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n)
匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)
匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)
与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)
与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child
匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type
匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type
匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child
匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type
匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素
实例：代码如下:p:nth-child(3) { color:#f00; }p:nth-child(odd) { color:#f00; }p:nth-child(even) { color:#f00; }p:nth-child(3n+0) { color:#f00; }p:nth-child(3n) { color:#f00; }tr:nth-child(2n+11) { background:#ff0; }tr:nth-last-child(2) { background:#ff0; }p:last-child { background:#ff0; }p:only-child { background:#ff0; }p:empty { background:#ff0; }十、CSS 3的反选伪类
匹配不符合当前选择器的任何元素
实例：代码如下::not(p) { border:1px solid #}十一、CSS 3中的 :target 伪类
匹配文档中特定&id&点击后的效果
请参看HTML DOG上关于该选择器的详细解释和实例。
大家感兴趣的内容
12345678910
最近更新的内容科技需要真相和数据,立志成为最有范儿的测试人社区.
+ &&>>内容
b、通过相对路径定位元素
WebElement ele = driver.findElement(By.xpath(&//input&));
c、使用索引定位元素
WebElement ele = driver.findElement(By.xpath(&//input[4]&));
d、使用XPATH及属性值定位元素
WebElement ele = driver.findElement(By.xpath(&//input[@id='fuck']&));
//其他方法(看字面意思应该能理解吧)
WebElement ele = driver.findElement(By.xpath(&//input[@type='submit'][@name='fuck']&));
WebElement ele = driver.findElement(By.xpath(&//input[@type='submit' and @name='fuck']&));
WebElement ele = driver.findElement(By.xpath(&//input[@type='submit' or @name='fuck']&));
e、使用XPATH及属性名称定位元素
//查找所有input标签中含有type属性的元素
WebElement ele = driver.findElement(By.xpath(&//input[@type]&));
f、部分属性值匹配（和CSS选择器类似）
WebElement ele = driver.findElement(By.xpath(&//input[start-with(@id,'fuck')]&));//匹配id以fuck开头的元素，id='fuckyou'
WebElement ele = driver.findElement(By.xpath(&//input[ends-with(@id,'fuck')]&));//匹配id以fuck结尾的元素，id='youfuck'
WebElement ele = driver.findElement(By.xpath(&//input[contains(@id,'fuck')]&));//匹配id中含有fuck的元素，id='youfuckyou'
g、使用任意值来匹配属性及元素
WebElement ele = driver.findElement(By.xpath(&//input[@*='fuck']&));//匹配所有input元素中含有属性的值为fuck的元素
h、使用XPATH轴来定位元素
//XPATH轴没有实际经验，所以本文不讨论它。
元素定位总结
//注：本专题只介绍java版
WebElement ele = driver.findElement(By.id(&element id&));
WebElement ele = driver.findElement(By.id(&element name&));
//By className
WebElement ele = driver.findElement(By.className(&element ClassName&));
//By tabName
WebElement ele = driver.findElement(By.tagName(&html tagName&));
//By linkText
WebElement ele = driver.findElement(By.linkText(&link text&));
//By partialLinkText
WebElement ele = driver.findElement(By.partialLinkText(&link text&));//通过部分文本定位连接
//By cssSelector
WebElement ele = driver.findElement(By.cssSelector(&css&));
//By XPATH
WebElement ele = driver.findElement(By.xpath(&element xpath&));
如果各位遇到任何问题的话，欢迎在下方留言，我会及时和大家交流讨论~~~
+ 猜你喜欢...
===== 关于 DiggerPlus =====
DiggerPlus是国内新锐测试人垂直内容博客,专注于挖掘测试工具,普及测试技术,专注于测试人能力提升,博客上线后就受到广大测试人的热烈追捧;此外,DiggerPlus深度整合评测资源,揭秘科技数据和真相,让读者更懂科技,更好地把玩科技。
我们始终保持"独立,客观,严谨,优秀"的优良作风,努力为读者带来源源不断的优质内容。想访问更多酷毙的测试人网站?赶紧来看看吧！
===== DiggerPlus Team =====
DiggerPlus Team是DiggerPlus官方发起的团队,这是一群热爱科技,热爱测试,喜欢深度挖掘的热血测试人,他们是评测师,测试专家。
我们欢迎优秀的测试人。
加入DiggerPlus,可以成为我们的,认证Dper拥有DiggerPlus独一无二的专栏并得到个人展示。
===== DiggerPlus 官方读者群 =====
+ 关于本文作者
我也很想让世界变得更美好，可是上帝却不开放源代码。
| 访问的主页
基于开源中国开发
最新文章热门文章随机文章
"Save Binary World"
使用合作网站账号快速登录,更多精彩等着您:CSS Selectors - What is a CSS Selector
About Apple
Tech Today
Web Design/HTML
Living Healthy
Health Tip of the Day
There was an error. Please try again.
Please select a newsletter.
Please enter a valid email address.
Did you mean ?
CSS relies on pattern matching rules to determine which style applies to which element in the document. These patterns are called selectors and they range from tag names (for example, p to match paragraph tags) to very complicated patterns that match very specific parts of a document (for example, p#myid & b.highlight would match any b tag with a class of highlight that is a child of the paragraph with the id myid).
A CSS selector is the part of a CSS style call that identifies what part of the web page should be styled. The selector contains one ore more
that define how the selected HTML will be styled.The CSS SelectorsThere are several different types of selectors: —matching a specific element
continue reading below our video
What Is CSS 3?
—matching elements with a specific class —matching the element with a specific ID —matching elements that are descendants of a specific element —matching elements that are a child of the specific element —matching any element —matching elements immediately preceded by a specific element —matching elements with a specific attribute or attribute value —matching elements with a specific pseudo class —matching elements with specific pseudo-element propertiesFormat CSS Styles and CSS SelectorsThe format of a CSS style looks like this:
selector { style property : } Separate multiple selectors that have the same style with commas. This is called selector grouping. For example: selector1, selector2 { style property : } Grouping selectors is a shorthand mechanism to keep your CSS styles compact. The above grouping would have the same effect as:
selector1 { style property : }selector2 { style property : } Always Test Your CSS SelectorsNot all browsers support all the CSS selectors. So be sure to test your selectors in as many browsers on as many operating systems as you can. But if you are using
you should be fine.
What is a CSS Selector?Selenium+自动化测试（114）
用Selenium实现自动化测试的过程中，如果选择页面上的元素并且对之进行各种操作，是一个常见的任务。Selenium提供了多种定位方法：
id：最有效、最方便的方法
name：跟id类似的
class name：对某些具有相同类的元素一网打尽的好方法
link text 和 partial link text： 用在定位超链接上比较多
tag name：与class name有点类似
css selector：如果你试用jQuery，这个一定是你喜欢的方法
xpath：。。。 /html/body/div/div[2]/div[2]/div[2]/div[5]/div/p[2]
网上很多Selenium的介绍文章，在讲述如何利用定位元素的时候，通常都是这样子说的“打开Firefox浏览器，安装Firebug插件，然后就能方便地获得该元素的XPath了”。由于不求甚解，在一段时间内我真以为这些看起来没什么意义，中间穿插着各种数组操作，读起来反人类反社会的所谓XPath就是真的XPath，同志们大家都被误导了。
什么是XPath：
XPath基础教程：
XPath在Selenium测试中有好些缺点：1. 性能差，定位元素的性能比起大多数其他方法要差；2. 不够健壮，XPath会随着页面元素布局的改变而改变；3. 兼容性不好，在不同的浏览器下对XPath的实现是不一样的。如此多的弱点，为什么它还存在于Selenium中呢？Selenium提供了这7个元素定位的工具，就好像工具箱里面有锤子有老虎钳有螺丝刀，每个工具都能完成特定的任务，前提是要在正确的前提下，正确地使用。
XPath通常会在如下场景：一个写自动化测试的人，发现他想要操作的元素不能通过id, name, link text等比较方便有效的方法来进行定位，苦逼的他没能说服开发这个页面的人把他想要的id加上，他开始用所谓的XPath来定位元素，代码中充满了各种让人摸不着头脑的XPath（/html/body/div/div[3]/div[2]/div[4]/p[2]），在我看来这样的代码跟录制出来的脚本没有任何区别。可读性差，几乎不能维护。XPath理论上可以这样使用，但是实际上应该避免这样的使用。
XPath的一些优点是大家需要知道的，例如：1. XPath可以通过某个元素找到它的祖先(Ancestors)；2. 可以做布尔逻辑判断，例如/button[@value=’submit’ or @name=’tijiao’]
回到上面的场景，假如说那个苦逼的人想定位到页面上的一个提交按钮，这个按钮不能通过id或者name来定位。这个时候他要做的事情不是打开Firebug定位提交按钮右击鼠标再点“Copy XPath”。而是应该是找开发把id或者name加上。如果不行，解决思路可以是：1. 找到该按钮的特征，例如按钮的文字是 submit；2. 用XPath定位，可以这样写：//button[@value=’submit’]。
我个人对使用XPath比较反感的，如果可能的话，尽可能使用id或者name。真的要用XPath，千万千万不要打开Firebug定位提交按钮右击鼠标再点“Copy XPath”。先认真学习XPath，后使用。在很长一段时间里面，我对XPath真的是恨之入骨，恨不得先杀之而后快，但是想到存在就是合理，那么多大牛们都没有把XPath摒弃与Selenium之外，XPath必然有它的价值。最近花了点时间学习了一下XPath，并且读了一些关于如何在Selenium里面正确使用XPath的文章，豁然开朗。
参考文章：
Related posts:
原文地址：&/blog/automationtesting/wrong-xpath-in-selenium/
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：4018940次
积分：41429
积分：41429
排名：第60名
原创：272篇
转载：1325篇
译文：18篇
评论：125条
文章：58篇
阅读：170424
文章：21篇
阅读：77851
(12)(9)(27)(16)(11)(8)(3)(3)(9)(9)(2)(3)(2)(24)(26)(10)(25)(20)(28)(12)(27)(38)(17)(5)(17)(22)(74)(10)(8)(44)(15)(3)(1)(1)(8)(5)(2)(17)(8)(23)(13)(55)(92)(64)(45)(56)(82)(49)(111)(98)(49)(117)(125)(12)(3)(1)(6)(1)(1)(15)(3)(8)(4)Selenium中CSS选择器与Xpath根据页面结构定位元素比较
CSS选择器和Xpath都能通过页面结构对位元素，以下为采用两种方式定位相同元素的例子：&body& &div id='index'&
&div&&/div&
&a&abc&/a&
&li&abc&/li&
&li&&a href=''&&/a&&/li&
&/div& &/div& &/div& &/div&&/body&XPATH地址:id('index')/div[2]/div/ul/div/li[2]/aCSS选择器地址:#index div:nth-of-type(2) div ul li:nth-of-type(2) aSelenium中测试代码@Test public void f() {
driver = new FirefoxDriver();
driver.get(&http://localhost:8080/xpath/bcd.html&);
WebElement ele1 = driver.findElement(By.xpath(&id('index')/div[2]/div/ul/div/li[2]/a&));
String a = ele1.getText();
WebElement ele2 = driver.findElement(By.cssSelector(&#index div:nth-child(2) div ul li:nth-child(2) a&));
Assert.assertEquals(ele2.getText(), a); }CSS选择器和Xpath有着类似的结构，在某些方面两者是可以互相替换使用的。对于某些场景，可以从其中一种推测出另一种的写法。例如我们利用插件获取CSDN首页学院标签的xpath路径为：Xpath：/html/body/div[5]/div/div[1]/ul/li[4]/a，我们可以推导其css选择器路径并添加样式，其效果如下：html body div:nth-of-type(7) div div:nth-of-type(1) ul li:nth-of-type(4) a{Color:Border:}&&Xpath和CSS选择器都能完成定位的功能，相比较而言，由于Selenium使用xpath定位时采用遍历页面的方式，在性能上采用CSS选择器的方式更优。我们把上例中的css选择器路径和xpath路径利用selenium进行元素定位，在大批量情况时，css选择器所用时间更短。Xpath虽然性能指标较差，但是在浏览器中有比较好的插件支持，定位元素比较方便，对于性能要求严格的场景，可考虑通过xpath改写css的方式进行替换。性能测试代码如下：&public class NewTest { WebD WebDriver driver2;
@BeforeTest public void setup() {
ctime = 0;
xtime = 0;
System.setProperty(&webdriver.chrome.driver&, &D://chromed//chromedriver.exe&);
driver = new ChromeDriver();
driver.get(&http://www.csdn.net/&);
driver2 = new ChromeDriver();
driver2.get(&http://www.csdn.net/&); } @Test(invocationCount = 500) public void f() {
long start = System.currentTimeMillis();
WebElement ele = driver2
.findElement(By.cssSelector(&html body div:nth-of-type(5) div div ul li:nth-of-type(4) a&));
ctime += System.currentTimeMillis() - } @Test(invocationCount = 500) public void f2() {
long start = System.currentTimeMillis();
WebElement ele = driver.findElement(By.xpath(&/html/body/div[5]/div/div[1]/ul/li[4]/a&));
xtime += System.currentTimeMillis() - } @Test(dependsOnMethods = { &f2&, &f& }) public void time() {
System.out.println(&x& + xtime);
System.out.println(&c& + ctime);
Assert.assertTrue(xtime & ctime); }}两者在某些方面是很相似的。Css对于根据子元素查找元素是不支持的，所以对于子元素不变，采用Xpath是能屏蔽掉其他页面元素改变。对于其他的定位两者是类似的，定位越是精确，对于页面改变的适应性就越差，采用模糊定位能够较好的屏蔽结构改变，但是会影响总体性能。
最新教程周点击榜
微信扫一扫