webdriver-元素定位

一、为什么要学习元素定位方式？

1、让程序操作指定操作，就必须先找到此元素

2、程序不像人类用眼睛直接定位到元素

3、webdriver提供了八种定位元素方式

二、webdriver元素定位方式

1、id：id属性

2、name：name属性

3、class_name：class属性

4、tag_name：tag标签

5、link_text:超链接文本

6、partial_link_text：link_text模糊匹配

7、Xpath

8、Css

三、定位方法

id：find_element_by_id()

name：find_element_by_name()

class_name：find_element_by_class_name()

tag_name：find_element_by_tag_name()

link_text：find_element_by_link_text()

partial_link_text:find_element_by_partial_link_text()

四、定位实现步骤

1、导selenium包：from selenium import webdriver

2、导入time包：from time import sleep 

3、实例化浏览器（以火狐为例）：driver = webdriver.FireFox()

4、打开页面：driver.get(url)

5、调用定位方法（以id定位为例）：element = driver.find_element_by_id（"id属性值"）

6、使用sends_keys()方式发送数据：element.send_keys("填入的内容")

7、暂停3秒：sleep(3)

8、关闭浏览器：driver.quit()

注意：url中\需要转义

五、find_element[s]_by_XXX()

作用：

（1）查找定位所有符合条件的元素

（2）返回的定位元素格式为数组（列表）格式

（3）列表数据格式的读取需要制定下标（下标从0开始）

例：使用tag_name获取第二个元素（密码框）

driver.find_elements_by_tag_name("input")[1].send_keys("123456")

六、Xpath、CSS

1、为什么学习Xpath、CSS定位

（1）在实际项目中标签没有id、name、class属性

（2）id、name、class属性值为动态获取，随着刷新或加载而变化

2、什么是Xpath

（1）XPath即为XML Path的简称，它是一种用来确定XML文档中某部分位置的语言

（2）HTML可以看做事XML的一种实现，所以selenium用户可以使用这种强大的语言在Web应用中定位元素。

XML：一种标记语言，用于数据到的存储和传递，后缀，xml结尾

3、XPath定位策略（方式）

（1）路径-定位

         绝对路径：从外层元素到指定元素之间所有经过元素层级路径；

                           绝对路径以/开始      使用Firebug可以快速生成，元素XPath绝对路径

         相对路径：从第一个符合条件元素开始（一般配合属性来区分）

                           相对路径以//开始

（2）利用元素属性-定位

（3）层级与属性结合-定位

（4）属性与逻辑结合-定位

（1）路径（绝对路径、相对路径）

4、Xpath延伸

//*[text()="xxx"]                               文本内容是xxx的元素

//*[starts-with(@attribute,'xxx')]      属性以xxx开头的元素

//*[contains(@attribute,'xxx')]         属性中含有xxx的元素

5、什么是css

（1）css是一种语言，用来描述HTML和XML的元素显示样式

6、css定位常用策略

（1）id选择器   

         说明：根据元素id属性来选择 

         格式：#id         如：#userA（选择id属性值为userA的所有元素） 

（2）class选择器   

         说明：根据元素class属性来选择

         格式：.class         如：.tel（选择class属性值为telA的所有元素）

（3）元素选择器     

         说明：根据元素的标签名选择

         格式：element         如：input  (选择所有input元素)

（4）属性选择器       

         说明：根据元素的属性名和值来选择

         格式：[attribute = value]         如[type = "password"](选择所有属性值为password的值）

（5）层级选择器

         说明：根据元素的父子关系来选择

         格式：element>element          如：p>input（返回所有p元素下所有的input元素）

提示：>可以用空格代替 如：p input 或者 p[type = 'password']

7、CSS延伸

（1）input[type^='p'] 说明：type属性以p字母开头的元素

（2）input[type$='d']说明：type属性以d字母结束的元素

（3）input[type*='w']说明：type属性包含w字母的元素