Web自动化之selenium元素定位方式

Selenium基本操作：

1、环境安装
• selenium的安装
pip install selenium
• 浏览器对应的ChromeDriver驱动
①Chromedriver所有版本下载链接：
https://chromedriver.storage.googleapis.com/index.html
②将chromedriver.exe放到python安装路径下

-----------------------------driver对象的方法-----------------------------

from selenium import webdriver

# 1、启动浏览器（通过webdriver创建服务）
driver = webdriver.Chrome()
# 2、打开网页
driver.get('www.baidu.com')
# 3、窗口最大化
driver.maximize_window()
# 4、窗口最小化
driver.minimize_window()
# 5、关闭浏览器，退出Chromedriver
driver.quit()
# 6、返回上一个页面
driver.back()
# 7、进入下一个页面
driver.forward()
# 8、刷新页面
driver.refresh()
# 9、页面截图
driver.save_screenshot('page.png')

-----------------------------driver对象的属性-----------------------------

from selenium import webdriver

driver = webdriver.Chrome()
# 1、获取页面的title
title = driver.title
# 2、获取页面的源代码
html = driver.page_source
# 3、获取当前窗口的句柄（编号）
win = driver.current_window_handle
# 4、获取浏览器打开所有窗口的句柄
wins = driver.window_handles
# 5、获取当前页面的url地址
url = driver.current_url

-----------------------------driver对象查找页面元素的方法-----------------------------

from selenium import webdriver

driver = webdriver.Chrome()
# 1、根据元素的id属性来定位元素
driver.find_element_by_id("kw")
# 2、根据元素的name来定位元素
driver.find_element_by_name("wd")
# 3、根据元素的class来定位元素
driver.find_element_by_class_name("s_ipt")
# 4、根据标签来定位元素
driver.find_element_by_tag_name("input")
# 5、根据链接标签a的文本来定位元素
driver.find_element_by_link_text("新闻")
# 6、根据链接标签a的部分文本来定位元素
driver.find_element_by_partial_link_text("新")
# 7、根据xpath定位表达式来定位元素
driver.find_elements_by_xpath('//*[@id="kw"]')
# 8、根据css定位表达式来定位元素
driver.find_elements_by_css_selector('input#kw')

注：
find_element_by_xxx：查找符合规范的元素，并返回的是第一个元素（通常用这个方式）
find_elements_by_xxx：查找符合规范的元素，并以列表形式返回

Xpath语法

表达式	描述
nodename	选取此节点的所有子节点。
/	从根节点选取。绝对路径
//	从匹配选择的当前节点选择文档中的节点，而不考虑他们的位置。相对路径
.	选取当前接节点
…	选取当前节点的父节点
@	选取属性

绝对定位和相对定位
绝对路径：每次从根节点 html 开始
相对路径：每次只需从第一个已经找到的节点开始。

绝对定位的劣势：
前端经常变化，加 div 之类的。下次就不能用了。
表达更加繁琐

谓语条件
1，索引取值：[索引值]
注意点：
索引的顺序是从1开始的，不是 0
索引的优先顺序比 // 高，建议使用索引的时，前面的部分使用括号括起来

(//a[@class, 'btn-special'][0])
# 查找第一个元素input元素，
e.find_element_by_xpath("(//input)[1]")
# (//input)[1] 和 //input[1]是有区别的

2，有某个属性：[@属性]

# 查找有value属性 的input标签
e.find_element_by_xpath("//input[@value]]")

3，属性为某个特定值 ： [@属性=值]

# 查找value等于 百度一下 的input标签
e.find_element_by_xpath("//input[@value='百度一下']")

4，子元素中属性为某个特定值：[//子元素/@属性=值]

# 查找form， from下有一个option元素的value属性为 musen
e.find_element_by_xpath("//span[input/@value='百度一下']")

5, 文本 //a[text()=’’]

# 查找文本内容为 百度首页的a标签
//a[text()='百度首页']

通配符和逻辑运算 and or

# 查找name属性等于user或者id属性等于user的input标签
//input[@name='user' or @id='username']

# 查找name属性等于user并且id属性等于user的input标签
//input[@name='rsv_enter' and @name='rsv_dl']

注意点：
①find_element_by_class_name进行定位 class之间不能有空格
②xpath通过class属性定位的时候，class属性值可以有空格

函数

# 查找 value属性为 百 开头的input标签
//input[starts-with(@value,'百')]
# 查找 value属性 包含百度的 input标签
//input[contains(@value,'百度')]

轴定位

# /轴名称（元素关系）::节点名称

# 案例：查找form标签子节点中id等于s_btn_wr的span标签
//form/child::span[@id='s_btn_wr']

# 案例二：查找form标签父节点的div标签
//form/parent::div

# 案例三：查找title等于苏宁易购的a标签 的父节点div 的所有在它之前的兄弟节点
//a[@title='苏宁易购']/parent::div/preceding-sibling::div

# 案例四：查找title等于苏宁易购的a标签 的父节点div 的所有在它之后的兄弟节点
//a[@title='苏宁易购']/parent::div/following-sibling::div

轴定位包含了路径寻找，如果需要多层往上，轴定位更加方便。
兄弟姐妹都可以

轴名称	结果
child	选取当前节点的所有子元素
descendant	选取当前节点的所有后代元素（子、孙等）。
parent	选取当前节点的父节点
ancestor	选取当前节点的所有先辈（父、祖父等）。
following	选取文档中当前节点的结束标签之后的所有节点。
following-sibling	选取当前节点之后的所有兄弟节点。
preceding	选取文档中当前节点的开始标签之前的所有节点。
preceding-sibling	选取当前节点之前的所有节点。

CSS 选择器

层级关系

.intro	选择 class=“intro” 的所有元素。
#firstname	选择 id=“firstname” 的所有元素。
*	选择所有元素
p	选择所有元素
div,p	选择所有元素和所有元素。
div p	选择元素内部的所有元素。
div>p	选择父元素为元素的所有元素。
div+p	选择紧接在元素之后的所有元素

谓语

[attribute]	[target]	选择带有 target 属性所有元素。
[attribute = value]	a[title = 苏宁易购]	title属性等于苏宁易购的a标签
[attribute *= value]	a[title * = 苏宁易购]	title属性包含宁易的a标签
[attribute ^= value]	a[title ^ = 苏宁易购]	title属性以苏宁 开头的a标签
[attribute $= value]	a[title $ = 苏宁易购]	title属性以易购 结尾的a标签

索引

nth-of-type：正向索引

# 获取第五个类属性为nav-item的div标签
div.nav-item:nth-of-type(5)

nth-last-of-type：反向索引
# 获取倒数第2个类属性为nav-item的div标签
div.nav-item:nth-last-of-type(2)

css和xpath比较

css的效率快
• CSS 是和 HTML 绑定在一起的，是直接操作HTML的，如果换成 XML 其他的标记语言，就不行了。
• Xpath 是和 DOM 绑定在一起的。所以还需要时间通过HTML去生成 DOM 对象。
• 只要有 DOM 就可以用 Xpath来定位元素, 也就是说 xpath 得用途更广，手机也可以用，其他客户端也 可以用。
• xpath 在 IE 中效率会高，其他谷歌和火狐浏览器，都会比css慢。
xpath 的功能更多
• xpath 在找到一个元素是可以上下移动的。 css 只能进行向下或横向去找。
• xpath可以根据文本内容查找元素。
对于简单的元素定位，CSS选择器表达更加简洁。但是定位复杂的元素与 Xpath 相比不太友好。