Selenium官网的Document里极力推荐使用CSS locator,而不是XPath来定位元素,原因是CSS locator比XPath locator速度快,特别是在IE下面(IE没有自己的XPath 解析器(Parser))。原来对CSS定位元素一直不太明白,今天看了一下,发现其实它和XPath很像,基本上用XPath能定位的元素,都能用CSS Selector定位到。
如果元素上有class属性的,如:<button id="ext-eng=1026" class="x-right-button" />
可以这样写:
driver.findElement(By.cssSelector("button.x-right-button"));
由于多个元素可能由相同的class,所以通过class属性值定位到的元素可能由多个,此时如果使用findElement,那么只选取定位到的第一个元素,使用findElements可将定位到的所有元素保存到链表中:
List<WebElement> list = driver.findElements(By.cssSelector("button.x-right-button"));
如果有多个class,即class里带空格,用.来代替空格如:
<button class="x-btn-text module_picker_icon" />
可以这样写:
driver.findElement(By.cssSelector("button.x-btn-text.module_picker_icon"));
.代表class
如果想用别的属性值定位,用方括号【属性名=属性值】的方式,如:
<button id="stop" class="om-btn-txt">ok</button>
driver.findElement(By.cssSelector("button[id='stop']"));
id属性也可以这样写:
driver.findElement(By.cssSelector("button#stop"));
或者直接写
driver.findElement(By.cssSelector("#stop"));
#代表id
没有固定id的情况则不能用id属性来定位,如:
<button id="ext-eng-1026" >,下回可能就是<button id="ext-eng-2047">
//下面这种方法测试不通过,提示an invalid or illegal string was specified,有待研究(eclipse firefox)
如果你想定位一个显示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
综上所述,就是:
有固定id的用id selector,
没有固定id的用css selector。
Pseudo-selements:nth-child(4) 表示查找第四个Pseudo-selements元素
Pseudo-selements:contains("string") 表示查找包含string的Pseudo-selements元素(该方法还有待研究)
会了以上方法,基本上定位就不成问题了。
这里记录我用到的复杂点的定位:
driver.findElement(By.cssSelector("div#west-panel>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div"));
driver.findElement(By.cssSelector("td.col5>div>input:nth-child(4)"));
如果元素上有class属性的,如:<button id="ext-eng=1026" class="x-right-button" />
可以这样写:
driver.findElement(By.cssSelector("button.x-right-button"));
由于多个元素可能由相同的class,所以通过class属性值定位到的元素可能由多个,此时如果使用findElement,那么只选取定位到的第一个元素,使用findElements可将定位到的所有元素保存到链表中:
List<WebElement> list = driver.findElements(By.cssSelector("button.x-right-button"));
如果有多个class,即class里带空格,用.来代替空格如:
<button class="x-btn-text module_picker_icon" />
可以这样写:
driver.findElement(By.cssSelector("button.x-btn-text.module_picker_icon"));
.代表class
如果想用别的属性值定位,用方括号【属性名=属性值】的方式,如:
<button id="stop" class="om-btn-txt">ok</button>
driver.findElement(By.cssSelector("button[id='stop']"));
id属性也可以这样写:
driver.findElement(By.cssSelector("button#stop"));
或者直接写
driver.findElement(By.cssSelector("#stop"));
#代表id
没有固定id的情况则不能用id属性来定位,如:
<button id="ext-eng-1026" >,下回可能就是<button id="ext-eng-2047">
//下面这种方法测试不通过,提示an invalid or illegal string was specified,有待研究(eclipse firefox)
如果你想定位一个显示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
综上所述,就是:
有固定id的用id selector,
没有固定id的用css selector。
Pseudo-selements:nth-child(4) 表示查找第四个Pseudo-selements元素
Pseudo-selements:contains("string") 表示查找包含string的Pseudo-selements元素(该方法还有待研究)
会了以上方法,基本上定位就不成问题了。
这里记录我用到的复杂点的定位:
driver.findElement(By.cssSelector("div#west-panel>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div"));
driver.findElement(By.cssSelector("td.col5>div>input:nth-child(4)"));