自动化测试：页面进阶操作（8）

2023 年 12 月 14 日软件测试专题

前言

在自动化测试的过程中，我们常常需要进行一些页面进阶操作，如截图、读取弹窗等。

本文将介绍一些页面进阶操作，使你能够更灵活地应对测试中的各种场景。

知识点

页面截图
处理 JavaScript 弹窗
- alert 弹窗
- confirm 弹窗
- prompt 弹窗
实例：使用 Selenium 进行页面进阶操作

页面截图

在自动化测试中，页面的转换速度非常快。在前面的案例中，我们经常使用 input() 方法来暂停程序，以便观察页面的变化。

然而，input 方法会阻塞程序的执行，因此我们需要一种更有效的方式来观察页面的变化，这就是通过页面截图来实现。

截图方法

在 Selenium 中，可以使用 save_screenshot() 方法进行页面截图。

# 页面截图，传入保存路径
driver.save_screenshot("screenshot.png")

处理 JavaScript 弹窗

在网页交互中，JavaScript 提供了几种常见的弹窗类型，通常称为 JavaScript Dialog。这些弹窗包括 alert、confirm 和 prompt。

Alert 弹窗

Alert 弹窗是一种简单的弹窗，只包含一条消息和一个确认按钮。它用于向用户显示一些信息，而用户只能通过点击确认按钮来关闭弹窗。

Confirm 弹窗

Confirm 弹窗包含一条消息、确认按钮和取消按钮，用于要求用户进行二选一的选择。

Prompt 弹窗

Prompt 弹窗除了包含一条消息和确认按钮外，还包含一个文本输入框，用于接收用户的输入。

弹窗处理方法

获取弹窗对象

# 获取弹窗对象
dialog = driver.switch_to.alert

获取弹窗文本

# 获取弹窗文本
dialog_text = dialog.text

确认弹窗

# 确认弹窗
dialog.accept()

取消弹窗

# 取消弹窗
dialog.dismiss()

向弹窗输入文本

# 向弹窗输入文本
dialog.send_keys("用户输入")

dialog.accept() # 提交输入的文本

弹窗处理方法适用范围

名称	获取文本 `.text`	确认 `.accept()`	取消 `.dismiss()`	输入文本 `.send_keys()`
Alert	✅	✅
Confirm	✅	✅	✅
Prompt	✅	✅	✅	✅

通过上表，你可以根据弹窗的类型选择适当的处理方法。

实例：使用 Selenium 进行页面进阶操作

在本例中，我们将使用 Selenium 进行页面进阶操作。

本实例将完成以下操作：

页面截图
获取并打印弹窗文本
确认弹窗
取消弹窗
向弹窗输入文本
获取并打印结果

打开配套网页

打开实例：使用 Selenium 进行页面进阶操作网页。

如上图所示，网页中有三个按钮，点击对应的按钮将弹出不同类型的弹窗。

编写脚本

1. 前置操作

from selenium import webdriver  # 导入 webdriver
from selenium.webdriver.common.by import By  # 导入 By

# 创建浏览器驱动
driver = webdriver.Chrome()

# 打开网页
driver.get("https://selenium-app.im0o.top/dialog-example")

2. 页面截图

# 页面截图
driver.save_screenshot("screenshot.png")

3. 点击 alert 按钮

# 点击 alert 按钮
driver.find_element(By.ID, "alert").click()

4. 获取并打印弹窗文本

# 获取弹窗对象
dialog = driver.switch_to.alert

# 获取弹窗文本
dialog_text = dialog.text

# 打印弹窗文本
print("弹窗文本：", dialog_text)

5. 确认弹窗

# 确认弹窗

dialog.accept()

6. 点击 confirm 按钮

# 点击 confirm 按钮
driver.find_element(By.ID, "confirm").click()

7. 获取并打印弹窗文本

# 获取弹窗对象
dialog = driver.switch_to.alert

# 获取弹窗文本
dialog_text = dialog.text

# 打印弹窗文本
print("弹窗文本：", dialog_text)

8. 取消弹窗

# 取消弹窗
dialog.dismiss()

9. 点击 prompt 按钮

# 点击 prompt 按钮
driver.find_element(By.ID, "prompt").click()

10. 向弹窗输入文本

# 获取弹窗对象
dialog = driver.switch_to.alert

# 向弹窗输入文本
dialog.send_keys("这是用户输入")

# 提交输入的文本
dialog.accept()

11. 获取并打印结果

# 获取结果
result = driver.find_element(By.ID, "result").text

# 打印结果
print("结果：", result)

12. 关闭浏览器

# 关闭浏览器
driver.quit()

完整代码

from selenium import webdriver  # 导入 webdriver
from selenium.webdriver.common.by import By  # 导入 By

# 创建浏览器驱动
driver = webdriver.Chrome()

# 打开网页
driver.get("https://selenium-app.im0o.top/dialog-example")

# 页面截图
driver.save_screenshot("screenshot.png")

# 点击 alert 按钮
driver.find_element(By.ID, "alert").click()

# 获取弹窗对象
dialog = driver.switch_to.alert

# 获取弹窗文本
dialog_text = dialog.text

# 打印弹窗文本
print("弹窗文本：", dialog_text)

# 确认弹窗
dialog.accept()

# 点击 confirm 按钮
driver.find_element(By.ID, "confirm").click()

# 获取弹窗对象
dialog = driver.switch_to.alert

# 获取弹窗文本
dialog_text = dialog.text

# 打印弹窗文本
print("弹窗文本：", dialog_text)

# 取消弹窗
dialog.dismiss()

# 点击 prompt 按钮
driver.find_element(By.ID, "prompt").click()

# 获取弹窗对象
dialog = driver.switch_to.alert

# 向弹窗输入文本
dialog.send_keys("这是用户输入")

# 提交输入的文本
dialog.accept()

# 获取结果
result = driver.find_element(By.ID, "result").text

# 打印结果
print("结果：", result)

# 关闭浏览器
driver.quit()

运行脚本

At Last

头图/封面素材来源： Photo by Laura Kennedy on Unsplash

评论加载中…