Web 頁面常用元素定位

前言

在做Web UI自動化的時候，頁面元素定位是基本要求，爲了降低學習成本，特整理了常用的頁面元素定位方法和說明。

說明

（1）String elementContent; //爲元素名字
（2）元素獲取方式使用了selenide語法

頁面元素定位方法如下：

1、id: WebElement的id屬性

<!-- html示例 -->
<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

$(By.id(elementContent));

2、name: WebElement的name屬性

<!-- html示例 -->
<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

$(By.name(elementContent));

3、xpath:

$(By.xpath(elementContent));

4、text:爆款推薦

<!-- html示例 -->
<span class="t">爆款推薦</span>

$(byText(elementContent));

5、tagName: span

<!-- html示例 -->
    <span class="gray">Hi,</span>

$(By.tagName(“tagName")) 或$$(By.tagName(tagName))

6、cssSelector常用定位

6.1 根據tagName：

$(“tagName”) 或 $(By.cssSelector(“tagName”))

6.2 根據id：

$(“tagName#id”) 或 $(By.cssSelector(“tagName#id”))

6.3 根據className

• 單一class

$(“.className”) 或 $(By.cssSelector(“.className"))

• 複合class

$(“.className1.className2...”) 或 $(By.cssSelector(“.className1.className2..."))

6.4 cssSelector根據元素屬性

• 精準匹配

//屬性名=屬性值,id,class,等都可寫成這種形式
$(“tagName[name=‘elementContent']”) 或 $(By.cssSelector(“tagName[name=‘elementContent']”))  

//存在屬性。例如img元素存在alt屬性
$(“img[alt]”) 或 $(By.cssSelector(“img[alt]”))

//多屬性
$("input[type='submit'][value='Login']”) 或 $(By.cssSelector(“input[type='submit'][value='Login']”))

• 模糊匹配（正則表達式匹配屬性）

// ^= 匹配到頭部
By.cssSelector(Input[id ^='ctrl’]); //匹配到id頭部 如ctrl_12
// $= 匹配到尾部
By.cssSelector(Input[id $='ctrl’]);  //匹配到id尾部 如a_ctrl
// *= 匹配到中間
By.cssSelector(Input[id *= 'ctrl’]);  //匹配到id中間如1_ctrl_12

6.5 查詢子元素

<!-- HTML案例 -->
<form id="form" class="fm" name="f">
　　<span id="s_kw_wrap" class="bg s_ipt_wr quickdelete-wrap">
　　　　<input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd">
　　</span>
　　<span id="s_btn_wr" class="btn_wr s_btn_wr bg">
　　　　<input id="su" class="btn self-btn bg s_btn" type="submit" value="百度一下">
　　</span>
</form>

• 子元素 A>B

By.cssSelector("form>span>input”); //搜索輸入框

• 後代元素 A空格B

By.cssSelector("form input”);  //搜索輸入框

• 第一個後代元素 空格:first-child

By.cssSelector("form :first-child”);  //冒號前有空格，定位到form下所有級別的第一個子元素
//可定位到三個元素：<span id="s_kw_wrap".../> <input id="kw"..../> <input id="su"........./>
By.cssSelector("form input:first-child”); //冒號前無空格，定位到form下所有級別的第一個input元素
//可定位到兩個元素：<input id="kw"..../> <input id="su"........./>
By.cssSelector("form>span:first-child”); //冒號前無空格，定位到form直接子元素中的第一個span元素
//可定位到一個元素：<span id="s_kw_wrap".../>

• 最後一個子元素 :last-child [類同:first-child]

By.cssSelector("form :last-child”);  //冒號前有空格，定位到form下所有級別的第一個子元素

• 第2個子元素 :nth-child(N) [類同:first-child]

By.cssSelector("form#form :nth-child(2)”);  //冒號前有空格，定位到form下所有級別的第二個子元素

6.6 查詢兄弟元素——待驗證

driver.findElement(By.cssSelector("form#form span+span")); 定位到a 再定位到和它相鄰的b

備註：深入學習cssselector可訪問以下地址：https://www.w3.org/TR/selectors-3/