1. 程式人生 > >使用高階的CSS選擇器定位元素

使用高階的CSS選擇器定位元素

查詢子元素
<form id="loginForm">
	<label for="username">UserName:	</label> <input type="text" class="username"/></br>
	<label for="password">Password:	</label> <input type="password" class="password"/></br>
	<input name="login" type="submit" value="login"/>
</form>
如果想要定位表單中的使用者名稱輸入框,我們使用在父子元素間使用“>”符號

WebElement username=driver.getElement(By.cssSelector("form#loginForm > input"));

相似的使用nth-child( )方法也可以定位

WebElement username=driver.getElement(By.cssSelector("form#loginForm : nth-child(2)"));

下列表格列出了使用偽類來定位元素的例子

偽類 例子 描述
:first-child form#loginForm : first-child 定位表單裡第一個子元素,username標籤
:last-child form#loginForm : last-child 定位表單裡最後一個子元素,login按鈕
:nth-child( ) form#loginForm : nth-child(2) 定位表單裡第二個子元素,username輸入框
查詢兄弟元素

使用CSS選擇器,我們可以用“+”操作符來定位兄弟元素,以百度首頁為例,可以使用下面的方法來定位百度導航欄上的“網頁”超連結。

WebElement web=driver.getElement(By.cssSelector("#nv a + b"));

#nv a定位到“新聞”連結,“+ b”後就找到其兄弟<b>元素

使用使用者操作偽類

使用使用者的操作行為 :focus 偽類,定位焦點在input框中的元素,方法如下:

WebElement ProductDescription=driver.getElement(By.cssSelector("input:focus"));

你也可以使用 :hover 和 :active 偽類來定位元素

使用UI狀態偽類

使用UI狀態偽類,我們可以通過元素的各種狀態來定位,如enabled,disabled,checked

下列表格給予了詳細的說明

偽類 例子 描述
:enabled input:enabled 定位所有屬性為enabled的input元素
:disabled input:disabled 定位所有屬性為disabled的input元素
:checked input:checked 定位所有多選框屬性為enabled的元素