WebDriver API元素定位

目录

• 元素识别
• 基本元素定位API使用
• XPATH
  • Xpath常用6种定位元素的方法
  • 通过绝对路径定位
  • 通过相对路径定位
  • 使用元素属性定位
  • 使用部分属性值匹配（也称为模糊方法定位）
  • 通过元素索引定位
  • 使用元素文本定位
• Css_selector
  • Css_selector常用6种定位元素的方法
  • 通过绝对路径定位
  • 通过id(#)或者class(.)定位
  • 使用元素属性定位
  • 使用部分属性值匹配（也称为模糊方法定位）
  • 通过子元素定位（类似xpath中的索引的方法）
  • 查找兄弟元素
• 总结

元素的定位和操作是自动化测试的核心部分，其中操作又是建立在定位的基础上的。
举例：一个对象就是一个人，我们可以通过身份证号、姓名或者他的住址找到这个人。那么web对象也是一样的，我们可以通过唯一区别于其它元素的属性来定位这个元素。

元素识别

一、利用Chrome浏览器开发者工具
1）打开Chrome浏览器，按F12或依次点击菜单——更多工具——开发者工具
2）切换到Elements页签，在Elements下点击左上方小箭头可以指定页面元素，查看对应代码

二、利用火狐浏览器开发者工具
1）打开火狐浏览器，按F12或点击菜单——web开发者——查看器
2）进入到查看器页签，在查看器下点击左上方小箭头可以指定页面元素，查看对应代码

基本元素定位API使用

#通过id定位元素
driver.find_element_by_id("id_value")

#通过name定位元素
driver.find_element_by_name("name_value")

#通过class_name定位元素
driver.find_element_by_class_name("class_name")

#通过tag_name定位元素
driver.find_element_by_tag_name("tag_name_value")
#备注：tag_name是所有定位方式中最不靠谱的一种，因为在一个页面上相同tag_name的元素极容易出现

#通过link定位
driver.find_element_by_link_text("text_value")
driver.find_element_by_partial_link_text("text_value")
#当一个文字很长的链接时，我们可以只取其中的部分，只要取的部分可以唯一标识元素

#通过xpath定位元素
driver.find_element_by_xpath("xpath_syntax")

#通过css定位元素
driver.find_element_by_css_selector("css_syntax")

示例

from selenium import webdriver
driver=webdriver.Chrome()
driver.get("http://www.baidu.com")

#通过id定位元素
driver.find_element_by_id("kw").send_keys("海贼王")

#通过name定位元素
driver.find_element_by_name("wd").send_keys("海贼王")

#通过class_name定位元素
driver.find_element_by_class_name("s_ipt").send_keys("海贼王")

#通过link定位
driver.find_element_by_link_text("新闻").click()
driver.find_element_by_partial_link_text("hao").click()

XPATH

XPATH是一门在XML文档中查找信息的语言，XPATH可用来在XML文档中对元素和属性进行遍历，主流的浏览器都支持XPATH，因为HTML页面在DOM中表示为XHTML文档。

Xpath常用6种定位元素的方法

• 绝对路径
• 相对路径
• 元素属性
• 元素属性值
• 元素索引
• 元素文本

通过绝对路径定位

绝对路径的开头是一个斜线（/），从网页的根节点html开始，逐层去查找需要定位的元素。
此方法缺点显而易见，当页面元素位置发生改变时，都需要修改，因此，并不推荐使用。

举例：百度搜索框绝对路径定位

driver.find_element_by_xpath('/html/body/div[1]/div[1]/div/div[1]/div/form/span[1]/input').send_keys("海贼王")
#当同一层次有多个相同的元素时，使用下标区分，下标从1开始

通过相对路径定位

相对路径的开头是两个斜线（//），表示文件中所有符合模式的元素都会被选出来，即使是处于树中不同层级也会被选出来。

举例：百度搜索框相对路径定位

driver.find_element_by_xpath('//span[1]/input').send_keys("海贼王")
driver.find_element_by_xpath('//form/span[1]/input').send_keys("海贼王")
#以上都可以定位到百度搜索框，相对路径的长度和开始位置并不受限制，可以采用从后往前逐级定位的方式去定位

使用元素属性定位

元素属性定位要求属性能够定位到唯一一个元素，如果存在多个相同条件的标签，默认定位第一个。
具体格式：//标签名[@属性="属性值"]
支持使用and和or关键字，多个属性一起定位元素。

driver.find_element_by_xpath("//a[@name='tj_trnews']").click()
driver.find_element_by_xpath("//a[@name='tj_trnews' and @class='mnav']").click()
driver.find_element_by_xpath("//a[@name='tj_trnews' or @class='mnav']").click()

Xpath支持通配符*号，通过属性定位还可以如下写法：

driver.find_element_by_xpath("//*[@name='tj_trnews']").click()

使用部分属性值匹配（也称为模糊方法定位）

属性值如果太长或网页中的元素属性动态变化，可以使用此方法

元素属性值开头包含内容：starts-with()

driver.find_element_by_xpath("//a[starts-with(@name,'tj_trhao')]").click()

元素属性值结尾包含内容：substring()

driver.find_element_by_xpath("//a[substring(@name,6)='map']").click()

元素属性值包含内容：contains()

driver.find_element_by_xpath("//a[contains(@name,'hao')]").click()

通过元素索引定位

遇到同层级相同标签元素时，可以使用索引（下标）表示，索引的初始值为1

举例：定位百度hao123链接

driver.find_element_by_xpath('//div[3]/a[2]').click()
driver.find_element_by_xpath('//div[@id='ul']/a[2]').click()

使用元素文本定位

元素文本在xpath中可以通过text()函数获取，也可以用其来进行元素定位。

driver.find_element_by_xpath("//a[text()='新闻']").click()
driver.find_element_by_xpath("//a[contains(text(),'新')]").click()

Css_selector

CSS是一个被用来描述如何在屏幕等处渲染HTML和XML文档的语言。
CSS使用选择器来为文档中的元素绑定样式属性。
选择器（selector）是用来在树中匹配元素的模式，选择器对HTML和XML进行了优化，被设计用来在注重性能的代码中执行。

Css_selector常用6种定位元素的方法

• 绝对路径
• 相对路径
• 元素属性
• 元素属性值
• 查询子元素
• 查询兄弟元素

通过绝对路径定位

当同一层级有多个相同的元素时，使用id或class区分，遇到id用#号，遇到class用.号

driver.find_element_by_css_selector("html body div div div div div form span input").send_keys("海贼王")

driver.find_element_by_css_selector("html>body>div>div>div>div>div>form>span>input").send_keys("海贼王")

通过id(#)或者class(.)定位

可以和标签名组合使用。

driver.find_element_by_css_selector("#kw").send_keys("海贼王")

driver.find_element_by_css_selector(".s_ipt").send_keys("海贼王")

driver.find_element_by_css_selector("input#kw").send_keys("海贼王")

driver.find_element_by_css_selector("input.s_ipt").send_keys("海贼王")

使用元素属性定位

具体格式：标签名[属性="属性值"]
支持使用多个属性一起定位元素。

driver.find_element_by_css_selector("input[autocomplete='off']").send_keys("海贼王")

driver.find_element_by_css_selector("input[autocomplete='off'][id='kw']").send_keys("海贼王")

使用部分属性值匹配（也称为模糊方法定位）

• 元素属性值开头包含内容：^=
• 元素属性值结尾包含内容：$=
• 元素属性值结尾包含内容：*=

举例：

driver.find_element_by_css_selector("input[autocomplete^='of']").send_keys("海贼王")

driver.find_element_by_css_selector("input[autocomplete$='ff']").send_keys("海贼王")

driver.find_element_by_css_selector("input[autocomplete*='of']").send_keys("海贼王")

通过子元素定位（类似xpath中的索引的方法）

• 子元素：A>B
• 后代元素：A B（类似>）
• 第一个后代元素：first-child
• 最后一个后代元素：last-child
• 第n个子元素：nth-child(N)[类同:nth-of-type（N）]

示例：

driver.find_element_by_css_selector("div#u1 a:first-child").click()

driver.find_element_by_css_selector("div#u1 a:last-child").click()

driver.find_element_by_css_selector("div#u1 a:nth-child(2)").click()

查找兄弟元素

1）同层级下一个元素：+
2）选择同层级多个相同标签的元素：~

备注：
+号可以多次使用
~号一般返回的是多个元素，要用find_elements接收

定位元素代码形式：

from selenium.webdriver.common.by import By

示例：

driver.find_element_by_css_selector("div#u1 a +a +a").click()

总结

定位元素的方式有8种，写法有两种

#driver.find_element_by_id()
driver.find_element(By.ID,"")

#driver.find_element_by_name()
driver.find_element(By.NAME,"")

#driver.find_element_by_class_name()
driver.find_element(By.CLASS_NAME,"")

#driver.find_element_by_tag_name()
driver.find_element(By.TAG_NAME,"")

#driver.find_element_by_partial_link_text()
driver.find_element(By.LINK_TEXT,"")

#driver.find_element_by_partial_link_text()
driver.find_element(By.PARTIAL_LINK_TEXT,"")

driver.find_element_by_xpath()
driver.find_element(By.XPATH,"")

driver.find_element_by_css_selector()
driver.find_element(By.CSS_SELECTOR,"")