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

时间:2024-10-22 14:35:38

一、元素定位

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