UI自动化学习笔记- Selenium元素定位及元素操作

一、元素定位

1. 如何进行元素定位？

元素定位就是通过元素的信息或元素层级结构来定位元素的

2.定位工具

浏览器开发者工具

3.元素定位方式

Selenium提供了八种定位元素方式

• id
• name
• class_name(使用元素的class属性定位)
• tag_name(标签名 <标签名 ..../>)
• link_text(定位超链接a标签)
• partial_link_text(定位超链接 a标签 模糊)
• xpath(基于元素路径)
• css(元素选择器)

3.1 id定位

说明：id定位就是通过元素的id属性来定位元素，HTML规定id属性在整个HTML文档中必须是唯一的

前提：元素有id属性

id一般情况下在当前页面中是唯一的

id定位方法

element = driver.find_element_by_id(id)

案例

需求：打开一个注册页 ，完成以下操作

1. 使用id定位，输入用户名
2. 使用id定位，输入密码
3. 3秒后关闭浏览器窗口

案例解析：

# 导包
from selenium import webdriver
from time import sleep

# 获取浏览器对象
driver = webdriver.Chrome()
# 打开URL
# 注意：\反斜杠在python中是转义字符 r:修饰的字符串，如果字符串中有转义字符，不进行转义使用
url = 'http://confluence.huisaas.com/'
driver.get(url)
# 查找用户名元素
username = driver.find_element_by_id('os_username')
# 查找密码元素
password = driver.find_element_by_id('os_password')
# 用户名输入
username.send_keys('admin')
# 密码输入
password.send_keys('123456')
# 暂停3秒
sleep(3)
# 退出浏览器驱动
driver.quit()

3.2 name定位

说明：name定位就是根据元素name属性来定位。HTML文档中name的属性值是可以重复的

前提：元素有name属性

name定位方法

element = driver.find_element_by_name(name)

3.3 class_name定位

说明：class_name定位就是根据元素class属性值来定位元素。HTML通过使用class来定义元素的样式

前提：元素有class属性

注意：如果class有多个属性值，只能使用其中一个

class_name定位方法

element = driver.find_element_by_class_name(class_name)

3.4 tag_name定位

说明：tag_name定位就是通过标签名来定位

HTML本职就是由不同的tag组成，每一种标签一般在页面中会存在多个，所以不方便进行精准定位，一般很少使用

tag_name定位方法

element = driver.find_element_by_tag_name(tag_name)
# 如果存在多个相同标签，则返回符合条件的第一个标签

案列

需求：打开一个注册页 ，完成以下操作

1. 使用tag_name定位，输入用户名

注意：页面中如果存在多个相同的标签名，默认返回第一个标签

案列解析

from selenium import webdriver
from time import sleep
# 获取浏览器对象
driver = webdriver.Chrome()
# 打开URL
url = 'http://confluence.huisaas.com/'
driver.get(url)
# 查找用户名元素,输入用户名
driver.find_element_by_tag_name('imput').send_keys('admin')
# 暂停3秒
sleep(3)
# 退出浏览器驱动
driver.quit()

3.5 link_text定位

说明：link_text定位是专门用来定位超链接元素(标签< /a>),并且是通过超链接的文本内容来定位元素

link_text定位方法

element = driver.find_element_by_link_text(link_text)
# link_text:为超链接的全部文本内容

注意

1. 只能使用精准匹配(a标签的全部文本内容)

3.6 partial_link_text定位

说明：partial_link_text定位是对link_text定位的补充，link_text使用全部文本内容匹配元素，

而partial_link_text可以使用局部来匹配元素，也可以使用全部文本内容匹配元素

partial_link_text定位方法

element = driver.find_element_by_partial_link_text(partial_link_text)
# partial_link_text:可以传入a标签局部文本-能表达唯一性

注意

1. 可以使用精准或模糊匹配，如果使用模糊匹配最好使用能代表唯一的关键词
2. 如果有多个值，默认返回第一个值

3.7xpath 和 css 定位

为什么使用 xpath 和 css 定位？

1. id 、name、class：依赖于元素对应的属性，如果元素没有以上三个属性，定位方法不能使用
2. link_text，partial_link_text：只适合超链接
3. tag_name ：只能找页面唯一元素，或者页面中多个相同元素中的第一个元素

1.什么是 xpath 定位？

说明：基于元素的路径

1. xpath即为XML path的简称，它是一门在XML文档中查找信息的语言
2. HTML可以看做是XML的一种实现，所以selenium用户可以使用这种强大的语言在web应用中定位元素

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

xpath 定位策略

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

xpath 定位方法

element = driver.find_element_by_xpath(xpath)

路径定位(绝对路径、相对路径)

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

1. 绝对路径以/html根节点开始，使用/来分隔元素层级

   如：/html/body/div/fieldset/p[1]/input

2. 绝对路径对页面结构要求比较严格，不建议使用

相对路径：匹配任意层级的元素，不限制元素的位置

1. 相对路径以//开始，双斜杠后边跟元素名称，不值元素名称可以使用*代替
2. 格式：//input 或者 //*

路径结合属性

语法：在xpath中，所有的属性必须使用@符号修饰 如：//*[@id='id值']

路径结合逻辑(多个属性)

语法：//[@id=“id值” and @属性=‘属性值’]

路径结合层级

语法：//*[@id='父级id属性值']/input

注意：

1. 一般使用指定标签名称，不使用*代替，效率比较慢
2. 无论是绝对路径和相对路径，/后面必须为元素的名称或者*

XPath - 延伸

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

提示：一般适合 p标签， a标签

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

提示：contains为关键字，不可更改

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

3.8 CSS定位

1.什么是CSS定位

1. CSS是一种语言，它用来描述HTML元素的显示样式
2. 在CSS中，选择器是一种模式，用于选择需要添加样式的元素
3. 在Selenium中也可以使用这种选择器来定位元素

提示：

	1. 在selenium中推荐使用CSS定位，因为它比Xpath定位速度快
	2. CSS选择器语法非常强大，在这里离我们只学习测试中常用的几个

2. CSS定位方法

element = driver.find_element_by_css_selector(css_selector)

3. CSS定位常用策略(方式)

1. id选择器
2. class选择器
3. 元素选择器
4. 属性选择器
5. 层级选择器

id选择器

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

格式：#id

例如：#userA<选择id属性值为userA的元素>

class选择器

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

格式：.class

例如：.userA<选择class属性值为userA的所有元素>

元素选择器

语法：element 如：input

属性选择器

语法：[属性名 = 属性值]

层级选择器

语法：

		1. p >input
		2. p   input

提示：>与空格的区别，大于号必须为子元素，空格则不用

4. CSS延伸[了解]

input[type^='p'] type属性以p字母开头的元素

input[type$='d'] type属性以d字母结束的元素

input[type*='w'] type属性包含w字母的元素

3.9 定位一组元素

方法：driver.find.elements_by_xxx()

返回结果：类型为列表，要对列表进行访问和操作必须指定下标或进行遍历，[下标从0开始]

3.10 扩展8种元素定位的底层实现

方式：driver.find_element(By.xxx, 'value')

参数说明：

​ By.xxx ：为By类的类型 如By.ID

​ value ：元素的定位值 如：“userA”

By类：需要导包 位置：from selenium.webdriver.common.by import By

二、元素操作

1.操作浏览器常用方法

1. maximize_window() 最大化浏览器窗口 --> 模拟浏览器最大化按钮
2. set_window_size(width, height) 设置浏览器窗口大小 --> 设置浏览器宽、高(像素点)
3. set_window_position(x,y) 设置浏览器窗口位置 --> 设置浏览器位置
4. back() 后退 --> 模拟浏览器后退按钮
5. forward() 前进--> 模拟浏览器前进按钮
6. refresh() 刷新--> 模拟浏览器 F5 刷新
7. close() 关闭当前窗口 --> 模拟点击浏览器关闭按钮
8. quit() 关闭浏览器驱动对象 --> 关闭所有程序启动的窗口
9. title 获取页面title
10. current_url 获取当前页面URL

2. 获取元素信息的常用方法

1. size 返回元素大小
2. text 获取元素的文本
3. get_attribute("xxx") 获取属性值，传递的参数为元素的属性名
4. is_displayedd() 判断元素是否可见
5. is_enabled() 判断元素是否可用
6. is_selected() 判断元素是否选中，用来检查复选框或单选按钮是否被选中

提示：

1. size 、text： 为属性，调用时无括号：如：xxx.size

三、鼠标和键盘操作

1. 鼠标操作的方法

说明：在selenium中将操作鼠标的方法封装在 ActionChains 类中

导包：from selenium.webdriver import ActionChains

实例化对象：

​ action = ActionChains(driver)

方法：

	1. context_click(element)					右击 --> 模拟鼠标右键点击效果
	2. double_click(element)                     双击 --> 模拟鼠标双击效果
	3. drag_and_drop(source, target)       拖动 --> 模拟鼠标拖动效果
	4. move_to_element(element)            悬停 --> 模拟鼠标悬停效果
	5. perform()                                         执行 --> 此方法用来执行以上所有鼠标操作

2. 键盘操作

说明：

  1. 模拟键盘上一些按键或组合键的输入 如：ctrl + c
  2. Selenium中把键盘的按键都封装在keys类中

导包：from selenium.webdriver.common.keys import keys

方法：

1. send_keys(Keys.BACK_SPACE)                     删除键（BackSpace）
2. send_keys(Keys.SPACE)                          空格键（Space）
3. send_keys(Keys.TAB)                            制表符(Tab)
4. send_keys(Keys.ESCAPE)                         回退键(Esc)
5. send_keys(Keys.ENTER)                          回车键(Enter)
6. send_keys(Keys.CONTROL, 'a')                   Ctrl+A
7.send_keys(Keys.CONTROL, 'c')                    Ctrl+C