定位web页面元素方法总结

一般都是用浏览器自带的开发者工具查看、定位元素

主流浏览器比如: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