【UI自动化测试】7_web自动化测试 _页面交互操作（重点）

文章目录

一、下拉框
- [1.1 下拉选择框处理方式](#1.1 下拉选择框处理方式)
- - [1.1.1 方法1：元素定位](#1.1.1 方法1：元素定位)
  - [1.1.2 方法2：使用 Select类](#1.1.2 方法2：使用 Select类)
- [1.2 Select类-案例](#1.2 Select类-案例)
二、弹出框
- [2.1 弹出框类型](#2.1 弹出框类型)
- [2.2 JS弹出框处理方法](#2.2 JS弹出框处理方法)
- [2.3 JS弹出框处理-案例](#2.3 JS弹出框处理-案例)
三、滚动条
- 3.1滚动条操作-实现方法
- [3.2 滚动条操作-案例](#3.2 滚动条操作-案例)
- [3.3 滚动条操作-总结](#3.3 滚动条操作-总结)

一、下拉框

1、下拉框分类：

自定义:通过div等布局标签设计的下拉框。
HTML原生态下拉框: +。

2、下拉框处理方式：

①无论是自定义还是HTML原生态的下拉框都可以直接通过元素定位的方式直接完成选项选择。
②针对于原生态标签的下拉框提供了Select对象实现选项选择固定方法

yacas 复制代码

如通过元素定位方式实现选项选择会出现大批量的元素定位，而通过Select对象对于select下拉框实现选项选择只需要定位一次

元素定位的方式去操作下拉框:
- 操作繁琐
- 影响脚本运行效率

3、select标签的下拉框选择方法:

分析是否是select的下拉框
获取所要选择下拉框对象
执行选项的选择

1.1 下拉选择框处理方式

1.1.1 方法1：元素定位

思路：先定位到要操作的option元素，然后执行点击操作

python 复制代码

# 点击广州
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()

1.1.2 方法2：使用 Select类

python 复制代码

1. 导包 Select类 -->  from selenium.webdriver.support.select import Select
2. 实例化Select类     select = Select(element)
3. 调用方法： 		 select.select_by_index(index)


说明： Select类是Selenium为操作select标签特殊封装的。

实例化对象：
	select = Select(element)
	   element: <select>标签对应的元素， 通过元素定位方式获取，定位的是父级
           例如： driver.find_element_by_id("selectA")

操作方法：
1. select.select_by_index(index)           --> 根据option索引来定位， 从0开始
2. select.select_by_value(value)           --> 根据option属性 value值来定位
3. select.select_by_visible_text(text)     --> 根据option显示文本来定位，显示标签中的文字

注意：
  1. Select类是通过select标签来控制其下的option元素
  2. element:只能是select标签

1.2 Select类-案例

python 复制代码

from time import sleep

from selenium import webdriver

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

# 1、获取浏览器
driver = webdriver.Chrome()
# 2、打开url
driver.get("file:///Users/lgy/Documents/fodder/web/%E6%B3%A8%E5%86%8CA.html")

# 3、再定3s-->代替测试步骤

# 获取页面下拉框对象
# ①定位下拉框元素 select
el = driver.find_element(By.ID,"selectA")
# ②实例化Select对象
select = Select(el)

# 使用下标定位广州
select.select_by_index(2)
sleep(2)
# 使用value定位上海
select.select_by_value("sh")
# 使用文本定位 北京
sleep(2)
select.select_by_visible_text("北京")

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

二、弹出框

为什么要处理弹出框？ --> 如果页面操作过程中，有弹窗出现，不处理，无法继续对页面操作。

2.1 弹出框类型

1、自定义弹出框

可以直接通过web浏览器开发者工具查看到具体的元素信息
处理方式：直接元素定位后，点击确定或取消即可。

2、JS弹出框

通过JS函数实现，通过web浏览器开发者工具无法查看到元素信息
常见S弹出框形式:alert（警告框)、confirm（确认框)、prompt(提示框)
不能通过元素定位进行处理

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="alert警告框" onclick="alert('我是警告框')">
<input type="button" value="confirm确认框" onclick="confirm('我是确认框')">
<input type="button" value="prompt提示框" onclick="prompt('我是提示框')">
</body>
</html>

2.2 JS弹出框处理方法

Python 复制代码

说明： Selenium中对处理弹出框的操作， 有专用的处理方法； 并且处理的方法都一样

1. 获取弹出框对象，对于警告框、确认框、警示框都一样
alert = driver.switch_to.alert

2. 弹出框处理方法
alert.text 		 --> 返回alert/confirm/prompt中的文字信息
alert.accept()   --> 接受弹出框选项
alert.dismiss()  --> 取消弹出框选项（确认框没有取消按钮，取消方法一样生效）

提示：无论以上哪个对话框，都可以使用取消、同意，因为调用的是后台的事件，根页面显示的按钮数量无关。

python 复制代码

注意： 
	1. driver.switch_to.alert 方法适合以上三种类型对话框，调用时没有括号
	2. 获取文本的方法，调用时没有括号 如：alert.text
	3. 在项目中不是所有的小窗口都是以上三种对话框。

2.3 JS弹出框处理-案例

python 复制代码

from time import sleep

from selenium import webdriver

from selenium.webdriver.common.by import By

# 1、获取浏览器
driver = webdriver.Chrome()
# 2、打开url
driver.get("file:///Users/lgy/Documents/fodder/web/%E6%B3%A8%E5%86%8CA.html")

# 3、暂停3s--->代替测试步骤
# 点击页面alert按钮
driver.find_element(By.ID,"alerta").click()
time.sleep(2)

# ①分析是否是js弹出框，通过右键检查，无检查选项则获取弹出框对象的方式处理
# ②获取弹出框对象
alert = driver.switch_to.alert
# 获取弹出框文本
print(alert.text)
# 点击弹出框确定按钮
alert.accept()
time.sleep(3)
# 点击弹出框取消按钮
alert.dismiss()  # 取消

# 输入用户名
driver.find_element(By.CSS_SELECTOR,"#userA").send_keys("admin")

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

三、滚动条

1、滚动条：一种可控制页面显示范围的组件。

2、为什么要学习滚动条操作？

yacas 复制代码

1、在HTML页面中， 由于前端技术框架的原因， 页面元素为动态显示， 元素根据滚动条的下拉而被加载。
2、页面注册同意条款， 需要滚动条到最底层， 才能点击同意。
3、在web自动化中有些特殊场景，如：滚动条拉倒最底层，指定按钮才可用。

3.1滚动条操作-实现方法

说明： selenium中并没有直接提供操作滚动条的方法，但是它提供了可执行JavaScript脚本的方法，所以我们可以通过JavaScript脚本来达到操作滚动条的目的。

python 复制代码

# 1. 设置JavaScript脚本控制滚动条，0: 左边距 --》水平滚动条   10000：上边距 -->垂直滚动条
js = "window.scrollTo(0,1000)"    # (左边距=0,左边距不动。上边距=1000，离上边距1000像素。单位像素)
                               
# 2. selenium调用执行JavaScript脚本的方法
driver.execute_script(js)

3.2 滚动条操作-案例

python 复制代码

# 导包
from selenium import webdriver
from time import sleep
# 获取浏览器驱动对象
driver = webdriver.Chrome()
# 最大化浏览器
driver.maximize_window()
# 隐式等待
driver.implicitly_wait(30)
# 打开url
url = r"https://news.baidu.com/"
driver.get(url)


"""
    目标：滚动条操作
    
    需求：
        1. 启动暂停2秒
        2. 滚动条拉倒最底下
"""
sleep(2)
# 第一步 设置js控制滚动条语句
js = "window.scrollTo(0, 10000)"
# 第二步 调用执行js语句方法
driver.execute_script(js)

# 暂停 2
sleep(2)
# 关闭驱动对象
driver.quit()

3.3 滚动条操作-总结

python 复制代码

1 为什么要操作滚动条
	在web自动化中有些特殊场景，如：滚动条拉倒最底层，指定按钮才可用。
2 如何操作 
	第一步：设置操作滚动条操作语句
		如：js = "window.scrollTo(0,10000)"
			0: 左边距 --》水平滚动条
			10000：上边距 -->垂直滚动条
	
	第二步：调用执行js方法，将设置js语句传入方法中
		方法：driver.execute_script(js)
3 说明
		在selenium中没有直接提供定位滚动条组件方法，但是它提供了执行js语句方法，可以通过js语句来控制滚动条操作。