web自动化第二章-XPath、 CSS定位

Rsingstarzengjx

于 2023-05-14 20:14:10 发布

阅读量454

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/oDianZi1234567/article/details/130670767

版权

目标
1. 掌握XPath定位策略
2. 掌握CSS定位策略
为什么要学习XPath、 CSS定位？
1. 如果要定位的元素没有id、 name、 class属性，该如何进行定位？
2. 如果通过name、 class、 tag_name无法定位到唯一的元素，该如何进行定位？
示例：
<input type="submit" value="提交" />

1. 什么是XPath？

1. XPath即为XML Path的简称，它是一门在 XML 文档中查找元素信息的语言。
2. HTML可以看做是XML的一种实现，所以Selenium用户可以使用这种强大的语言在Web应用中定位元素。
XML：一种标记语言，用于数据的存储和传递。后缀.xml结尾

<?xml version="1.0" encoding="UTF-8" ?>
<node>
<db id="db" desc="三条边的长度都一样">
<b1>3</b1>
<b2>3</b2>
<b3>3</b3>
<expect>等边三角形</expect>
</db>
<dy>
<b1>4</b1>
<b2>4</b2>
<b3>5</b3>
<expect>等腰三角形</expect>
</dy>
</node>

XPath定位方式之所以强大，是因为它有非常灵活的定位策略

2. XPath定位策略(方式)

1. 路径-定位
2. 利用元素属性-定位
3. 属性与逻辑结合-定位
4. 层级与属性结合-定位

XPath定位方法
element = driver.find_element_by_xpath(xpath)

2.1 路径定位(绝对路径、相对路径)
绝对路径：从最外层元素到指定元素之间所有经过元素层级的路径
1). 绝对路径以/html根节点开始，使用/来分隔元素层级；
如： /html/body/div/fieldset/p[1]/input
2). 绝对路径对页面结构要求比较严格，不建议使用
相对路径：匹配任意层级的元素，不限制元素的位置
1). 相对路径以//开始
2). 格式： //input 或者 //*

层级关系：

<body>
<form action="">
	<div id="zc">
		<fieldset>
		<legend>注册用户A</legend>
			<p id="p1">
				<label for="userA">账号A</label>
		 		<input type="textA" name="userA" id="userA" placeholder="账号A" required="" value="">

"""
    需求：
        1. 使用绝对路径定位 用户名 输入 admin
        2. 暂停2秒钟
        3. 使用相对路径定位 密码框 输入 123

    方法：
        driver.find_element_by_xpath()
"""

# 导包
import time

from selenium import webdriver
from time import sleep
# 获取 火狐浏览器对象
#driver = webdriver.Firefox()

# 获取 谷歌浏览器对象
driver = webdriver.Chrome()

# 获取 Ie
# driver = webdriver.Ie()
# 打开 注册A.html
url = r"E:\Python\测试资料\8天web自动化讲义\素材\注册A.html"
driver.get(url)

# 使用绝对路径定位 用户名 admin
driver.find_element_by_xpath("/html/body/form/div/fieldset/p[1]/input").send_keys("admin")
time.sleep(3)
driver.quit()

2.2 利用元素属性
说明：通过使用元素的属性信息来定位元素
格式： //input[@id='userA'] 或者 //*[@id='userA']
练习
需求：打开注册A.html页面，完成以下操作
1).利用元素的属性信息精确定位用户名输入框，并输入： admin

"""
    需求：
        1. 使用绝对路径定位 用户名 输入 admin
        2. 暂停2秒钟
        3. 使用相对路径定位 密码框 输入 123

    方法：
        driver.find_element_by_xpath()
"""

# 导包
import time

from selenium import webdriver
from time import sleep
# 获取 火狐浏览器对象
#driver = webdriver.Firefox()

# 获取 谷歌浏览器对象
driver = webdriver.Chrome()

# 获取 Ie
# driver = webdriver.Ie()
# 打开 注册A.html
url = r"E:\Python\测试资料\8天web自动化讲义\素材\注册A.html"
driver.get(url)

# 使用绝对路径定位 用户名 admin
#driver.find_element_by_xpath("/html/body/form/div/fieldset/p[1]/input").send_keys("admin")
driver.find_element_by_xpath("//input[@id='userA']").send_keys("admin")
time.sleep(3)
driver.find_element_by_xpath("//input[@id='userA']").send_keys("admin1")

time.sleep(3)
driver.quit()

2.3 属性与逻辑结合
说明：解决元素之间个相同属性重名问题
格式： //*[@name='tel' and @class='tel']
练习
需求：打开注册A.html页面，完成以下操作
1).使用属性与逻辑结合定位策略，在test1对应的输入框里输入： admin

需求：打开注册A.html页面，完成以下操作
1).使用属性与逻辑结合定位策略，在test1对应的输入框里输入： admin

<div id="zc">
		<fieldset>
		<legend>注册用户A</legend>
			<p id="p1">
				<label for="userA">账号A</label>
		 		<input type="textA" name="userA" id="userA" placeholder="账号A" required="" value="">			
			</p>
	 		<p>
				<label for="password">密码A</label>		
				<input type="password" name="passwordA" id="passwordA" placeholder="密码A" value="">
	 		</p>
			<p>
				<label for="telA">电话号码A</label>
				<input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value="">				
			</p>

2.4 层级与属性结合
说明：如果通过元素自身的信息不方便直接定位到该元素，则可以先定位到其父级元素，然后再找到该元素
格式： //*[@id='p1']/input
需求：打开注册A.html页面，完成以下操作
1).使用层级与属性结合定位策略，在test1对应的输入框里输入： admin

# 使用层级结合属性 定位用户名：
# driver.find_element_by_xpath("//p[@id='p1']/input").send_keys("admin")
driver.find_element_by_xpath("//*[@name='telA' and @class='telA']").send_keys("admin")
time.sleep(3)
driver.quit()

2.5 XPath-延伸
//*[text()="xxx"] 文本内容是xxx的元素
//*[contains(@attribute,'xxx')] 属性中含有xxx的元素
//*[starts-with(@attribute,'xxx')] 属性以xxx开头的元素
2.6 XPath-总结
1. XPath定位策略有哪些？
3. CSS定位
3.1 什么是CSS定位？
12