前言

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

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

知识点

  • 页面截图

  • 处理 JavaScript 弹窗

    • alert 弹窗

    • confirm 弹窗

    • prompt 弹窗

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

页面截图

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

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

截图方法

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

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

处理 JavaScript 弹窗

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

Alert 弹窗

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

Confirm 弹窗

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

Prompt 弹窗

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

弹窗处理方法

获取弹窗对象

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

获取弹窗文本

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

确认弹窗

1
2
# 确认弹窗
dialog.accept()

取消弹窗

1
2
# 取消弹窗
dialog.dismiss()

向弹窗输入文本

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

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

弹窗处理方法适用范围

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

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

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

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

本实例将完成以下操作：

  • 页面截图

  • 获取并打印弹窗文本

  • 确认弹窗

  • 取消弹窗

  • 向弹窗输入文本

  • 获取并打印结果

打开配套网页

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

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

编写脚本

1. 前置操作

1
2
3
4
5
6
7
8
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. 页面截图

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

3. 点击 alert 按钮

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

4. 获取并打印弹窗文本

1
2
3
4
5
6
7
8
# 获取弹窗对象
dialog = driver.switch_to.alert

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

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

5. 确认弹窗

1
2
3
# 确认弹窗

dialog.accept()

6. 点击 confirm 按钮

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

7. 获取并打印弹窗文本

1
2
3
4
5
6
7
8
# 获取弹窗对象
dialog = driver.switch_to.alert

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

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

8. 取消弹窗

1
2
# 取消弹窗
dialog.dismiss()

9. 点击 prompt 按钮

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

10. 向弹窗输入文本

1
2
3
4
5
6
7
8
# 获取弹窗对象
dialog = driver.switch_to.alert

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

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

11. 获取并打印结果

1
2
3
4
5
# 获取结果
result = driver.find_element(By.ID, "result").text

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

12. 关闭浏览器

1
2
# 关闭浏览器
driver.quit()

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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