使用高階的CSS選擇器定位元素
阿新 • • 發佈:2018-12-26
查詢子元素
如果想要定位表單中的使用者名稱輸入框,我們使用在父子元素間使用“>”符號<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的元素 |