同样的道理，把一个页面上的元素当成是一个对象（你的女神），我们就可以通过她的属性值来找到她，比如她性别女爱好爬山---------你就可以在爬山这里找到她。

　　元素定位在这四个环节中是至关重要的，如果说按学习精力分配的话，元素定位占70%；操作元素10%，获取返回结果10%；断言10%。如果一个页面上的元素不能被定位到，那后面的操作就无法继续了。接下来就来讲webdriver提供的八种基本元素定位方法。

一、环境准备：

1.浏览器选择：Firefox

2.安装插件：Firebug和FirePath(设置》附加组件》搜索：输入插件名称》下载安装后重启浏览器)

3.安装完成后，页面右上角有个小爬虫图标

4.快速查看xpath插件：XPath Checker这个可下载，也可以不用下载

5.插件安装完成后，点开附加组件》扩展，如下图所示

二、查看页面元素：

以百度搜索框为例，先打开百度网页

1.点右上角爬虫按钮

2.点左下角箭头

3.讲箭头移动到百度搜索输入框上，输入框高亮状态

4.下方红色区域就是单位到输入框的属性：

<input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd">

三、元素定位id：find_element_by_id()

1.从上面定位到的元素属性中，可以看到有个id属性：id="search-key"，这里可以通过它的id属性单位到这个元素。

2.定位到搜索框后，用send_keys()方法

四、元素定位name：find_element_by_name()

1.从上面定位到的元素属性中，可以看到有个name属性：name="wd"，这里可以通过它的name属性单位到这个元素。

说明：这里运行后会报错，说明这个搜索框的name属性不是唯一的，无法通过name属性直接定位到输入框

五、元素定位class：find_element_by_class_name()

1.从上面定位到的元素属性中，可以看到有个class属性：class="s_ipt"，这里可以通过它的class属性单位到这个元素。

六、元素定位tag：find_element_by_tag_name()

1.从上面定位到的元素属性中，可以看到每个元素都有tag（标签）属性，如搜索框的标签属性，就是最前面的input

2.很明显，在一个页面中，相同的标签有很多，所以一般不用标签来定位。以下例子，仅供参考和理解，运行肯定报错

七、元素定位link：find_element_by_link_name()

1.定位百度页面上"hao123"这个按钮

查看页面元素：

<a class="mnav" target="_blank" href="http://www.hao123.com">hao123</a>

2.从元素属性可以分析出，有个href = "http://www.hao123.com

说明它是个超链接，对于这种元素，可以用以下方法

八、元素定位partial_link：find_element_by_partial_link_name()

1.有时候一个超链接它的字符串可能比较长，如果输入全称的话，会显示很长，这时候可以用一模糊匹配方式，截取其中一部分字符串就可以了

2.如“hao123”,只需输入“ao123”也可以定位到

九、元素定位xpath：find_element_by_xpath()

1.以上定位方式都是通过元素的某个属性来定位的，如果一个元素它既没有id、name、class属性也不是超链接，这么办呢？或者说它的属性很多重复的。这个时候就可以用xpath解决

2.xpath是一种路径语言，跟上面的定位原理不太一样，首先第一步要先学会用工具查看一个元素的xpath

3.安装上图的步骤，在FriePath插件里copy对应的xpath地址

十、元素定位：find_element_by_css_name()

1.css是另外一种语法，比xpath更为简洁，但是不太好理解。这里先学会如何用工具查看，后续的教程再深入讲解

2.打开FirePath插件选择css

3.定位到后如下图红色区域显示

最后总结：

selenium的webdriver提供了八种基本的元素定位方法，前面六种是通过元素的属性来直接定位的，后面的xpath和css定位更加灵活，需要重点掌握其中一个。

1.通过id定位：find_element_by_id()

2.通过name定位：find_element_by_name()

3.通过class定位：find_element_by_class_name()

4.通过tag定位：find_element_by_tag_name()

5.通过link定位：find_element_by_link_name()

6.通过partial_link定位：find_element_by_partial_link_name()

7.通过xpath定位：find_element_by_xpath()

8.通过css定位：find_element_by_css_name()

十一、多元素定位：find_elements_by_id()  #只要在单元素后面加多一个s就是定位出一个列表

find_element_by_id("ddjjdjjdj")[0].click()

十二、比较常用的地位xp和css的使用：

 

1、如果目标元素有id属性，优先使用id定位；

 

2、元素locator尽可能保证简洁，考虑locator中路径的变化频率，尽量减少后期更新和维护成本；

 

3、使用xpath时，不要一味的使用‘/’逐层进行选择；合理使用‘/’和‘//’，能简化表达式；

 

4、尽量使用函数和运算符，如contains(),text(),position()等；运算符包括算数运算符或逻辑运算符等；

 

 

 

以下举例xpath常用语法：

 

1) xpath=//img[@alt='The image alt text']

 

2) xpath=//table[@id='table1']//tr[n]/td[n]

 

3) xpath=//a[contains(text(), 'test')]      text属性使用text()

 

4) xpath=//a[contains(@href, '#id1')]/a[n]       其余属性则使用@属性名

 

5) xpath=//table[@class= 'style']//th[text()= 'xxx']/../td    其中../表示从子元素逆向定位父元素

 

6) xpath=//*[text()='right']

 

7) xpath=//*[starts-with(@href, 'xxx')]

 

8) xpath=//*[ends-with(@href, 'xxx')]

 

9) xpath=//*[matchs(text(), 'xxx')]    可使用正则表达式

 

10) xpath=//input[@name='name1' and @value='yes']     支持逻辑运算符and/or/not

 

 

 

以下举例css常用语法：

 

1) css用#表示id属性，如#kw

 

2) css用.表示class属性，如.slipt

 

3) css可直接使用标签名称，无任务标识符，如input

 

4) css通过其他属性定位时写为：css=[name='kwname']

 

5) css也可通过标签和属性组合定位，如css=[a.text='xxx']

以上这些都是前辈们总结出来的，希望能帮的到大家：自动化交流群：892749299

另外常用xps定位和css定位：

 

UI自动化之元素定位(xpath、css)：好记性不如烂笔头，人的记忆是有限的。

 

　　很早之前就已经写过自动化了，不过点着功能久了就会容易忘记元素定位，尤其是xpath和css定位，所以就花点时间做下总结收集。

 

xpath有两种定位：

 

一.绝对路径（不推荐使用，除非已经使用了所有方式仍然无法定位）
方法：根据实际目录，逐层输写。
例子： find_element_by_xpath("/html/body/div[1]/span/input/a")  # div[1]指第1个元素
二.相对路径（推荐使用）

 

方法:找到元素有”精准元素“即唯一能标识的属性；

 

复制代码
# 1、通过id定位(以百度首页为例)
driver.find_element_by_xpath("//*[@id='kw']").send_keys("test")
time.sleep(1)

# 2、通过class定位
driver.find_element_by_xpath("//*[@class='s_ipt']").send_keys("test")

# 3、通过name定位
driver.find_element_by_xpath("//input[@name='wd']").send_keys("test")

# 4、通过其它属性定位
driver.find_element_by_xpath("//*[@autocomplete='off']").send_keys("test")

# 5、多个属性组合定位(逻辑运算符and、or等)
driver.find_element_by_xpath("//*[@autocomplete='off' and @class='s_ipt']").send_keys("test")

# 6、通过文本属性定位
driver.find_element_by_xpath("//*[text()='新闻']")

# 7、通过父元素定位子元素（层级关系）
driver.find_element_by_xpath("//*[@id='u1']/a[2]")  # 通过上一级的id对下一级a标签进行定位（索引从1开始）

# 8、通过子元素找父元素
driver.find_element_by_xpath("//*[@id='kw']/..")  # //*[@id='kw']/../.. 这个是找爷爷

# 9、模糊匹配
driver.find_element_by_xpath("//a[contains(text(),'hao')]")     # 文本模糊匹配
driver.find_element_by_xpath("//input[contains(@class,'s_btn')]")   # class属性模糊匹配，其它类似
复制代码

 

 

 

CSS语法定位

 

 

 

复制代码

 

# 1、通过id定位
driver.find_element_by_css_selector("#kw").send_keys("test")

# 2、通过class定位(多个class属性有空格的话，将空格换成.)
driver.find_element_by_css_selector(".s_ipt").send_keys("test")

# 3、通过tag定位
driver.find_element_by_css_selector("input") # 定位所有input标签

# 4、通过其它属性定位
driver.find_element_by_css_selector("[name='wd']").send_keys("test")

# 5、通过父元素找子元素（组合定位）
driver.find_element_by_css_selector("#qrcode .qrcode-img")     # 通过id为qrcode上一级或上上级找寻下级class为qrcode-img的元素
driver.find_element_by_css_selector("qrcode .qrcode-img:nth-child(1)")     # 找刚刚上面结果的第一组元素，索引从1开始
driver.find_element_by_css_selector("#qrcode div.qrcode-img:nth-child(1)")    # 组合定位，div标签下class为qrcode-img的元素