xpath定位

Xpath定位

1）、语法拆解

//[@id="username"]
其中//是dom节点的根节点；是指所有的元素;[]括号是将属性的键值对放入;@id是指属性为id的；后边的是赋值。

---

name属性定位 //*[@name="name_value"]这样的。

---

type属性定位 //*[@type="type_value"]。

---

父/子元素定位 //*[@class="form-tp"]/a[2]; 解读：父元素的class名称为form-tp，子元素是父元素下的第二个a标签，下标是从1开始的。

---

层级关系 '//*[@id="id_value"]/div[2]/input' 解读：第二个div下的input标签

---

索引定位 '//[@id="email_register_form"]/div[1]/input'或'//[@id="email_register_form"]/div[2]/input'

---

tag定位 '//form/div[1]/input'可以定位到

---

查看向前标签下有多少input标签，并选择第一个返回。
'//input'

2)在console控制台查看xpath是否定位到元素。

$x('//[@id="email_register_form"]//[@type="text"]') #相对定位
$x('//[@id="email_register_form"]//div//input[@type="text"]') 也可定位到
$x('//[@id="email_register_form"]/div/input[@type="text"]') 也可定位到

---

2）、css定位元素

3)在F12开发者工具中，使用id，class如何定位？

$('#username') # 金号是id定位
$('.class_name') #‘.’是class定位
$('.btn.btn-green') class定位
4)属性放在中括号也可以。
$('[class="btn btn-green"]') #btn btn-green是class属性名称
5)组合标签定位
$('input[name="username"]') #input标签+name属性定位
6)组合属性+属性
$('[name="username"][type="text"]') # name属性 + type属性共同定位
7)或关系属性定位
$('#username,#password_l') #id属性1 或者 id属性2
8)两个元素都是type的定位。
$('[type="password"],[type="text"]')
9)子标签
$('form>input[type="submit"]') #‘>’表示子元素，form标签的子标签。
10)后代元素
$('form input[type="submit"]') #空格表示后代元素。