慕课网学习笔记：web端功能自动化定位元素
用CSS选择器定位元素
基本语法：
tag[attribute='value']
同时使用两个属性定位元素：
tag[attribute1='value1'][attribute2='value2']
例：button[type='submit'][class='res-send']
ID选择器
ID选择器有三种常用表示方式，在这里引用某网站页面的部分HTML代码来举例表示。
<div class="popup-bank" id="popup-bank-newuser" style="display: none">
<a class="popup-close BankStorageClose" href="javascript:void(0)"></a>
<img src="https://imgcdn1.migang.com/v2/images/common/account_bank.png?v=1513325912">
<div class="popup-bank-box">
<p class="popup-user-text">开通银行存管后，您在银行开设电子账户，您的全部资金将存放到银行电子账户中，资金安全得到全面保障。</p>
<p class="popup-user-text">根据银行规定，用户必须在平台进行实名开户后，才能进行资金操作。您的实名开户信息均由银行验证，请放心操作。</p>
<div class="mg-submit-btn"><a class="btn" href="https://p2p.migang.com/reg/complete_reg/from/news">开设银行存管账户</a><!-- <a class="skip-btn BankStorageClose" href="javascript:void(0)">暂不开设</a> --></div>
</div>
</div>举例：定位 id 为 popup-bank-newuser 的 div
- div[id='popup-bank-newuser']
- #popup-bank-newuser
- body #popup-bank-newuser
ID可以用 # 加上ID值的方式表示。如果ID不唯一，且同一ID所在标签不同，可以在 # 前加上目标元素的标签和一个空格。
Class选择器
Class选择器也有三种常用表示方式。举例如下：
- div[class='popup-bank alert-adowntime']
- .popup-bank
- div.alert-adowntime
用第一种class='value'的方式时，单引号内的值必须和目标元素的class完全一致。用后面两种带"."的方式时，可以只包含class中的某一个值（多个值情况下），但这时可能存在不唯一的情况，因为查找到的是class中包含查找值的所有元素，且定位到第一个元素。这时可以利用追加类的方式，语法如下：
.class1.class2.class3，例如：.popup-bank.alert-adowntime
也可以和id选择器结合，例如：div.popup-bank#popup-bank-newuser，直到找到唯一的元素。
通配符
语法：
- tag[attribute^='value']：指定属性值以value开头的元素
- tag[attribute$='value']：指定属性值以value结束的元素
- tag[attribute*='value']：指定属性值中包含value的元素
查找子节点
用 > 连接父节点和子节点，节点可以用标签表示，也可以用id和class表示。例如：
div> .topbar>div>a
#topd > div.inside > a.weixin.tel
contains
tag:contains('Text')
例：button:contains('启用')
用XPath定位元素
当出现下述情况时，可以考虑用xpath来定位元素。
- 如果元素的ID不唯一，或者ID是动态的
- 如果name以及linktext属性值也不唯一
基本语法：
//tag[@attribute='value']
绝对路径和相对路径
- 绝对路径：用单斜线“/”表示，例如：html/body/div[1]/div/div[2]/ul/li[2]/a/span[2]
- 相对路径：用双斜线“//”表示，例如：//li[@id='shop-cart']/a/span[2]
"/"和"//"的区别：
- "/"：元素是上一级节点的子节点中的一个，不能跳级；
- "//"：下级是任何子节点或者任何嵌套子节点中的一个，可以跳级；
- 路径里面不要用"*"，要写明标签名。
用Text构建XPath
语法：
//tag[text()='value']
"="是完全匹配，即text的内容要和value完全一致。
Contains关键词
语法：
//tag[contains(attribute,'value')]
查找指定属性值中包含value的元素，不需要完全匹配。例如：
//a[contains(text(),'忘记密码')]
//input[contains(@class,'ipt') and contains(@placeholder,'手机号')]
starts-with关键词
语法：
//tag[starts-with(attribute,'value')]
例如：
//div[starts-with(@class,'popbox')]
//div[starts-with(@class,'popbox') and contains(@id,'nav')]
查找父节点和平级节点
父节点
语法：xpath-to-some-element//parent::<tag>
前面的平级节点
语法：xpath-to-some-element//preceding-sibling::<tag>
后面的平级节点
语法：xpath-to-some-element//following-sibling::<tag>
举例：
<tbody>
<tr height="35">
<th style="text-align:center">银行</th>
<th style="text-align:center">限额</th>
</tr>
<tr height="35" style="background-color:#fff">
<td>中国银行</td>
<td>单笔限额49999元，单日限额20万</td>
</tr>
<tr height="35" style="background-color:#fff">
<td>中国工商银行</td>
<td>单笔限额5万，单日限额5万</td>
</tr>
<tr height="35" style="background-color:#fff">
<td>中国建设银行</td>
<td>单笔限额10万，单日限额50万</td>
</tr>
<tr height="35" style="background-color:#fff">
<td>中国交通银行</td>
<td>单笔单日限额9999元</td>
</tr>
<tr height="35" style="background-color:#fff">
<td>中国农业银行</td>
<td>单笔限额9,999元，单日限额9,999元</td>
</tr>
<tr height="35" style="background-color:#fff">
<td>招商银行</td>
<td>单笔限额1万，单日限额2万</td>
</tr>
<tr height="35" style="background-color:#fff">
<td>浦发银行</td>
<td>单笔限额10万，单日限额40万</td>
</tr>
<tr height="35" style="background-color:#fff">
<td>光大银行</td>
<td>单笔单日限额99,999.99元</td>
</tr>
<tr height="35" style="background-color:#fff">
<td>平安银行</td>
<td>单笔限额5万，单日限额5万</td>
</tr>
</tbody>“中国农业银行”所在元素为：
//div[@id="zc_k"]//tbody/tr[6]/td[1]
“中国建设银行”所在元素为：
//div[@id="zc_k"]//tbody/tr[6]/td[1]//parent::tr//preceding-sibling::tr[2]/td
“光大银行”所在元素为：
//div[@id="zc_k"]//tbody/tr[6]/td[1]//parent::tr//following-sibling::tr[3]/td
参考资料：
