Selenium - CSS Selector
2014-08-12 15:55
344 查看
用CSS(即层叠样式表Cascading Stylesheet) Selector来定位(locate)页面上的元素(Elements)。
Selenium官网的Document里极力推荐使用CSS locator,而不是XPath来定位元素,原因是CSS locator比XPath locator速度快,特别是在IE下面(IE没有自己的XPath 解析器(Parser))。用CSS Selector能非常精准的定位到想测试的Elements,因为前端开发人员就是用CSS Selector设定页面上每一个元素的样式,无论那个元素的位置有多复杂,他们能定位到,那我们也能定位到。
读一下这个文档就能明白大部分的CSS Selector了
http://www.w3.org/TR/css3-selectors/
1.button上有class属性的,如:
<button id="ext-eng=1026" class="x-right-button"...>
可以这样写:
css=button.x-right-button
.代表class
如果class里带的空格,用.来代替空格如:
<button class="x-btn-text module_picker_icon">...
可以这样写:
css=button.x-btn-text.module_picker_icon
2.如果想用别的属性值定位,用方括号【属性名=属性值】的方式,如:
<abbr>Abc<abbr/>
css=abbr[title="Abc"]
3.如果button上有id属性的,如:
<input id="ag_name" type="text"...>
可以这样写:
css=input#ag_name
或者直接写
css=#ag_name
#代表id
但是在实际应该中,如果有元素固定id的,可以直接用id locator,这样写:
id=ag_name
这通常是在Form里的input元素, 需要用户填写内容然后提交的部分,也是最简单的部分。
没有固定id的,通常是由javascript框架自动生成的id如,每次加载页面都会改变的,如:
<button id="ext-eng-1026" >,下回可能就是<button id="ext-eng-2047">
这种情况不能使用id属性来定位。
如果你想定位一个显示OK的Button,但页面上有几个Button,id是自动生成的,class是一样的,我又想用一个简单点的CSS locator的时候,
<button id="ext-eng-1026" class="x-right-button">OK</button>
<button id="ext-eng-1027" class="x-right-button">Cancel</button>
可以这样写:
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.基本上用XPath能定位的元素,都能用CSS Selector定位到。
它两最相似的是这样写:
<table><tr><td><div><span>abcd</span><span>1234</span></div></td></tr></table>
xpath=//table/tr/td/div/span[1]
css=table>tr>td>div>span:nth-child(1)
*xpath没在页面上测试过。
一个非常好的blog,不看可惜了。
http://saucelabs.com/blog/index.php/2009/10/selenium-tip-of-the-week-start-improving-your-locators/ http://bbs.opentest.cn/thread-594-1-1.html
5.综上所述,就是:
有固定id的用id selector,
没有固定id的用css selector。
Pseudo-selements :contains()很好用。
来自:http://blog.csdn.net/hwm831002/article/details/8424239
Selenium官网的Document里极力推荐使用CSS locator,而不是XPath来定位元素,原因是CSS locator比XPath locator速度快,特别是在IE下面(IE没有自己的XPath 解析器(Parser))。用CSS Selector能非常精准的定位到想测试的Elements,因为前端开发人员就是用CSS Selector设定页面上每一个元素的样式,无论那个元素的位置有多复杂,他们能定位到,那我们也能定位到。
读一下这个文档就能明白大部分的CSS Selector了
http://www.w3.org/TR/css3-selectors/
1.button上有class属性的,如:
<button id="ext-eng=1026" class="x-right-button"...>
可以这样写:
css=button.x-right-button
.代表class
如果class里带的空格,用.来代替空格如:
<button class="x-btn-text module_picker_icon">...
可以这样写:
css=button.x-btn-text.module_picker_icon
2.如果想用别的属性值定位,用方括号【属性名=属性值】的方式,如:
<abbr>Abc<abbr/>
css=abbr[title="Abc"]
3.如果button上有id属性的,如:
<input id="ag_name" type="text"...>
可以这样写:
css=input#ag_name
或者直接写
css=#ag_name
#代表id
但是在实际应该中,如果有元素固定id的,可以直接用id locator,这样写:
id=ag_name
这通常是在Form里的input元素, 需要用户填写内容然后提交的部分,也是最简单的部分。
没有固定id的,通常是由javascript框架自动生成的id如,每次加载页面都会改变的,如:
<button id="ext-eng-1026" >,下回可能就是<button id="ext-eng-2047">
这种情况不能使用id属性来定位。
如果你想定位一个显示OK的Button,但页面上有几个Button,id是自动生成的,class是一样的,我又想用一个简单点的CSS locator的时候,
<button id="ext-eng-1026" class="x-right-button">OK</button>
<button id="ext-eng-1027" class="x-right-button">Cancel</button>
可以这样写:
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.基本上用XPath能定位的元素,都能用CSS Selector定位到。
它两最相似的是这样写:
<table><tr><td><div><span>abcd</span><span>1234</span></div></td></tr></table>
xpath=//table/tr/td/div/span[1]
css=table>tr>td>div>span:nth-child(1)
*xpath没在页面上测试过。
一个非常好的blog,不看可惜了。
http://saucelabs.com/blog/index.php/2009/10/selenium-tip-of-the-week-start-improving-your-locators/ http://bbs.opentest.cn/thread-594-1-1.html
5.综上所述,就是:
有固定id的用id selector,
没有固定id的用css selector。
Pseudo-selements :contains()很好用。
来自:http://blog.csdn.net/hwm831002/article/details/8424239
相关文章推荐
- Selenium - CSS Selector
- selenium -- cssSelector
- Selenium - CSS Selector
- selenium+python find_element_by_css_selector方法使用
- 解决使用selenium的这一句driver.findElements(By.cssSelector("XXX"))时,元素id为数字开头会出现报错的问题
- Selenium学习笔记21_CSS Selector
- 【Selenium专题】元素定位之CssSelector
- 【Selenium专题】元素定位之CssSelector
- Selenium-Css Selector使用方法
- selenium+python find_element_by_css_selector方法使用
- selenium元素查找find_element_by_css_selector()实例
- Selenium_WebDriver登录模拟鼠标移动切换窗口等操作练习(cssSelector初练手)_Java
- 模拟浏览器自动化测试工具Selenium之四cssSelector元素定位开发篇
- CssSelector之selenium元素定位
- selenium定位元素之By.className()和By.cssSelector()
- python+selenium元素定位之 css selector 和 classname的区别
- [Selenium] The most commonly used CSSSelector
- Selenium_WebDriver登录模拟鼠标移动切换窗体等操作练习(cssSelector初练手)_Java
- Java学习-029-JSON 之三 -- 模仿 cssSelector 封装读取 JSON 数据方法
- selenium使用Xpath+CSS+JavaScript+jQuery的定位方法(治疗selenium各种定位不到,点击不了的并发症)