首页 > 代码库 > selenium css（转）

selenium css（转）

2024-07-30 11:27:50   220人阅读

 
如果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/

Direct child

A direct child in XPATH is defined by the use of a “/“, while on CSS, it’s defined using “>”

Examples:

1
2
3
//div/a
 
css=div > a

Child or subchild

If an element could be inside another or one it’s childs, it’s defined in XPATH using “//” and in CSS just by a whitespace

Examples:

1
2
3
//div//a
 
css=div a

Id

An element’s id in XPATH is defined using: “[@id=‘example‘]” and in CSS using: “#”

Examples:

1
2
3
//div[@id=‘example‘]//a
 
css=div#example a

Class

For class, things are pretty similar in XPATH: “[@class=‘example‘]” while in CSS it’s just “.”

Examples:

1
2
3
//div[@class=‘example‘]//a
 
css=div.example a

Thats’ all for now, as you can see, the first rules a pretty simple, and you even make you locators shorter and cleaner.

综上所述，就是:
有固定id的用id selector，
没有固定id的用css selector。
Pseudo-selements ：contains（）很好用。
会了这几下子，基本上定位就不成问题了。

selenium css（转）


联系
我们