Selenium - CSS Selector

http://www.cnblogs.com/bugua/archive/2012/08/16/2641647.html
 
昨天我练习了用CSS(即层叠样式表Cascading Stylesheet) Selector来定位(locate)页面上的元素(Elements)。Selenium官网的Document里极力推荐使用CSS locator,而不是XPath来定位元素,原因是CSS locator比XPath locator速度快,特别是在IE下面(IE没有自己的XPath 解析器(Parser))。有很多跟Selenium相关的Blog文章都有提到使用CSS Selector的技术。之前我不会CSS Selector,甚至一看到CSS就头疼。但我相信用CSS Selector能非常精准的定位到我想测试的Elements。因为前端开发人员就是用CSS Selector设定页面上每一个元素的样式,无论那个元素的位置有多复杂,他们能定位到,那我也能定位到。
读一下这个文档就能明白大部分的CSS Selector了
http://www.w3.org/TR/css3-selectors/
 
如果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
 
 
如果想用别的属性值定位,用方括号【属性名=属性值】的方式,如:
<abbr>Abc<abbr/>
css=abbr[title="Abc"]
 
如果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
 
 
基本上用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/
 
综上所述,就是:
有固定id的用id selector, 
没有固定id的用css selector。 
Pseudo-selements :contains()很好用。
会了这几下子,基本上定位就不成问题了。

Selenium - CSS Selector的更多相关文章

  1. Selenium - Css Selector 使用方法

    什么是Css Selector? Css Selector定位实际就是HTML的Css选择器的标签定位 工具 Css Selector可以下载火狐浏览器插件,FireFinder 或 FireBug和 ...

  2. Selenium 使用css selector (资源来源于网络)

    Selenium - CSS Selector 昨天我练习了用CSS(即层叠样式表Cascading Stylesheet) Selector来定位(locate)页面上的元素(Elements).S ...

  3. 转:Selenium之CSS Selector定位详解

    CSS selector定位 CSS(Cascading Style Sheets)是一种语言,它被用来描述 HTML 和 XML 文档的样式.  百度输入框: <input name=&quo ...

  4. 关于Selenium.common.exceptions.WebDriverException: Message: Invalid locator strategy: css selector 的问题

    在执行脚本时报Selenium.common.exceptions.WebDriverException: Message: Invalid locator strategy: css selecto ...

  5. selenium中Xpath和CSS Selector的使用方法

    一.selenium中Xpath的使用方法 1. 什么是xpath? Xpath是XML的路径语言,通俗一点讲就是通过元素的路径来查找这个标签元素 2. 练习Xpath的工具 火狐浏览器,下载插件Fi ...

  6. selenium:css_selector定位详解(css selector和xpath的比较)

    selenium使用css selector和xpath的比较 selenium提供的定位方式(常用) ID NAME CLASS CSS SELECTOR XPATH   推荐的定位方式的优先级 优 ...

  7. Selenium的Css Selector使用方法

    什么是Css Selector? Css Selector定位实际就是HTML的Css选择器的标签定位 工具 Css Selector的练习建议大家安装火狐浏览器后,下载插件,FireFinder 或 ...

  8. Selenium之Css Selector使用方法

    什么是Css Selector? Css Selector定位实际就是HTML的Css选择器的标签定位 工具 Css Selector的练习建议使用火狐浏览器,下载插件,FireFinder.Fire ...

  9. selenium之css selector定位

    什么是CSS Selector? Css Selector定位实际就是HTML的Css选择器的标签定位 工具 Css Selector的练习建议大家安装火狐浏览器(49及以下版本)后,下载插件Fire ...

随机推荐

  1. Gym 100500B

    题目给了四个轮子,每个轮子上有按顺序排列的n个数,要求适当旋转每个轮子,使得四个轮子相同行数相加和相同. 首先,可以计算出每一行的和应该是多少,记为Sum.然后固定第一个轮子,二重循环枚举2.3轮子, ...

  2. [算法]检测空间三角形相交算法(Devillers & Guigue算法)

    #pragma once //GYDevillersTriangle.h /* 快速检测空间三角形相交算法的代码实现(Devillers & Guigue算法) 博客原地址:http://bl ...

  3. WF(二)

    步骤一: 运用WF(一)中创建好的solution 重命名Workflow1.xaml,变为SayHello.xaml 并在属性窗口设置名称为HelloWorkflow.SayHello,如下图: ( ...

  4. zigbee学习之路(七):定时器3(中断方式)

    一.前言 上次我们学习了了用定时器3进行查询方式来进行溢出判断,今天我们来换一种方式,用中断方式来检测和查询定时器3的溢出. 二.原理与分析 要使用定时器3,我们必须先要配置的是T3CTL,来把定时器 ...

  5. windows消息和消息队列

    windows消息和消息队列 转自:http://blog.163.com/zhangjie_0303/blog/static/990827062010113062446767/ 与基于MS - DO ...

  6. Visual Studio的Web Performance Test提取规则详解(1)

    总结 Visual Studio的Web Performance Test是基于HTTP协议层的,它不依赖于浏览器,通过直接接收,发送HTTP包来和Web服务器交互.Web Performance T ...

  7. android 事件监听

    步骤: 1.获取代表控件对象. 2.定义一个类,实现监听接口. 3.生成监听器对象. 4.为控件绑定监听器对象. XML <LinearLayout xmlns:android="ht ...

  8. R----plotly包介绍学习

    plotly包:让ggplot2的静态图片变得可交互 Plotly 是个交互式可视化的第三方库,官网提供了Python,R,Matlab,JavaScript,Excel的接口,因此我们可以很方便地在 ...

  9. VS2012解决方案的设置

    用VS开发项目时,一个解决方案可以包含多个项目,在此我记录一下: 1.首先我新建一个Win32Demo的解决方案: 2.勾选"空项目": 3.新建完之后,会默认生成一个Win32D ...

  10. PHP延迟静态绑定:static关键字

    PHP5.3中引入了延迟静态绑定的概念.该特性最明显的标志就是新关键字static.static类似于self,但它指的是被调用的类而不是包含类.在本例中,它的意思是调用Document::creat ...