前言

在自动化测试中，对于表单的操作是至关重要的。本文将介绍一些常见的表单操作技术，使你能够更好地应对测试中的表单交互。

知识点

表单操作
- 输入框操作
- 单选框操作
- 复选框操作
- 下拉框操作
- 文件上传处理
- submit() 方法使用
实例：使用 Selenium 进行表单操作
实训：使用 Selenium 进行表单操作

表单操作

在自动化测试中，对表单的灵活操作是确保测试准确性和可靠性的关键。下面将介绍一些常见的表单操作技术，包括输入框、单选框、复选框、下拉框、文件上传处理以及 submit() 方法的使用。

输入框操作

输入框是用户与网页进行交互的主要方式之一。

在先前的章节中，我们已经介绍了如何使用 Selenium 模拟用户输入，此处使用的方法与之前相同，即使用 send_keys() 方法。

from selenium.webdriver.common.by import By

# 找到输入框元素
input_element = driver.find_element(By.ID, 'username')

# 在输入框中输入文本
input_element.send_keys('your_username')

单选框操作

单选框通常用于用户需要从一组互斥的选项中选择一个的情况。

在自动化测试中，我们可以直接定位到单选框元素，然后使用 click() 方法来选中单选框：

from selenium.webdriver.common.by import By

# 找到单选框元素
radio_button = driver.find_element(By.ID, 'male')

# 选中单选框
radio_button.click()

复选框操作

与单选框类似，复选框允许用户选择多个选项。

在自动化测试中，我们可以直接定位到复选框元素，然后使用 click() 方法来选中复选框：

from selenium.webdriver.common.by import By

# 找到复选框元素
checkbox = driver.find_element(By.ID, 'subscribe')

# 选中复选框
checkbox.click()

下拉框操作

下拉框（或选择框）是一种常见的表单元素，用户可以从中选择一个或多个选项。

在自动化测试中，我们可以使用 Selenium 的 Select 类来进行下拉框的操作：

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

# 找到下拉框元素
dropdown = driver.find_element(By.ID, 'country')

# 实例化 Select 对象
select = Select(dropdown)

# 选择下拉框中的选项
select.select_by_value('your_option_value')

Select 类提供了多种方法来选择下拉框中的选项，包括：

select_by_index()：通过选项的索引来选择选项。
select_by_value()：通过选项的值来选择选项。
select_by_visible_text()：通过选项的可见文本来选择选项。

文件上传处理

在网页中，文件上传是一种常见的表单操作。

通常情况下，上传文件的表单元素是一个 <input> 标签，其 type 属性值为 file。

我们可以直接定位到该元素，然后使用 send_keys() 方法向该元素发送文件路径，即可完成文件上传操作：

from selenium.webdriver.common.by import By

# 找到文件上传的输入框元素
file_input = driver.find_element(By.ID, 'fileUpload')

# 上传文件
file_input.send_keys('path/to/your/file.txt')

但有些网页会使用 JavaScript 或其他技术来隐藏文件上传的输入框元素，此时就需要第三方库来模拟文件上传操作。

本系列仅对 Selenium 进行介绍，不涉及第三方库的使用。

如果你需要模拟文件上传操作，可以参考 huilan_same 的 selenium 之文件上传所有方法整理总结

`submit()` 方法使用

submit() 方法用于模拟用户点击表单的提交按钮。

通过找到表单元素，我们可以直接调用该元素的 submit() 方法：

from selenium.webdriver.common.by import By

# 找到表单元素
form_element = driver.find_element(By.ID, 'myForm')

# 提交表单
form_element.submit()

实例：使用 Selenium 进行表单操作

在配套网页——实训：使用 Selenium 进行表单操作中，我们将演示如何使用 Selenium 进行表单操作。

打开配套网页

打开实训：使用 Selenium 进行表单操作网页：

如上图所示，网页中有一个表单，包含了文本输入（输入框）、单选框、复选框、下拉框、文件上传等表单元素。

在上传图片 (png, jpeg) 时，网页将显示图片：

在上传其他文件时，网页将显示 <a> 标签，地址指向上传的文件：

由于网页项目是无后端的，因此上传的文件不会真正保存到服务器上。

提交表单后，网页将显示表单中的数据：

编写脚本

1. 前置操作

from selenium import webdriver  # 导入 webdriver
from selenium.webdriver.common.by import By  # 导入 By
from selenium.webdriver.support.ui import Select  # 导入 Select

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

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

2. 获取表单元素

1 2	# 获取表单元素 form_element = driver.find_element(By.XPATH, '//*[@id="app"]/div/form')

3. 向输入框中输入文本

# 获取输入框元素
input_element = driver.find_element(By.ID, 'textinput')

# 向输入框中输入文本
input_element.send_keys('这是内容')

4. 选择单选项

# 获取单选项元素
radio_button = driver.find_element(By.ID, 'radio-1')

# 选中单选项
radio_button.click()

5. 选择复选项

# 获取复选项元素
checkbox = driver.find_element(By.ID, 'checkbox-1')

# 选中复选项
checkbox.click()

6. 选择下拉框选项

# 获取下拉框元素
dropdown = driver.find_element(By.ID, 'select')

# 实例化 Select 对象
select = Select(dropdown)

# 选择下拉框中的选项
select.select_by_value('选项 2')

7. 上传文件

# 获取文件上传输入框元素
file_input = driver.find_element(By.ID, 'file')

# 上传 D:/test.txt 文件
file_input.send_keys('D:/test.txt')

8. 提交表单

1 2	# 提交表单 form_element.submit()

9. 关闭浏览器

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

完整代码

from selenium import webdriver  # 导入 webdriver
from selenium.webdriver.common.by import By  # 导入 By
from selenium.webdriver.support.ui import Select  # 导入 Select

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

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


# 获取表单元素
form_element = driver.find_element(By.XPATH, '//*[@id="app"]/div/form')

# 获取输入框元素
input_element = driver.find_element(By.ID, 'textinput')

# 向输入框中输入文本
input_element.send_keys('这是内容')

# 获取单选项元素
radio_button = driver.find_element(By.ID, 'radio-1')

# 选中单选项
radio_button.click()

# 获取复选项元素
checkbox = driver.find_element(By.ID, 'checkbox-1')

# 选中复选项
checkbox.click()

# 获取下拉框元素
dropdown = driver.find_element(By.ID, 'select')

# 实例化 Select 对象
select = Select(dropdown)

# 选择下拉框中的选项
select.select_by_value('选项 2')

# 获取文件上传输入框元素
file_input = driver.find_element(By.ID, 'file')

# 上传文件（文件不能不存在）
file_input.send_keys('D:/test.txt')
# 提交表单
form_element.submit()

input("按 Enter 键退出")

# 关闭浏览器
driver.quit()

运行脚本

实训：使用 Selenium 进行表单操作

在同样的页面中，请编写脚本，完成以下操作：

引入 By 类和 Select 类。
通过 ID 定位到输入框元素，向输入框中输入文本 Sample。
通过 XPATH 定位到第二个单选框元素，选中该单选框。
通过 XPATH 定位到第二、三个复选框元素，选中这两个复选框。
通过 ID 定位到下拉框元素，选择第三个选项。
定位到文件上传输入框元素，上传任意 jpeg/png 文件。
定位到表单元素并提交表单。
获取跳转后的内容，输出到控制台。

提示

对于下拉框，使用 Select 类的方法进行选项选择。
文件上传时，使用 send_keys 方法发送文件路径，确保文件存在。

参考答案

点击展开

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

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

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

# 通过 ID 定位到输入框元素，向输入框中输入文本 `Sample`
input_element = driver.find_element(By.ID, 'textinput')
input_element.send_keys('Sample')

# 通过 XPATH 定位到第二个单选框元素，选中该单选框
radio_button = driver.find_element(By.XPATH, '//*[@id="radio-2"]')
radio_button.click()

# 通过 XPATH 定位到第二、三个复选框元素，选中这两个复选框
checkbox1 = driver.find_element(By.XPATH, '//*[@id="checkbox-2"]')
checkbox2 = driver.find_element(By.XPATH, '//*[@id="checkbox-3"]')
checkbox1.click()
checkbox2.click()

# 通过 ID 定位到下拉框元素，选择第三个选项
dropdown = driver.find_element(By.ID, 'select')
select = Select(dropdown)
select.select_by_value('选项 3')

# 定位到文件上传输入框元素，上传任意 `jpeg/png` 文件
# 此处请根据实际情况修改文件路径
file_input = driver.find_element(By.ID, 'file')
file_input.send_keys("D:\\UserData\\Pictures\\icon\\smile.png")


# 定位到表单元素并提交表单
form_element = driver.find_element(By.XPATH, '//*[@id="app"]/div/form')
form_element.submit()

# 获取跳转后的内容，输出到控制台
result_element = driver.find_element(By.ID, 'form-example-result')
print(result_element.text)


input("按 Enter 键退出")

# 关闭浏览器
driver.quit()