一般都是用浏览器自带的开发者工具查看、定位元素
主流浏览器比如:IE,chrome,firefox等自带的开发者工具定位元素很方便,不太建议依赖插件
个人比较喜欢使用chrome浏览器定位元素,因为可以显示定位到的元素的个数
浏览器默认的xpath或者CSS selector一般写的不太好,推荐自己写xpath和css selector
xpath格式一般为:
//tag[@attribute='value'] 比如//input[@id='wd']
/html/body/div/input
//和/的区别:/是绝对路径 //是相对路径
例子 | 描述 |
//a[text()='忘记密码'] | 使用text()定位元素 |
//a[contains(@name,'wd')] //a[contains(text(),'密码')] | 可以使用模糊匹配法contains |
//a[starts-with(@name,'wd')] | 匹配开头starts-with |
某个元素的xpath//preceding-sibling::tag 某个元素的xpath//following-sibling::tag | 查找平级节点 |
某个元素的xpath//parent::tag | 查找父节点 |
css selector格式一般为:
input[id='wd'] tagname[attribute='value']
选择器 | 例子 | 描述 |
---|---|---|
.class | .intro | class选择器,选择class="intro"的所有元素 |
#id | #firstname | id选择器,选择id=”firstname"的所有元素 |
* | * | 选择所有元素 |
element | p | 所有<p>元素 |
element>element | div>input | 选择父元素为<div>的所有<input>元素 |
element+element | div+input | 选择同一级中紧接在<div>元素之后的所有<input>元素 |
[attribute=value] | [target=_blank] | 选择target="_blank"的所有元素 |
XPATH与CSS的类似功能对比
定位方式 | Xpath | CSS |
---|---|---|
标签 | //div | div |
By id | //div[@id='eleid'] | div#eleid |
By class | //div[@class='eleclass'] | div.eleclass |
By 属性 | //div[@title='Move'] | div[title=Move] div[title^=Move] div[title$=here] div[title*=mouse] |
定位子元素 | //div[@id='eleid']/* //div/h1 | div#eleid>* div>h1 |
最后,定位元素一定要保证写的语句定位的元素在页面是唯一的,并且语句最精简,短小精悍
一般使用的顺序是ID,name,CSS选择器,xpath