前言

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

$(.className)  $(By.cssSelector(.className"))
$(.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>
By.cssSelector("form>span>input); //搜索输入框
By.cssSelector("form input);  //搜索输入框
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".../>
By.cssSelector("form :last-child);  //冒号前有空格,定位到form下所有级别的第一个子元素
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/


↙↙↙阅读原文可查看相关链接,并与作者交流