Selenium（2）-webUI自动化的Xpath及CSS定位

xpath定位法

官方学习XPath 教程：https://www.w3school.com.cn/xpath/index.asp
xpath定位法：是指基于元素的路径的定位方法
语法：driver.find_element_by_xpath('Xpath的策略')
常用的xpath定位策略：

1、绝对路径定位法(/)
2、相对路径定位法(//)
3、属性定位法(路径结合属性)
4、函数定位法
5、轴定位法
6、逻辑运算符(路径结合逻辑)

获取xpath路径的方法：
1、F12打开开发者工具，点击(选择)你需要定位的对象
2、在对应的代码中右键选择复制

获取元素路径

1、绝对路径：从根节点/html，逐级往下(不跳跃)，例如：/html/body/div/div/form/input[1]2、相对路径： //input 表示所有input标签，例如：//*[@id="kw"]3、属性法： [@属性='属性值']，例如：//*[@id="kw"]；//input[@name='password']4、函数法
1)starts-with(@属性名,'属性开头的值')：定位属性以xxx开头的元素，处理属性值变化的元素，例如：//*[starts-with(@id,'username')]
2)contains(@属性名,'属性包含的值')：匹配属性包含的值，例如：//*[contains(@id,'username')]
3)text()='文本的值'：# 定位文本值等于XXX的元素 ，可以替代link_text方法，一般适合 p标签，a标签。例如：//a[text()='百度搜索']
4)contains(text(),'文本包含的值')：匹配文本包含的值，可以替代partial_link_text方法，例如：//a[contains(text(),'搜索')]4、轴对称法
语法：轴名称::节点测试[谓语]

轴对称法

轴对称实例

实例：

# 导包
from time import sleep
from selenium import webdriver

# 实例化浏览器对象
driver = webdriver.Chrome()
# 打开网址url
driver.get('https://www.baidu.com/')
# 需求
# driver.find_element_by_xpath("//*[text()='新闻']").click()
# driver.find_element_by_xpath("//*[contains(@autocomplete,'f')]").send_keys('selenium')
driver.find_element_by_xpath("//*[starts-with(@autocomplete,'o')]").send_keys('selenium')
sleep(3)
# 关闭网页
driver.quit()

5、逻辑运算符
在selenium中一般用and来缩小范围(反之or是扩大范围)，定位到具体的元素，但xpath本身支持其他运算符

//*[@id='username' and @type='text']

css seletor定位法

官方文件：https://www.w3school.com.cn/cssref/css_selectors.asp
css 定位法特点：
1、速度快
2、是Chrome与Firefox的默认显示语法，Firefox对css支持最好
3、css相对xpath无法实现text的定位
4、数字开头的id的值用css定位会出现问题
5、css不支持多属性用逻辑运算符来组合定位,如：

[name='username   and  id='username'] # 是无效的
[id='username'][name='username']  #有效

css定位器如下：

名称	表达式	示例	描述
类型选择器(标签)	tag name	p	所有p标签
id选择器	#id	#usermname	id的值为username
类选择器	.class1.class2 tagname#id.class	.pn.vm input#usemame.pn.vm	class1的值是pn，class2的值是vm class1的值是pn，class2的值是vm，且id的值是username的input标球
路径选择器:子代	nod1>nod2	html>body>div	html下的body标签下的div标签 (子代元)
路径选择器:后代	nod1 node2	html input	html下的任意input标签 (后代元)
路径选择器:相邻弟弟(二弟)	node1+node2	html>head+body	html下跟head紧挨着的body
路径选择器:弟弟	node1~node2	div~p	div与p同级，p在div后面不一定紧挨着
属性选择器	[属性名="属性值] [属性名^="属性值"] [属性名$="属性值"] [属性名*="属性值"]	inpu[lid='username'] input[names^='usemname'] input[names$='ername'] input[name*='erna']	id属性值为username的input标签(id唯一则input可以不写)，且class的属性必须填写完整 开头是 结尾是 包含
伪类选择器:第几个元素	tagname.nth-child(n)	body>div.nth-child(3)	body下的第三个标签是div (不是第三个div)
伪类选择器第一个子元素	first-child	body>.first-child	body下的第一个标签
伪类选择器:最后一个	:last-child	body>:last-child	body下的最后一个标签
伪类选择器:倒数第几个元	nth-last-child	body>div:nth-last-child(4)	body下的倒数第四个标签是div (不是第4个div)，也不区分大小写
伪类选择器:唯一元素	.only-child	input:only-child	每个节点下的唯一一个input标签(父节点只有一个标签)

xpath与css语法对比

xpath与css语法对比