04. Selenium之交互操作

Frankie.Lee2024年10月28日大约 9 分钟

04. Selenium之交互操作

掌握selenium常用界面交互操作Api使用

1. 元素操作和元素信息获取

1. 元素常用的操作方法

绿色部分通过元素定位实现
红色部分通过元素操作方法实现
模拟点击
- element.click()
模拟输入
- element.sendKey(value)
模拟清除
- element.clear()

演练

实现下面需求的代码
需求：打开注册A.html页面,完成以下操作
1. 通过脚本执行输入用户名:admin,密码:123456,电话号码:18611111111,电子邮箱:123@qq.com
2. 间隔3秒，修改电话号码为:18600000000
3. 间隔3秒，点击【注册】按钮
4. 间隔3秒，关闭浏览器
5. 元素定位方法不限

from time import sleep

from selenium import webdriver
from selenium.webdriver.common.by import By

import config

# 1、获取浏览器
driver = webdriver.Chrome()
# 2、打开url
driver.get(config.html_a_register_a_path)
# 3、查找操作元素
driver.find_element(By.CSS_SELECTOR, "#userA").send_keys("admin")
driver.find_element(By.CSS_SELECTOR, "[name='passwordA']").send_keys("123456")
driver.find_element(By.CSS_SELECTOR, ".telA").send_keys("18611111111")
driver.find_element(By.CSS_SELECTOR, "[placeholder*='邮箱']").send_keys("123@qq.com")

sleep(3)
# 清空元素内容
driver.find_element(By.CSS_SELECTOR, ".telA").clear()
# 修改电话
driver.find_element(By.CSS_SELECTOR, ".telA").send_keys("18600000000")
sleep(3)
# 点击注册
driver.find_element(By.CSS_SELECTOR, "button").click()

# 4、关闭浏览器
sleep(3)
driver.quit()

2. 获取元素信息方法

场景
- 执行商品查询搜索测试步骤后，需要验证测试结果
- 期望结果 =？实际结果
获取元素大小
- element.size
获取元素文本
- element.text
获取元素属性值
- element.get_attribute("属性名")
获取网页源代码
- content = driver.page_source
判断元素是否可见，返回Boolean类型
- element.is_displayed()
判断元素是否可用，返回Boolean类型
- element.is_enable()
判断是否被选中，返回Boolean类型
- element.is_selected()

演练

实现下面需求的代码
需求：打开注册A.html页面，完成以下操作
1. 获取用户名输入框的大小
2. 获取页面上第一个超链接的文本内容
3. 获取页面上第一个超链接的地址
4. 判断页面中的span标签是否可见
5. 判断页面中取消按钮是否可用
6. 判断页面中'旅游'对应的复选框是否为选中的状态

from time import sleep

from selenium import webdriver
from selenium.webdriver.common.by import By

import config

# 1、获取浏览器
driver = webdriver.Chrome()
# 2、打开url
driver.get(config.html_b_register_a_zs_path)

# 3、查找操作元素
# 获取大小 元素.size
user = driver.find_element(By.CSS_SELECTOR, "#userA").size
print("用户名输入框的大小：", user)

# 获取内容 元素.text
a_text = driver.find_element(By.TAG_NAME, "a").text
print("第一个a标签的文本：", a_text)

# 获取属性 超连接地址
a_href = driver.find_element(By.TAG_NAME, "a").get_attribute("href")
print("第一个a标签的链接：", a_href)

# 判断span标签是否可见 元素.is_displayed
span = driver.find_element(By.TAG_NAME, "span").is_displayed()
print("span是否可见：", span)

# 判断取消按钮是否可用  is_enabled
btn_is_enabled = driver.find_element(By.CSS_SELECTOR, "#cancelA").is_enabled()
print("取消按钮是否可用：", btn_is_enabled)

# 旅游是否选中 is_selected
is_selected = driver.find_element(By.CSS_SELECTOR, "#lyA").is_selected()
print("旅游是否被选中：", is_selected)

# 获取网页源代码
content = driver.page_source
print(content)

# 4、关闭浏览器
sleep(3)
driver.quit()

2. 浏览器操作

1. 浏览器常用操作方法

设置浏览器显示范围
- 窗口最大化
  - dirver.maxmize_window()
- 设置窗口大小
  - dirver.set_window_size(width, height)
- 设置窗口位置
  - dirver.set_window_position(x, y)
浏览器显示页面操作
- 页面后退操作
  - dirver.back()
- 页面前置操作
  - dirver.forword()
- 页面刷新操作
  - dirver.refresh()

演练

完成下面对浏览器的操作
需求：
打开注册A.html页面，完成以下操作
1. 最大化窗口
2. 暂停3s,设置窗口宽度:500px，高度:700px
3. 暂停3s,设置窗口位置:x=0px,y=500px
4. 暂停3s,点击界面 新浪 超链接
5. 暂停3s,返回注册A页面
6. 暂停3s,前进到新浪页面
7. 暂停3s,刷新新浪页面
8. 暂停3s,关闭浏览器

from time import sleep

from selenium import webdriver
# 1、获取浏览器
from selenium.webdriver.common.by import By

import config

driver = webdriver.Chrome()
# 2、打开url
driver.get(config.html_b_register_a_normal_path)

# 最大化浏览器
driver.maximize_window()
sleep(3)
# 设置窗口大小
driver.set_window_size(500, 700)
sleep(3)
driver.set_window_position(0, 500)
sleep(3)
# 点击新浪
driver.find_element(By.PARTIAL_LINK_TEXT, "新浪").click()
sleep(3)
# 后退
driver.back()
sleep(3)
# 前进
driver.forward()
sleep(3)
driver.refresh()

# 4、关闭浏览器
sleep(3)
driver.quit()

浏览器关闭操作
- 关闭当前窗口
  - dirver.close()
- 关闭浏览器
  - dirver.quit()
获取浏览器信息
- 获取标题
  - dirver.title
- 获取网页地址
  - dirver.current_url

当前窗口：创建驱动时第一个打开的窗口，对于当前窗口的元素一般都可以直接定位和操作，如果弹出新的窗口，对于新的窗口元素是不能直接进行操作，需要学习后续的窗口切换。

演练

完成下面对浏览器的操作
需求：
打开注册A.html页面，完成以下操作
1. 最大化窗口
2. 打印当前窗口的标题和地址
3. 暂停3s,点击界面 访问 百度 网站 超链接
4. 暂停3s,再次打印当前窗口的标题和地址
5. 暂停3s,关闭当前窗口
6. 暂停3s,关闭浏览器

from time import sleep

from selenium import webdriver
# 1、获取浏览器
from selenium.webdriver.common.by import By

import config

driver = webdriver.Chrome()
# 2、打开url
driver.get(config.html_b_register_path)

# 最大化浏览器
driver.maximize_window()
# 获取当前窗口标题
print("当前窗口title：", driver.title)
# 获取当前窗口url
print("当前窗口url:", driver.current_url)
sleep(3)
driver.find_element(By.PARTIAL_LINK_TEXT, "注册A网页").click()
# 获取当前窗口标题
print("当前窗口title：", driver.title)
# 获取当前窗口url
print("当前窗口url:", driver.current_url)
sleep(3)
# 关闭当前窗内口
driver.close()
# 4、关闭浏览器
sleep(3)
driver.quit()

3. 页面交互操作：弹出框、下拉框、滚动条

1. 下拉框

认识下拉框
Select下拉框
- 元素定位的方式操作下拉框
  - 操作频繁
  - 影响脚本运行效率
- Select下拉框
  - select类实现选项选择只使用与HTML原生态的的下拉框
  - 导包
    - from selenium.webdriver.support.select import Select
  - 创建select对象
    - select = Select(element)
  - 选择选项
    - select .select_by_index(index) 根据下标
    - select .select_by_value(value) 根据选项value属性值
    - select .select_by_visible_text(text) 根据选项文本

演练

使用‘注册A.html’页面，完成对城市的
下拉框的操作：选择‘广州’暂停2秒，选择‘上海’暂停2秒，选择‘北京‘

from time import sleep

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.select import Select

import config

# 1、获取浏览器
driver = webdriver.Chrome()
# 2、打开url
driver.get(config.html_b_register_a_zs_path)

# 点击实现
# 点击广州
driver.find_element(By.CSS_SELECTOR, "[value='gz']").click()
sleep(2)
driver.find_element(By.CSS_SELECTOR, "[value='sh']").click()
sleep(2)
driver.find_element(By.CSS_SELECTOR, "[value='bj']").click()

# 使用Select类来实现
# 1、定位下拉框元素 select
el = driver.find_element(By.CSS_SELECTOR, "#selectA")
# 2、实例化Select对象
select = Select(el)
# 3、使用下标定位广州
select.select_by_index(2)
sleep(2)
# 使用value定位上海
select.select_by_value("sh")
# 使用文本定位 北京
sleep(2)
select.select_by_visible_text("A北京")

# 4、关闭浏览器
sleep(3)
driver.quit()

2. 弹出框

当界面存在弹出框时，必须先处理掉弹出框才能继续其它操作！
类型
- 自定义弹出框
  - 可以直接通过web浏览器开发者工具查看到具体的元素信息
  - 通过元素定位后直接可以处理掉
- JS弹出框
  - 通过JS函数实现，通过web浏览器开发者工具无法查看到元素信息
  - 常见JS弹出框形式：alert（警告框）、confirm（确认框）、prompt（提示框）
  - 不能通过元素定位进行处理
弹出框处理
- 获取弹出框对象
  - alert = driver.switch_to.alert 三种弹出框，在对象获取的时候都一样
- 弹出框处理方法
  - alert.text 获取弹出框文本
  - alert.accept() 接受弹出框
  - alert.dismiss() 取消弹出框
- 确认框没有取消按钮，取消方法一样生效

演练

需求：打开注册A.html页面，完成以下操作：

1. 点击 alert 按钮
2. 关闭警告框
3. 输入用户名：admin

from time import sleep

from selenium import webdriver
from selenium.webdriver.common.by import By

import config

# 1、获取浏览器
driver = webdriver.Chrome()
# 2、打开url
driver.get(config.html_b_register_a_normal_path)

# 点击弹窗
driver.find_element(By.ID, "prompta").click()
sleep(2)
# 获取弹窗对象, 获取方式都一样
el = driver.switch_to.alert 
# 处理弹窗 同意/取消
# el.dismiss()  # 取消
print("弹出文本：", el.text)

# 有输入框时才生效且看不出输入效果，可通过js代码获取
el.send_keys("123456")

el.accept()  # 同意
sleep(2)
# 输入用户名
driver.find_element(By.CSS_SELECTOR, "#userA").send_keys("admin")
# 4、关闭浏览器
sleep(3)
driver.quit()

3. 滚动条

所要操作的元素不在当前展示页，需要滑动滚动条才能找到。
image-20230407142200425
image-20230406131211562
定义JS字符串
- js = "window.scrollTo(0,1000)"
执行JS字符串
- driver.execute_script(js)

滑动到页面底部：driver.execute_script("window.scrollTo(0, document.body.scrollHeight)")
滑动到页面顶部：driver.execute_script("window.scrollTo(0, -document.body.scrollHeight)")

滑动到具体位置：
driver.execute_script("window.scrollTo(x,y)")     # 滚动到具体位置
driver.execute_script("window.scrollBy(x,y)")     # 滚动到具体位置
driver.execute_script("window.scrollBy(0,500)")   # 向下滑动500个像素
driver.execute_script("window.scrollBy(0,-500)")  # 向上滚动500个像素
driver.execute_script("window.scrollBy(500,0)")   # 向右滑动500个像素
driver.execute_script("window.scrollBy(-500,0)")  # 向左滚动500个像素

演练

需求：打开注册A.html页面，完成以下操作

暂停2s，控制滚动条滑动到页面最底部
暂停2s，点击返回顶部按钮

from time import sleep

from selenium import webdriver

# 1、获取浏览器
import config

driver = webdriver.Chrome()
# 2、打开url
driver.get(config.html_b_register_a_normal_path)
# 设置窗口大小
driver.set_window_size(100, 300)
sleep(2)
# js -> 向下
# js_down = "window.scrollTo(0,10000)"
# 动态执行滑倒底部 document.body.scrollHeight
js_down = "window.scrollTo(0,document.body.scrollHeight)"

# 执行js方法
driver.execute_script(js_down)
sleep(2)
# js—> 向上
js_top = "window.scrollTo(0,0)"
driver.execute_script(js_top)

# 4、关闭浏览器
sleep(3)
driver.quit()

4. 页面元素特殊操作：鼠标操作

淘宝主题时长鼠标悬停后才能看到二级分类
3D室内设计通过拖拽到家居房屋内
常见鼠标操作
- ActionChains鼠标类
  - 点击、双击、右击、悬停、拖拽等

步骤

# 1. 导包
from selenium.webdriver import ActionChains

# 2. 实例化鼠标对象
action = ActionChains(driver)

# 3. 调用鼠标方法
action.move_to_element(element)  #鼠标悬停
action.context_click(element) #鼠标右击
action.double_click(element) #鼠标双击
action.drag_and_drop(source,target) #鼠标拖拽

# 4. 执行鼠标操作 调用鼠标方法并不会去执行鼠标操作，必须调用perform才会执行
action.perform()

演练

1. 需求：打开注册页面A，模拟鼠标悬停在‘注册’按钮上
2. 需求：打开注册页面A，在用户名文本框上点击鼠标右键
3. 打开注册A，输入用户名admin，暂停3秒钟后，双击鼠标左键，选中admin

from time import sleep

from selenium import webdriver
from selenium.webdriver import ActionChains
from selenium.webdriver.common.by import By

import config

# 1、获取浏览器
driver = webdriver.Chrome()

# 2、打开url
driver.get(config.html_b_register_a_normal_path)

# 获取ActionChains对象
action = ActionChains(driver)

# 练习 1
# 查找注册按钮
el = driver.find_element(By.CSS_SELECTOR, "button")
# 调用悬停方法,执行鼠标动作 调用鼠标方法并不会执行鼠标操作，必须调用perform才会执行
action.move_to_element(el).perform()
sleep(2)

# 练习2
username = driver.find_element(By.CSS_SELECTOR, "#userA")
# 右击
action.context_click(username).perform()
sleep(2)

# 练习3
username = driver.find_element(By.CSS_SELECTOR, "#userA")
username.send_keys("admin")
sleep(2)

# 双击
action.double_click(username).perform()

# 4、关闭浏览器
sleep(3)
driver.quit()

from time import sleep

from selenium import webdriver
# 1、获取浏览器
from selenium.webdriver import ActionChains
from selenium.webdriver.common.by import By

import config

driver = webdriver.Chrome()
# 2、打开url
driver.get(config.html_b_drop_path)

sleep(3)

# 获取ActionChains对象
action = ActionChains(driver)
div1 = driver.find_element(By.CSS_SELECTOR, "#div1")
div2 = driver.find_element(By.CSS_SELECTOR, "#div2")
# 拖拽
action.drag_and_drop(div1, div2).perform()

# 4、关闭浏览器
sleep(3)
driver.quit()