前言
在做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
